CONTENTS
  1. HOME
  2. CSS
  3. CSS基礎
  4. ここからのレイアウトのために：displayプロパティを理解しよう

ここからのレイアウトのために：displayプロパティを理解しよう

CSSで本格的なレイアウト（横並びや複数列）を組む前に、まずは基本となる display プロパティの動きを理解しておきましょう。ここでは、以下のようなdisplayの違いを実際に比較して学びます。

  • display: block
  • display: inline
  • display: inline-block
  • display: none
  • display: flex
  • display: grid

displayプロパティとは？

CSSの display プロパティは、要素の表示形式（ブロックか、横並びか、非表示かなど）を決める設定です。
主な種類と特徴は以下のとおりです。

display値特徴よく使う要素ポイント
block幅いっぱい・改行されるdiv, p, h1幅・高さが指定できる
inline横に並ぶ・改行されないa, span幅・高さが効かない
inline-block横並び＋サイズ指定可ボタンやナビの並びレイアウト調整に便利
none非表示になるメニュー切替、JS操作要素自体が消える
flex横並び・整列可能レイアウト全般柔軟な配置が可能
grid行と列で配置カード一覧や表複雑な配置が得意

作成ファイル・保存場所

  • css-basic フォルダの中に以下の2つのファイルを用意してください
    • HTMLファイル：display.htmlHTMLファイルはコピーして使用可
    • CSSファイル：display.css（今回新たに作成）
htmlは下記からコピー
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="display.css">

<body>
    <h1>displayプロパティを検証してみよう</h1>
    <h2>display:block</h2>
    <div class="block">block1</div>
    <div class="block">block2</div>

    <h2>display:inline</h2>
    <span class="inline">inline1</span>
    <span class="inline">inline2</span>

    <h2>display:inline-block</h2>
    <div class="inline-block">A</div>
    <div class="inline-block">B</div>

    <h2>display:none</h2>
    <div class="none">これは見えません</div>

    <h2>display:flex</h2>
    <div class="flex-container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>

    <h2>display:grid</h2>
    <div class="grid-container">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
        <div class="item">D</div>
    </div>
</body>
</html>

スタイルの指定内容

.block に指定するスタイル

  • 表示形式：display: block（幅いっぱいに表示され、改行される）
  • 背景色：#cce5ff
  • 下余白：margin-bottom: 5px

.inline に指定するスタイル

  • 表示形式：display: inline（横に並ぶ）
  • 背景色：#d4edda
  • 内側余白：padding: 3px
  • 右余白：margin-right: 5px

.inline-block に指定するスタイル

  • 表示形式：display: inline-block（横並び＋サイズ指定可能）
  • 幅：100px
  • 高さ：50px
  • 背景色：#fff3cd
  • 文字中央揃え：text-align: center
  • 縦位置中央揃え：line-height: 50px
  • 右余白：margin-right: 10px

.none に指定するスタイル

  • 表示形式：display: none（要素自体が非表示になり、スペースも消える）

.item に指定するスタイル

（.flex-container, .grid-container の中の要素）

  • 背景色：#dee2e6
  • 上下余白：padding: 20px 0
  • 文字中央揃え：text-align: center
  • 幅：100px
  • ボックスサイズ制御：box-sizing: border-box

.flex-container に指定するスタイル

  • 表示形式：display: flex（子要素を横に並べる）
  • 要素間の間隔：gap: 10px
  • 上余白：margin-top: 10px

.grid-container に指定するスタイル

  • 表示形式：display: grid（子要素をグリッド状に並べる）
  • 列数：grid-template-columns: repeat(2, 100px)（2列 × 100px）
  • 要素間の間隔：gap: 10px
  • 上余白：margin-top: 10px

表示例（画面イメージ）

解答例（CSS）

displayプロパティの確認
.block {
    display: block;
    background: #cce5ff;
    margin-bottom: 5px;
}

.inline {
    display: inline;
    background: #d4edda;
    padding: 3px;
    margin-right: 5px;
}

.inline-block {
    display: inline-block;
    width: 100px;
    height: 50px;
    background: #fff3cd;
    text-align: center;
    line-height: 50px;
    margin-right: 10px;
}

.none {
    display: none;
}

.item {
    background: #dee2e6;
    padding: 20px 0;
    text-align: center;
    width: 100px;
    box-sizing: border-box;
}

.flex-container {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 100px);
    gap: 10px;
    margin-top: 10px;
}

