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は、特定のケース (画像の周りにテキストを回り込ませる等) で現在でも使用されるが、一般的なレイアウトには前述の手法が推奨される。

レスポンシブデザイン

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

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