CSS/レイアウト

基本

CSS
レイアウト

応用

静的レイアウト

静的レイアウトは、HTMLの構造に従って要素を配置する最も基本的なレイアウト方法です。HTMLの要素には、ブロックレベル要素とインラインレベル要素の2種類があります。

ブロックレベル要素

ブロックレベル要素は、他の要素の上に新しい行を作って配置される要素です。div, h1, p, ul, li などの要素がブロックレベル要素に分類されます。

ブロックレベル要素は、以下の特徴を持ちます。

他の要素の上に新しい行を作って配置される
要素の幅と高さを持ち、上下に余白を持つ
隣接するブロックレベル要素は、上下に並べて配置される

インラインレベル要素

インラインレベル要素は、他の要素の上に新しい行を作らず、既存の行の中に配置される要素です。span, em, strong, <a> などの要素がインラインレベル要素に分類されます。

インラインレベル要素は、以下の特徴を持ちます。

他の要素の上に新しい行を作らず、既存の行の中に配置される
要素の幅と高さを持ち、上下左右に余白を持つ
隣接するインラインレベル要素は、左右に並べて配置される

フロート

フロートは、ブロックレベル要素をインラインレベル要素のように扱うことができるレイアウトテクニックです。以下の例のように記述します。

CSS

 img {
   float: left;
   margin: 0 10px;
 }

この例では、<img>要素を左にフロートさせ、左右に10ピクセルの余白を設定しています。

フロートを使用すると、以下のことができます。

文章の中に画像を挿入する
サイドバーを作成する
複数の要素を並べて配置する

ただし、フロートを使用すると、要素の折り返しが発生する可能性があることに注意する必要があります。

配置プロパティ

配置プロパティは、要素の位置やサイズを制御するために使用します。主な配置プロパティは以下の通りです。

display

displayプロパティは、要素の表示形式を指定するために使用します。以下の値を指定することができます。

block: 要素をブロックレベル要素として表示します。これがデフォルトの値です。
inline: 要素をインラインレベル要素として表示します。
none: 要素を非表示にします。
flex: 要素をフレックスコンテナとして表示します。(Flexboxレイアウトで使用します)
grid: 要素をグリッドコンテナとして表示します。(グリッドレイアウトで使用します)

position

positionプロパティは、要素の相対的な位置を指定するために使用します。以下の値を指定することができます。

static: 要素は通常の位置に配置されます。これがデフォルトの値です。
relative: 要素は通常の位置に配置されますが、top, left, bottom, right プロパティを使用して相対的に移動することができます。
absolute: 要素はドキュメントフローから取り除かれ、コンテナの境界ボックス内でのみ配置されます。
fixed: 要素はブラウザウィンドウに固定され、スクロールしても画面内に表示されます。

top, left, bottom, right

top, left, bottom, right プロパティは、position プロパティが relative または absolute に設定されている場合に、要素の位置をオフセットするために使用します。

z-index

z-index プロパティは、複数の要素が重なった場合に、どの要素が表示されるかを決定するために使用します。値が大きい要素ほど、前面に表示されます。

Flexboxレイアウト

Flexboxレイアウトは、CSS3で導入されたレイアウトモジュールであり、従来のブロックレベル要素やインラインレベル要素とは異なり、より柔軟で直感的なレイアウトを構築することができます。Webデザインにおいてますます重要になってきているFlexboxについて、詳細に解説します。

Flexboxの基本

Flexboxレイアウトを使用するには、まず要素をフレックスコンテナとフレックスアイテムに分類する必要があります。

フレックスコンテナ

Flexboxレイアウトを適用する要素です。以下のいずれかのプロパティを設定して、フレックスコンテナであることを指定します。

display: flex;：ブロック要素として並べる場合
display: inline-flex;：インライン要素として並べる場合

フレックスアイテム

フレックスコンテナ内に含まれる要素です。これらの要素に対して、様々なプロパティを使用してレイアウトを調整することができます。

Flexboxコンテナのプロパティ

Flexboxコンテナには、以下のプロパティを使用してレイアウトを調整することができます。