display:flexと同時によく使うプロパティ一覧

Flexboxは単に display: flex; を指定するだけではなく、配置方向や折り返し、整列方法などを細かく設定するプロパティとセットで使います。ここでは代表的なプロパティを紹介します。

flex-direction（並ぶ向き）

flex-direction: row; /* 横方向（初期値） */
flex-direction: column; /* 縦方向 */
  • row：左から右に並びます。
  • column：上から下に並びます。

【補足】縦に並べたいときは column を指定しましょう。

flex-wrap(折り返しの有無)

flex-wrap: nowrap; /* 折り返さない（初期値） */
flex-wrap: wrap;   /* 折り返す */

要素数が多くて横に収まりきらない場合に「折り返すかどうか」を決めます。

gap（要素のすき間）

gap: 10px;
column-gap:10px;
row-gap:10px;

FlexboxやGridで要素間のスペースを簡単に空けられます。

justify-content(水平方向位置揃え)

justify-content: flex-start; /* 左寄せ（初期値） */
justify-content: center;     /* 中央揃え */
justify-content: space-between; /* 均等配置 */

要素を横方向にどう並べるかを決定します。

align-items（垂直方向の揃え方）

align-items: stretch;     /* 要素の高さを揃える（初期値） */
align-items: center;      /* 中央に揃える */
align-items: flex-end;    /* 下に揃える */

単一行の時に使います。

align-content（複数行の揃え方）

align-content: flex-start;
align-content: center;
align-content: space-between;

折り返して複数行になった場合の上下の揃え方を決めます。

align-self（個別の揃え方）

align-self: flex-end;

特定のアイテムだけ揃え方を変えたいときに使用します。

align-items align-content align-selfの違い

下記のファイルをコピーして検証してみましょう。

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>align-content練習</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .flex-container_1 {
            display: flex;
            flex-wrap: wrap;
            width: 700px;
            height: 300px;
            border: 2px solid #333;
            /* 単一行タイプ */
            align-items: center;
            /* align-items: flex-end; */
        }

        .flex-container_2 {
            display: flex;
            flex-wrap: wrap;
            width: 340px;
            height: 300px;
            border: 2px solid #333;
            /* 複数行タイプ */
            align-content: flex-start;
            /* align-content: space-between; */
            /* align-content: center; */

        }

        .item {
            width: 100px;
            background: #ddd;
            text-align: center;
            padding: 20px 0;
            margin: 5px;
        }

        .flex-container_3 {
            display: flex;
            flex-wrap: wrap;
            height: 300px;
            border: 2px solid #333;
            align-items: stretch;
            /* デフォルト */
        }

        .align-self-end {
            align-self: flex-end;
            background: #bdf;
        }
    </style>
</head>

<body>
    <h1>alignシリーズ</h1>
    <h2>align-items の動き</h2>
    <div class="flex-container_1">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>

    <h2>align-content の動き</h2>
    <div class="flex-container_2">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>

    <h2>align-self の動き</h2>

    <div class="flex-container_3">
        <div class="item">1</div>
        <div class="item align-self-end">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>

</html>

display: flex の子要素によく使うプロパティ一覧

Flexboxでは、親に display: flex; を指定すると、子要素に対しても個別に挙動を調整できるプロパティが使えます。以下に、代表的なプロパティとその使い方を紹介します。

プロパティ名説明よく使う値の例
flex-grow余白がある場合に、子要素がどれくらい広がるかを指定します。0（デフォルト）、1、2など
flex-shrink親が小さくなったときに、子要素がどれくらい縮むかを指定します。1（デフォルト）、0
flex-basis子要素の初期サイズ（幅や高さ）を指定します。auto（デフォルト）、100px、30%など
flexflex-grow、flex-shrink、flex-basis をまとめて指定できるショートハンドです。1、0 1 auto など
align-self特定の子要素だけ、親の align-items とは別の位置揃えにできます。auto、flex-start、center、flex-endなど
order要素の表示順序を変更します。HTML上の順番とは別に表示順を制御できます。0（デフォルト）、1、-1 など

よくある使い方の例

.item {
  flex: 1;
  align-self: center;
}

このように、flex を使って均等に広げつつ、align-self で中央に揃えるなど、子要素側でも細かく調整できるのがFlexboxの強みです。

補足：「flex: 1」って何？

flex: 1;・・・・これは

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

と同じ意味になります。要素を均等に伸ばすのによく使われます。