CSS - レイアウト

提供: MochiuWiki : SUSE, EC, PCB

概要

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

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

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

  • displayプロパティ
    displayプロパティは、要素の表示方法を決定する重要な要素である。
    代表的な値として、以下に示すものが存在する。
    • block
      縦に積み重なって表示される。
      要素の幅が親要素いっぱいに広がり、それぞれの要素が新しい行から始まる。(前後に改行が入る)
    • inline
      横に並んで表示される。
      コンテンツの幅のみ占める。
      行の途中から始めることができる。
    • inline-block
      blockとinlineの特徴を併せ持つ。
      要素が横並びで配置される。(inlineの特徴)
      幅と高さを指定できる。(blockの特徴)
      各要素間にスペースを設定できる。
      テキストの基準線に合わせて配置される。

      下図では、青い四角形は各inline-block要素を表しており、それぞれが独立したボックスとして振る舞いながら、横並びで配置されている様子を示している。
    • flex
      フレックスボックスレイアウトを使用できる。
    • grid
      グリッドレイアウトを使用できる。


  • フレックスボックス
    モダンなレイアウトの主力として使用される。
    親要素にdisplay: flexを指定することにより、子要素を柔軟に配置できる。
    <syntaxhighlight lang="css">

.container { 

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

} </syntaxhighlight>


  • グリッドレイアウト
    2次元のグリッドベースのレイアウトを実現できる。
    <syntaxhighlight lang="css">

.grid-container { 

  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;

} </syntaxhighlight>


  • ポジショニング
    positionプロパティを使用することにより、詳細な配置制御が可能となる。
    <syntaxhighlight lang="css">

.element { 

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

} </syntaxhighlight>


  • レスポンシブデザイン
    様々な画面サイズに対応するため、メディアクエリを使用する。
    <syntaxhighlight lang="css">

@media (max-width: 768px) { 

  .container {
     flex-direction: column;
  }

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

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

<syntaxhighlight lang="css">
:root {
   --main-width: 80%;
}

.container {
   width: calc(var(--main-width) - 20px);
}
</syntaxhighlight>



分割レイアウト

CSS Flexbox

CSS Flexboxは、1次元のレイアウトに特に強みがある。
また、動的なコンテンツに柔軟に対応している。

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

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

<syntaxhighlight lang="html">
上部コンテンツ
中部左
中部右
下部コンテンツ
</syntaxhighlight>



<syntaxhighlight lang="css">
.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;
  }
}
</syntaxhighlight>


CSS Grid

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

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

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

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

<syntaxhighlight lang="html">
上部コンテンツ
中部左
中部右
下部コンテンツ
</syntaxhighlight>



<syntaxhighlight lang="css">
.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";
  }
}
</syntaxhighlight>


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

  • justify-content
    space-between; /* グリッド全体を配置 */
  • align-items
    center; /* 各セル内のアイテムを中央配置 */

  • justify-items
    グリッドセル内での水平方向の配置
  • align-content
    グリッド全体の垂直方向の配置


float

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

<syntaxhighlight lang="css">
/* リセットとベーススタイル */
* {
   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;
}
</syntaxhighlight>



<syntaxhighlight lang="html">
<!DOCTYPE html>

左カラム

左側のコンテンツがここに入る

右カラム

右側のコンテンツがここに入る

</syntaxhighlight>


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

<syntaxhighlight lang="css">
/* floatのクリア */
.clearfix::after {
   content: "";
   display: block;
   clear: both;
}
</syntaxhighlight>


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

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


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

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

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

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

レスポンシブデザイン

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

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



「https://mochiu.net/index.php?title=CSS_-_レイアウト&oldid=12464」から取得