flex-direction: アイテムをどのように配置するかを指定します。
- row：横方向に並べる（デフォルト）
- column：縦方向に並べる
flex-wrap: アイテムが複数行に折り返されるかどうかを指定します。
- nowrap：1行に収める（デフォルト）
- wrap：複数行に折り返す
justify-content: アイテムを水平方向にどのように配置するかを指定します。
- flex-start：左揃え（デフォルト）
- center：中央揃え
- flex-end：右揃え
- space-between：アイテム間を均等に配置
- space-around：アイテム間と両端に余白を設ける
align-items: アイテムを垂直方向にどのように配置するかを指定します。
- flex-start：上揃え（デフォルト）
- center：中央揃え
- flex-end：下揃え
- stretch：コンテナの高さをいっぱいに使う

これらのプロパティを組み合わせることで、様々なレイアウトを構築することができます。

Flexboxアイテムのプロパティ

フレックスアイテムには、以下のプロパティを使用してレイアウトを調整することができます。

flex-grow: アイテムが余白をどれだけ占有するかを指定します。デフォルトは 0 です。
flex-shrink: アイテムが余白をどれだけ圧縮するかを指定します。デフォルトは 1 です。
flex-basis: アイテムの初期サイズを指定します。デフォルトは auto です。
flex-order: アイテムの表示順序を指定します。デフォルトは 0 です。
align-self: アイテムを垂直方向にどのように配置するかを指定します。デフォルトは auto です。
justify-self: アイテムを水平方向にどのように配置するかを指定します。デフォルトは auto です。

これらのプロパティを組み合わせることで、様々なレイアウトを構築することができます。

Flexboxのレイアウトプロパティ

Flexboxレイアウトには、以下のレイアウトプロパティも用意されています。

gap: アイテム間の隙間を指定します。
order: アイテムの表示順序を指定します。
align-content: アイテムを垂直方向にどのように配置するかを指定します。

これらのプロパティを使用して、より詳細なレイアウト調整を行うことができます。

Flexboxの利点

Flexboxレイアウトには、以下のような利点があります。

柔軟性: 従来のレイアウト方法よりも柔軟にレイアウトを構築することができます。
直感性: コードが直感的に理解しやすいため、メンテナンスが容易です。
レスポンシブ性: 画面サイズに合わせてレイアウトを自動的に調整することができます。
コード量削減: 従来のレイアウト方法よりもコード量を削減することができます。

Flexboxの注意点

Flexboxレイアウトを使用する際には、以下の点に注意する必要があります。

ブラウザサポート: 古いブラウザではFlexboxレイアウトがサポートされていない場合があります。必要に応じて、ベンダープレフィックスを使用する必要があります。
複雑性: 複雑なレイアウトを構築する場合は、コードが複雑になる可能性があります。
パフォーマンス: 複雑なFlexboxレイアウトは、パフォーマンスに影響を与える可能性があります。

Flexboxの例

Flexboxレイアウトは、様々なレイアウトを構築することができます。以下に、いくつかの例を紹介します。

横並びレイアウト

 .container {
   display: flex;
   flex-direction: row;
 }
 
 .item {
   flex: 1; /* アイテムが余白を均等に占有する */
   padding: 10px;
   border: 1px solid #ccc;
 }

この例では、 .container 要素をフレックスコンテナとし、 .item 要素をフレックスアイテムとしています。 flex: 1 を設定することで、 .item 要素が余白を均等に占有するようにしています。

縦並びレイアウト

 .container {
   display: flex;
   flex-direction: column;
 }
 
 .item {
   flex: 1; /* アイテムが余白を均等に占有する */
   padding: 10px;
   border: 1px solid #ccc;
 }

この例では、 .container 要素をフレックスコンテナとし、 .item 要素をフレックスアイテムとしています。 flex-direction: column を設定することで、 .item 要素を縦方向に並べています。

折り返しレイアウト

 .container {
   display: flex;
   flex-wrap: wrap;
 }
 
 .item {
   flex: 1; /* アイテムが余白を均等に占有する */
   padding: 10px;
   border: 1px solid #ccc;
   width: 200px; /* アイテムの幅 */
 }

この例では、 .container 要素をフレックスコンテナとし、 .item 要素をフレックスアイテムとしています。 flex-wrap: wrap を設定することで、 .item 要素が横幅いっぱいになったら次の行に折り返されるようにしています。

