Layout

Capsule and Separation CSS

Layout/CASC CSSカテゴリ

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

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

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

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

まずはじめに、bodyタグ直下で全てをラップする要素を配置してから各領域の分割をおこないます。

HTML

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

CSS

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

layoutのイメージ

File example

  • サイト骨格用のコンテナ定義ファイル
  • 表示領域幅を制御するコンテナ定義ファイル
  • グリッドシステムなどのコンテナ定義ファイル
  • その他、独自にlayoutに定義するファイル
Base Sassディレクトリ構造 参考例

管理ディレクトリの命名

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

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

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

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

ガイド記載箇所を直接開く http://lacss.site を開く

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

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

具体例

  • シングルカラムのシンプルな構造で、影響分離の必要が無い場合
  • デザインに自由性があり、間仕切る事が制作のデメリットになる場合
  • 明示的な領域分割が不要なランディングページ
  • Atomic Designのデザインアプローチに従ってCSSを設計する場合

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

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

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

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

グリッド イメージ図

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

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

※レスポンシブにともなうObjectの変化は、Object側で制御します。

レスポンシブ イメージ図

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

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

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

ポイント イメージ図