移行中の知識
レイアウトマージン
Layout Margin
定義
レイアウトマージン（layout margin）とは、page、artboard、viewportなどformatの外周edgeと、主要なcontent areaまたはgridとの間に取る外側の空間です。grid内部のgutterやcomponent内部のpaddingとは位置が異なり、CSSのmargin propertyだけを指す用語でもありません。responsive Webではviewportの広さが変わるため、同じ比率や固定値をすべての幅へ機械的に維持するのではなく、content幅・行長・gridとの関係で調整します。
関連
対比すると分かりやすい概念
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
book typography
book pageの外周余白
見るポイント
text blockとtrim edgeの間に残るtop / bottom / inner / outer spaceをlayout marginとして見て、gutterやline spacingとは別の階層の空間として捉える。
responsive site
スマホとPCでcontent edgeを調整する
見るポイント
mobileでは狭いviewportの中でcontent幅を確保しつつedgeへ密着させず、PCではmain contentを無制限に広げずouter marginとmax-widthの関係を作る。desktopのmarginを一定比率で縮めるのではなく、本文行長、card幅、gridの成立を見て決める。
注意
誤解しやすい点
- layout marginをCSS margin propertyと完全に同義だと考える。
- format外周の空間とgrid内部のgutterを区別しない。
- desktopとmobileで同じ固定値または同じ比率を保つことを一貫性だと考える。
- margin値そのものを作品の良し悪しと結びつける。
関連
関連する概念
出典