中央揃えレイアウト

 .container {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .item {
   padding: 10px;
   border: 1px solid #ccc;
 }

この例では、 .container 要素をフレックスコンテナとし、 .item 要素をフレックスアイテムとしています。 justify-content: center を設定することで、 .item 要素を水平方向に中央揃えにしています。 align-items: center を設定することで、 .item 要素を垂直方向に中央揃えにしています。

まとめ

Flexboxレイアウトは、CSS3で導入されたレイアウトモジュールであり、従来のレイアウト方法よりも柔軟で直感的なレイアウトを構築することができます。Webデザインにおいてますます重要になってきているFlexboxをマスターすることで、より魅力的で使いやすいWebサイトを作成することができます。

グリッドレイアウト

グリッドレイアウトは、CSS3で導入されたもう一つのレイアウトモジュールです。行と列からなるグリッドを作成し、要素をそのグリッド内に配置することができます。

グリッドレイアウトの基本

グリッドレイアウトを使用するには、まず要素をグリッドコンテナとグリッドアイテムに分類する必要があります。

グリッドコンテナ: グリッドレイアウトを適用する要素です。display: grid; を設定して、グリッドコンテナであることを指定します。
グリッドアイテム: グリッドコンテナ内に含まれる要素です。

グリッドトラック

グリッドトラックは、グリッドの行と列を定義します。以下の方法で定義することができます。

fr単位: 使用可能なスペースを等分に分割します。
px単位: 固定サイズのトラックを作成します。
%単位: 親要素のサイズの割合でトラックを作成します。

グリッドアイテム

グリッドアイテムは、以下のプロパティを使用してグリッド内に配置することができます。

grid-row: アイテムが行に配置される位置を指定します。
grid-column: アイテムが列に配置される位置を指定します。
grid-area: アイテムが行と列にまたがって配置される範囲を指定します。
justify-self: アイテムを水平方向にどのように配置するかを指定します。
align-self: アイテムを垂直方向にどのように配置するかを指定します。

グリッドレイアウトのレイアウトプロパティ

グリッドレイアウトには、以下のレイアウトプロパティも用意されています。

gap: アイテム間の隙間を指定します。
column-gap: 列間の隙間を指定します。
row-gap: 行間の隙間を指定します。
grid-template-areas: 行と列の名前を定義し、アイテムを配置する領域を指定します。

グリッドレイアウトの応用と実例

グリッドレイアウトは、さまざまな応用方法と実例があります。以下では、より具体的な使用例とともに、さらに詳細なプロパティについて説明します。

グリッドレイアウトの応用例

複数列のレイアウト

複数のコンテンツブロックをグリッドの列に配置することで、整然とした多列レイアウトを作成することができます。

   .grid-container {
     display: grid;
     grid-template-columns: 1fr 2fr 1fr; /* 3つの列を定義 */
     gap: 20px; /* アイテム間の隙間 */
   }

レスポンシブデザインの実装

media queries を使用して、画面サイズに応じてグリッドの配置やサイズを調整することができます。

   .grid-container {
     display: grid;
     grid-template-columns: 1fr;
   }

   @media (min-width: 768px) {
     .grid-container {
       grid-template-columns: 1fr 1fr;
     }
   }

グリッドレイアウトの詳細プロパティ

column-gap および row-gap

gap プロパティのショートハンドで、列間と行間の隙間をそれぞれ指定します。

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px; /* 列間の隙間 */
    row-gap: 10px; /* 行間の隙間 */
  }

grid-template-areas

グリッドアイテムを特定のエリアに配置するために、名前を使ってエリアを定義します。

  .grid-container {
    display: grid;
    grid-template-areas:
      "header header"
      "sidebar content"
      "footer footer";
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr 2fr;
  }

  .header {
    grid-area: header;
  }

  .sidebar {
    grid-area: sidebar;
  }

  .content {
    grid-area: content;
  }

  .footer {
    grid-area: footer;
  }

これらのプロパティを使用して、さまざまなデザインパターンを実現することができます。グリッドレイアウトは、その柔軟性と効率性から、現代のウェブデザインにおいて広く利用されています。

まとめ

CSSレイアウトには、静的レイアウト、配置プロパティ、Flexboxレイアウト、グリッドレイアウトなど、様々な方法があります。それぞれの方法の特徴を理解し、状況に応じて適切な方法を選択することが重要です。

この教科書では、CSSレイアウトの基本から応用までを体系的に解説していきます。実践的な例や豊富な図解を用いることで、わかりやすく解説していきますので、ぜひ最後まで読んでみてください。

基本

CSS
レイアウト

応用