Layout

Capsule and Separation CSS

Layout（レイアウト）は、サイト大枠の配置を定め、Object同士の干渉や影響を最小化するためのボックスです。

この要素には、背景色やボーダーなどのデザインの再現に直接関わる装飾的なスタイルは一切与えません。
内部にObjectを配置するための「透明な箱・間仕切り」として、独立した状態で設置します。

そのプロジェクトにとって不要であれば使用しなくても構いません。

Layoutの設計

Layout要素を使用する場合には、サイトヘッダー・フッター・メイン・カラムといった「大きな領域」を間仕切ることで、Objectをデフォルトの状態で配置しやすくするために設置します。

まずはじめにbodyタグ直下ですべてをラップする要素の配置後、各領域の分割をおこなってください。

div要素で設置します。class属性、id属性の命名にルールや制限はありません。
Objectと混同しないよう、管理しやすい名前やルールを定めてください。
※SMACSSを踏襲するのであれば、「l-」のプレフィックスを付与します。

Layoutには装飾を与えないため、CSSは総じてシンプルなものになります。
float主体の実装、display:flex主体の実装など、目的に応じたプロパティを記述してください。

役割と目的優先の分類名により、「layout/」は、以下の例のような異なるディレクトリ名に変更しても構いません。

「structure/」「container/」「area/」「block/」

※SMACSSやFLOCSSなどで定義されるLayoutをそのままの意味で使用したい場合には、CASCの「透明な間仕切り」の意味をもつ「Layout」を他の語句に変更し、併用するなどの対応がおこなえます。

Webサイトのレイアウトを構築するにあたって、別途「LACSS」というメソッドを公開しています。
この仕組みは、シンプルな法則を使い、1,400パターン以上のレイアウトをイメージ化し、そのイメージを同じルールでコード化（コーディング）できる思考法です。

CASCのLayoutとしての利用法・命名規則もガイドとして掲載しているため、ぜひ合わせてご一読ください。

Layoutを使用するかどうかは、プロジェクトの特性や個々のルールによって定めます。

使用する事で「デザイン再現の邪魔」になったり、「不要な設計工数増加」に直結したり、そもそも「基底とするCSS設計思想にLayoutの概念が存在しない」といった場合にまで使用する必要はありません。

つまり仕切ることによるObjectの影響分離が不要な場合は、使用しない方がよい（使用すると本来必要のない手間が増える）といった判断になるかと思います。

逆に「使用するメリット」があるのは、floatを主体とした構造を構築する場合に「影響が出てほしくない回り込み」を領域レベルで防ぎたい場合や、レスポンシブ時に複数の内容物をまとめて配置変更する場合、Layout要素設置のメリットに記載している例の場合です。

グリッドシステムは、サイトの大きな骨格に使用する事もあれば、コンテンツの一部に使用することもあります。
どのような使い方であれ、装飾的なCSSが付与されておらず「透明な箱」として使用しているのであれば、グリッドはLayoutに属します。

もしグリッドをObject内部に配置し、装飾を伴って上書きしたなら、定義は「Objectの構成部品」という位置付けに変化しますが、この区分け自体、制作上あまり重要ではないかもしれません。

Layoutのレスポンシブ対応は、変化させたい対象要素個別に指定します。

Layoutは複数のObjectを内包することになるため、ある意味ではObjectをグルーピングして領域レベルで制御するためのものと捉える事もできます。

※レスポンシブにともなうObjectの変化は、Object側で制御してください。

Layout設置のメリットは、把握性の向上も挙げられます。
Layoutは装飾的なデザインを伴わず、大きなセクショニングや構造の構築に専念するため、適切な名前を与えた場合には、HTMLコードから「構造やそのブロックの目的」が予測しやすくなるものです。

これは、CSSを編集する権限のないプログラマーがCMSなどのビューファイルにHTMLを記述する際に、大枠でどこに何を記述すべきかの意思疎通の手助けにもなります。

また内容物の外枠を抑えることができるため、Objectの移動・削除・追加が多くなるようなプロジェクト（ワイヤーフレーム代わりのモックアップ作成＆提案など）にも適しています。