CSS - レイアウト

概要

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

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

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

• displayプロパティ

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

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

  • block

    縦に積み重なって表示される。

    要素の幅が親要素いっぱいに広がり、それぞれの要素が新しい行から始まる。(前後に改行が入る)

    

  • inline

    横に並んで表示される。

    コンテンツの幅のみ占める。

    行の途中から始めることができる。

    

  • inline-block

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

    要素が横並びで配置される。(inlineの特徴)

    幅と高さを指定できる。(blockの特徴)

    各要素間にスペースを設定できる。

    テキストの基準線に合わせて配置される。

    
    

    下図では、青い四角形は各inline-block要素を表しており、それぞれが独立したボックスとして振る舞いながら、横並びで配置されている様子を示している。

    

  • 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次元のレイアウトに特に強みがある。
また、動的なコンテンツに柔軟に対応している。

これは、ナビゲーションメニューやカードの配置等で使用される。

以下の例では、上に1つ、中央に2つ、下に1つレイアウトを配置している。

 <div class="container">
   <div class="top">上部コンテンツ</div>
   <div class="middle">
     <div class="middle-item">中部左</div>
     <div class="middle-item">中部右</div>
   </div>
   <div class="bottom">下部コンテンツ</div>
 </div>

 .container {
   display: flex;
   flex-direction: column;
   justify-content: space-between;  /* 左右の要素を両端に配置 */
   align-items: center;             /* 縦方向を中央揃え */
   gap: 20px;
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;
 }
 
 .top, .bottom {
   background: #e0e0e0;
   padding: 20px;
   min-height: 100px;
 }
 
 .middle {
   display: flex;
   gap: 20px;
 }
 
 .middle-item {
   flex: 1;
   background: #e0e0e0;
   padding: 20px;
   min-height: 100px;
 }
 
 /* レスポンシブ対応 */
 @media (max-width: 768px) {
   .middle {
     flex-direction: column;
   }
 }

CSS Grid

CSS Gridは、2次元のレイアウトを実現できる。
grid-areaを使用して直感的な配置が可能である。

複雑なレイアウトを作成する可能性がある場合は、CSS Gridの方が拡張性が高い。

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

以下の例では、上に1つ、中央に2つ、下に1つレイアウトを配置している。

 <div class="grid-container">
   <div class="top">上部コンテンツ</div>
   <div class="middle-left">中部左</div>
   <div class="middle-right">中部右</div>
   <div class="bottom">下部コンテンツ</div>
 </div>

 .grid-container {
   display: grid;
   gap: 20px;
   grid-template-areas: 
     "top"
     "middle-left middle-right"
     "bottom";
   grid-template-columns: 1fr 1fr;
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;
 }
 
 .top {
   grid-area: top;
   grid-column: 1 / -1;  /* 全幅を使用 */
   background: #e0e0e0;
   padding: 20px;
   min-height: 100px;
 }
 
 .middle-left {
   grid-area: middle-left;
   background: #e0e0e0;
   padding: 20px;
   min-height: 100px;
 }
 
 .middle-right {
   grid-area: middle-right;
   background: #e0e0e0;
   padding: 20px;
   min-height: 100px;
 }
 
 .bottom {
   grid-area: bottom;
   grid-column: 1 / -1;  /* 全幅を使用 */
   background: #e0e0e0;
   padding: 20px;
   min-height: 100px;
 }
 
 /* レスポンシブ対応 */
 @media (max-width: 768px) {
   .grid-container {
     grid-template-columns: 1fr;
     grid-template-areas: 
       "top"
       "middle-left"
       "middle-right"
       "bottom";
   }
 }

CSS Gridには、以下に示すような代表的なプロパティが存在する。

• justify-content

  space-between; /* グリッド全体を配置 */

• align-items

  center; /* 各セル内のアイテムを中央配置 */

  
  

• justify-items

  グリッドセル内での水平方向の配置

• align-content

  グリッド全体の垂直方向の配置

float

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

 /* リセットとベーススタイル */
 * {
    margin:     0;
    padding:    0;
    box-sizing: border-box;
 }
 
 body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
 }
 
 .container {
    width:     90%;
    max-width: 1200px;
    margin:    0 auto;
    padding:   20px;
 }
 
 /* 左カラム */
 .left-content {
    float:      left;
    width:      50%;
    min-height: 400px;
    padding:    20px;
    background-color: #f0f0f0;
 }
 
 /* 右カラム */
 .right-content {
    float:      right;
    width:      50%;
    min-height: 400px;
    padding:    20px;
    background-color: #e0e0e0;
 }

 <!DOCTYPE html>
 <html lang="ja">
 <head>
    <meta charset="UTF-8">
    <!-- モバイルデバイスでのWebサイトの表示方法を制御する設定
       width=device-widthは、ページの幅をデバイスの画面幅に合わせることを指示する。
       これにより、スマートフォンやタブレットでWebサイトを閲覧する場合に、デバイスの実際の画面幅に応じて適切にコンテンツが表示される。
 
        initial-scale=1.0は、ページが最初に読み込まれた場合の拡大率を設定する。
        1.0は等倍表示を意味する。
        これにより、ユーザが最初にページを開いた時に、適切なサイズで表示される。
 
        このメタタグが無い場合、モバイルデバイスではデスクトップ用のレイアウトが縮小表示されて、テキストが非常に小さくなったり、ユーザが手動で拡大する必要が生じたりする可能性がある。
 
        特にレスポンシブデザインのWebサイトを作成する場合、このviewportの設定は必須といえる。
        モバイルフレンドリーなWebサイトを実現するための基本的な設定として広く使用される。
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Float Layout</title>
    <link rel="stylesheet" href="styles.css">
 </head>
 <body>
    <div class="container">
       <div class="left-content">
          <h2>左カラム</h2>
          <p>左側のコンテンツがここに入る</p>
       </div>
       <div class="right-content">
          <h2>右カラム</h2>
          <p>右側のコンテンツがここに入る</p>
       </div>
       <div class="clearfix"></div>
    </div>
 </body>
 </html>

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

 /* floatのクリア */
 .clearfix::after {
    content: "";
    display: block;
    clear: both;
 }

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

 /* レスポンシブデザイン */
 @media screen and (max-width: 768px) {
    .left-content,
    .right-content {
       float: none;
       width: 100%;
       margin-bottom: 20px;
    }
 }

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

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

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

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

レスポンシブデザイン

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

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