CSS - レイアウト

概要

一般的に、HTMLは上から下に要素が記述されるが、CSSを使用することによりこの自然な流れを制御することができる。

最も基本的な概念としてボックスモデルがある。
これは要素を箱として捉え、content (内容)、padding (内側の余白)、border (枠線)、margin (外側の余白) で構成されている。

レイアウトの主要な手法を以下に示す。

• displayプロパティ

  displayプロパティは、要素の表示方法を決定する重要な要素である。

  代表的な値として、以下に示すものが存在する。

  • block

    要素が横幅いっぱいに広がり、前後に改行が入る。

  • inline

    テキストのように横に並ぶ。

  • inline-block

    blockとinlineの特徴を併せ持つ。

  • flex

    フレックスボックスレイアウトを使用できる。

  • grid

    グリッドレイアウトを使用できる。

• フレックスボックス

  モダンなレイアウトの主力として使用される。

  親要素にdisplay: flexを指定することにより、子要素を柔軟に配置できる。

  .container {
     display: flex;
     justify-content: space-between; /* 横方向の配置 */
     align-items: center; /* 縦方向の配置 */
  }
  

  
  

• グリッドレイアウト

  2次元のグリッドベースのレイアウトを実現できる。

  .grid-container {
     display: grid;
     grid-template-columns: 1fr 2fr 1fr;
     gap: 20px;
  }
  

  
  

• ポジショニング

  positionプロパティを使用することにより、詳細な配置制御が可能となる。

  .element {
     position: relative; /* または absolute, fixed, sticky */
     top: 0;
     left: 0;
  }
  

  
  

• レスポンシブデザイン

  様々な画面サイズに対応するため、メディアクエリを使用する。

  @media (max-width: 768px) {
     .container {
        flex-direction: column;
     }
  }
  

最近のWeb開発では、フレックスボックスとグリッドを組み合わせて使用することが一般的である。
フレックスボックスは1次元のレイアウト、グリッドは2次元のレイアウトに適している。

また、calc関数やCSS変数を使用することにより、柔軟なレイアウト調整が可能になっている。

 :root {
    --main-width: 80%;
 }
 
 .container {
    width: calc(var(--main-width) - 20px);
 }

分割レイアウト

CSS Flexbox

CSS Flexboxは、1次元のレイアウトに特に強みがある。

以下の例では、横一列に要素を配置して、等間隔で配置している。
これは、ナビゲーションメニューやカードの配置等で使用される。

 .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

CSS Grid

CSS Gridは、2次元のレイアウトを実現できる。
これは、複雑なページ構造を作成する場合に便利である。

以下の例では、3列のグリッドレイアウトを作成して、各列が均等な幅を持つ。

 .grid-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
 }

実務では、CSS FlexboxおよびCSS Gridを組み合わせて使用することが多い。

 /* CSS FlexboxおよびCSS Gridの組み合わせ */
 
 /* メインレイアウト */
 .page {
   display: grid;
   grid-template-areas: 
     "header header"
     "sidebar main"
     "footer footer";
 }
 
 /* ヘッダ内の要素配置 */
 .header {
   display: flex;
   justify-content: space-between;
 }

float

floatは要素を左右に配置するためのCSSプロパティである。
基本的には、float: leftやfloat: rightを使用して、要素を左右に寄せて配置する。
特に、2カラムや3カラムのレイアウトを作成する場合によく使用される。

 .left-content {
    float: left;
    width: 50%;
 }
 
 .right-content {
    float: right;
    width: 50%;
 }

ただし、floatを使用する場合には注意点がある。
floatを適用した要素は通常のドキュメントフローから外れるため、親要素が高さを認識できない。
これを解決するために、clearfixと呼ばれる手法を使用する。

 .clearfix::after {
    content: "";
    display: block;
    clear: both;
 }

レスポンシブデザインに対応する場合、
メディアクエリを使用してスマートフォン等の画面幅が狭いデバイスでは、float設定を解除し、縦並びに変更するのが一般的である。

 @media screen and (max-width: 768px) {
    .left-content,
    .right-content {
       float: none;
       width: 100%;
    }
 }

floatは、特定のケース (画像の周りにテキストを回り込ませる等) で現在でも使用されるが、
最近のWeb開発では、FlexboxやGrid Layout等のより柔軟なレイアウト手法が主流となっている。

しかし、floatレイアウトは、シンプルな実装と高いブラウザ互換性という利点があり、特定の状況では今でも有効である。

例えば、レガシーブラウザのサポートが必要な場合や画像とテキストを組み合わせたシンプルなレイアウトを作成する場合等に使用される。

他の使用例としては、ナビゲーションメニューの横並び表示やブログ記事内での画像配置等がある。
ただし、複雑なレイアウトを実現する場合は、より現代的なレイアウト手法の使用を検討することを推奨する。

レスポンシブデザイン

レスポンシブデザインを考慮する場合、メディアクエリと組み合わせることにより、柔軟な対応が可能である。

 @media (max-width: 768px) {
   .grid-container {
     grid-template-columns: 1fr;  /* スマートフォン向けに1列に */
   }
 }