MENU
  1. ホーム
  2. HTML&CSS
  3. 【html&css】displayの種類は？flexやinline-blockの違い

【html&css】displayの種類は？flexやinline-blockの違い

HTML&CSS
html-and-css-display

Webページ上の要素（テキスト、画像、ボタンなど）は、デフォルトで「横いっぱいに広がる性質」や「文字と同じように横に並ぶ性質」を持っています。

本記事では、displayプロパティで利用する値の種類やそれぞれの性質を解説します。

また、HTML&CSSに関するカテゴリーページから学びたい内容を決めたい人は、以下のHTML&CSSページをご確認ください。

HTML&CSS | Code Stock
目次

displayとは

CSSのdisplay（ディスプレイ）プロパティは、「要素の表示形式（ボックスの振る舞い）」を決める基本的なルールです。

displayについて
  • displayの書き方
  • displayで代表的な値の種類
  • 代表的な値の一覧表

displayの書き方

セレクタ { display: 値; /* block, flex, gridなどを指定 */ }

書き方はシンプルで、適用したい要素に対してdisplay: 値;を指定するだけです。

displayで代表的な値の種類

displayに値の種類がありますが、代表的な6つの値を「要素自身の振る舞いを変えるもの」と「子要素のレイアウトを変えるもの」に分けて解説します。

displayにおける値の種類
  • 要素自身の振る舞いを変える値
  • 子要素のレイアウトを変える値

要素自身の振る舞いを変える値

  • block（ブロック）
    要素が「ブロック（塊）」として扱われます。
    前後に改行が入り、基本的に縦に積まれていきます。
    見出し（<h1>）や段落（<p>）、<div>などがこの性質を持っています。
    幅（width）や高さ（height）、余白（margin/padding）を自由に指定できます。
  • inline（インライン）
    要素が「文章の一部」のように扱われ、文字と同じように横に並びます。
    リンク（<a>）や（<span>）がこの性質です。
    注意点は、幅や高さ、上下の余白（margin）を指定しても無視されるという点です。
  • inline-block（インライン・ブロック）
    blockとinlineの「いいとこ取り」です。
    文章のように横に並びながらも、幅や高さ、上下の余白を指定できます。
    ボタンなどを作る際に使われます。
  • none（非表示）
    要素を画面から消します。
    存在がなかったことになるため、要素が占めるスペースも詰めて表示されます。
    （スマホのみメニューを隠すといったレスポンシブ対応で活用されます。）

子要素のレイアウトを変える値

  • flex（フレックスボックス）
    親要素（外側の箱）にdisplay: flex;を指定すると、中にある子要素が横並び（または縦並び）になり、要素間の余白や中央揃えも調整できます。
    ヘッダーのナビゲーションメニューやカード型の記事一覧などで使用されます。
  • grid（グリッド）
    flexが「1次元（横一列、または縦一列）」のレイアウトを得意とするのに対し、gridは「2次元（行と列のマス目）」のレイアウトを作る機能です。
    親要素にdisplay: grid;を指定し、列の数や幅を決めることでエクセル表やタイルといった複雑なレイアウトを組めます。

代表的な値の一覧表

代表的な値の特徴を一覧表にまとめています。

displayの値主な役割・特徴幅・高さの指定よく使う場面
block基本的な箱（縦に積まれる）指定できる全体の大枠、見出し、段落
inline文章の一部（横に並ぶ）指定できないテキストの一部装飾、リンク
inline-block横並びの箱指定できるボタン、アイコンと文字の並び
none画面から完全に消す–スマホ・PCでの表示切り替え
flex柔軟な1次元レイアウト指定できるメニューの横並び、中央揃え
grid複雑な2次元レイアウト指定できるタイル状のカード一覧、表組み

display: block;とは

display: block（ブロック）は、要素を「ひとつのブロック」として扱うための指定です。

見出しタグ（<h1>〜<h6>）や段落タグ（<p>）、まとまりを作るタグ（<div>）など、Webページを構成するタグの多くは、display: blockの性質を持っています。

display: block;について
  • 要素は縦に並ぶ
  • 横幅と高さを指定できる
  • 余白も上下左右に指定できる
  • text-alignやvertical-align指定はできない

要素は縦に並ぶ

display: blockが指定された要素は、幅を指定しない限り「親要素の横幅いっぱい（100%）に広がる」といった性質を持ちます。

横幅を埋めるため、隣に他要素が並ぶ隙間がなくなり、結果として前後に改行が入り自動的に縦に積み重なることになります。

▼ 横幅いっぱいに広がり、改行されて縦に積まれます

ブロック要素 1
ブロック要素 2
ブロック要素 3
HTMLコード表示
<div class="block-demo-vertical">
  <p style="font-size:14px; margin-bottom:10px;">▼ 横幅いっぱいに広がり、改行されて縦に積まれます</p>
  <div class="demo-box-block">ブロック要素 1</div>
  <div class="demo-box-block">ブロック要素 2</div>
  <div class="demo-box-block" style="margin-bottom:0;">ブロック要素 3</div>
</div>
CSSコード表示
.block-demo-vertical {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
}
.demo-box-block {
  background-color: #bbdefb;
  border: 2px solid #1976d2;
  padding: 15px;
  font-weight: bold;
  color: #0d47a1;
  /* 縦に並ぶことを分かりやすくする余白 */
  margin-bottom: 10px; 
}

<p>, <div>タグは元々の性質上、display: block;を持つため明示的に記載していません。

横幅と高さを指定できる

ブロック要素は、「width（横幅）」と「height（高さ）」を指定できます。

後述するinline（インライン）要素は指定が無視されますが、blockは柔軟なサイズの箱を作れます。

指定なし（横幅100%、高さは中身に合わせる）
width: 200px;
height: 80px;
HTMLコード表示
<div class="block-demo-size">
  <div class="box-auto">指定なし（横幅100%、高さは中身に合わせる）</div>
  <div class="box-custom">width: 200px;<br>height: 80px;</div>
</div>
CSSコード表示
.block-demo-size {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
}
.box-auto {
  background-color: #c8e6c9;
  border: 2px solid #388e3c;
  padding: 10px;
  margin-bottom: 15px;
}
.box-custom {
  background-color: #ffc107;
  border: 2px solid #ff8f00;
  padding: 10px;
  width: 200px;
  height: 80px;
  text-align: center;
  font-weight: bold;
}

width（横幅）とheight（高さ）の詳細な指定やボックスモデルを理解したい人は「【html&css】width（横幅）とheight（高さ）の指定とボックスモデル」を一読ください。

【html&css】width（横幅）とheight（高さ）の指定とボックスモデル

余白も上下左右に指定できる

margin（外側の余白）とpadding（内側の余白）も上下左右に効かせられます。

要素の距離を離したり、箱の内側に余白を持たせたり、レイアウトの余白調整が可能です。

点線枠の外側にmargin、内側にpaddingが効いています

上下左右に余白が作れる！
HTMLコード表示
<div class="block-demo-spacing">
  <p style="font-size:14px; margin-bottom:0;">点線枠の外側にmargin、内側にpaddingが効いています</p>
  <div class="spacing-box">上下左右に余白が作れる！</div>
</div>
CSSコード表示
.block-demo-spacing {
  background-color: #e0f7fa;
  padding: 30px;
  border: 1px solid #b2ebf2;
  text-align: center;
}
.spacing-box {
  background-color: #fff;
  border: 3px dashed #00acc1;
  margin: 30px; 
  padding: 30px;
  font-weight: bold;
  color: #00838f;
  display: inline-block; /* 見た目の都合でinline-blockを使用 */
}

padding（内側の余白）とmargin（外側の余白）の設定やテクニックを知りたい人は「【html&css】paddingとmarginの違いは？上下左右の余白と順番」を一読ください。

【html&css】paddingとmarginの違いは？上下左右の余白と順番

text-alignやvertical-align指定はできない

ブロック要素を中央に寄せようと、text-align: center;を指定しても中央に動きません。

なぜなら、text-alignは「箱の中にある文字（インライン要素）」を揃えるプロパティだからです。

また、縦方向を揃えるvertical-alignもブロック要素に効果がありません。

ブロック要素を水平中央に配置したい場合は、margin: 0 auto;（左右の余白を自動計算）を使います。

❌ 失敗例（text-align: center;）

中の文字だけが中央になる

⭕️ 成功例（margin: 0 auto;）

箱そのものが中央に配置される！
HTMLコード表示
<div class="block-demo-align">
  <p style="font-size:14px; margin-bottom:5px;">❌ 失敗例（text-align: center;）</p>
  <div class="align-wrong">中の文字だけが中央になる</div>

  <p style="font-size:14px; margin-bottom:5px;">⭕️ 成功例（margin: 0 auto;）</p>
  <div class="align-correct">箱そのものが中央に配置される！</div>
</div>
CSSコード表示
.block-demo-align {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
}
.align-wrong {
  background-color: #ffcdd2;
  border: 2px solid #d32f2f;
  color: #c62828;
  width: 300px;
  padding: 10px;
  margin-bottom: 20px;
  font-weight: bold;
  /* 箱自体を中央にしたいのに、text-alignを指定してしまった例 */
  text-align: center; 
}
.align-correct {
  background-color: #c8e6c9;
  border: 2px solid #388e3c;
  color: #2e7d32;
  width: 300px;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  /* 箱自体を中央に寄せる指定 */
  margin: 0 auto; 
}

display: inline;とは

display: inline;（インライン）は、要素を文章の一部として扱うための指定です。

リンクを作る<a>タグや文字の一部だけ色を変えたい時に使う<span>タグなどがこの性質を持ちます。

ブロック要素のように箱として場所を取るのではなく、テキストのように振る舞うのが特徴です。

display: inline;について
  • 文章の一部として利用する
  • 要素間に改行が入らず横に並ぶ
  • 基本的にblockの中で利用する
  • 幅と高さを指定できない
  • 上下の余白を調整できない
  • text-alignが指定できる
  • inline⇔blockは指定変更可能

文章の一部として利用する

インライン要素は、「in line（行の中）」で使われます。

段落（<p>）の中にある特定キーワードだけ太字にしたり、色を変えたり、リンクを貼ったりする際の「マーカーで線を引くような役割」をイメージするとよいです。

インライン要素は、このように文章の途中で一部だけを目立たせたい時や、クリックできるリンクを作る時に使われます。前後に改行が入らないので、自然な文章の流れを作ることができます。

HTMLコード表示
<div class="inline-demo-text">
  <p>
    インライン要素は、このように文章の途中で<span class="demo-highlight">一部だけを目立たせたい時</span>や、<a class="demo-link">クリックできるリンク</a>を作る時に使われます。前後に改行が入らないので、自然な文章の流れを作ることができます。
  </p>
</div>
CSSコード表示
.inline-demo-text {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  line-height: 1.8;
}
.demo-highlight {
  background-color: #fff9c4;
  font-weight: bold;
  color: #f57f17;
  padding: 0 5px;
  border-bottom: 2px solid #fbc02d;
}
.demo-link {
  color: #1976d2;
  text-decoration: underline;
  font-weight: bold;
  cursor: pointer;
}

要素間に改行が入らず横に並ぶ

block要素が「縦に積まれていく」のに対し、inline 要素は文字と同様に「スペースが許す限り、横に並んでいく」といった性質があります。

画面の端まで到達すると、文字と同様に自然に折り返します。

▼ 改行されず、隣り合って並びます

インライン1 インライン2 インライン3 インライン4
HTMLコード表示
<div class="inline-demo-horizontal">
  <p style="font-size:14px; margin-bottom:10px;">▼ 改行されず、隣り合って並びます</p>
  <span class="demo-inline-box">インライン1</span>
  <span class="demo-inline-box">インライン2</span>
  <span class="demo-inline-box">インライン3</span>
  <span class="demo-inline-box">インライン4</span>
</div>
CSSコード表示
.inline-demo-horizontal {
  background-color: #e3f2fd;
  padding: 20px;
  border: 1px solid #bbdefb;
}
.demo-inline-box {
  background-color: #90caf9;
  color: #0d47a1;
  font-weight: bold;
  padding: 5px 10px;
  border: 1px solid #1976d2;
}

基本的にblockの中で利用する

HTMLの書き方として、「インライン要素は、ブロック要素（見出しや段落など）の中に入れて使う」のが基本です。

私はブロック要素（親）です。
中に インライン要素（子） を内包しています。
HTMLコード表示
<div class="inline-demo-structure">
  <div class="demo-parent-block">
    私はブロック要素（親）です。<br>
    中に <span class="demo-child-inline">インライン要素（子）</span> を内包しています。
  </div>
</div>
CSSコード表示
.inline-demo-structure {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px dashed #adb5bd;
}
.demo-parent-block {
  background-color: #c8e6c9;
  border: 2px solid #388e3c;
  padding: 15px;
  text-align: center;
}
.demo-child-inline {
  background-color: #ffffff;
  border: 2px solid #f57c00;
  color: #e65100;
  font-weight: bold;
  padding: 5px;
}

幅と高さを指定できない

インライン要素は「文字の一部」として扱われるため、CSSでwidth（幅）やheight（高さ）を指定しても無視されます。

インライン要素の大きさは、「中に入っている文字の量」だけで決まります。

▼ width: 300px; height: 100px; を指定していますが…

中身の文字の長さ分しか広がりません！
HTMLコード表示
<div class="inline-demo-size">
  <p style="font-size:14px; margin-bottom:5px;">▼ width: 300px; height: 100px; を指定していますが…</p>
  <span class="demo-fail-size">中身の文字の長さ分しか広がりません！</span>
</div>
CSSコード表示
.inline-demo-size {
  background-color: #ffebee;
  padding: 20px;
  border: 1px solid #ffcdd2;
}
.demo-fail-size {
  background-color: #ff5252;
  color: white;
  font-weight: bold;
  /* 幅と高さを指定しているのに効かない！ */
  width: 300px;
  height: 100px;
}

上下の余白を調整できない

インライン要素は、「左右」の余白（margin）が効きます。

しかし、「上下」の余白（margin-top/margin-bottom）は指定しても無視され、他の要素を押しのけられません。

上の行のテキストです。上の行のテキストです。
上下のmarginは効かず、左右だけ効きます！
下の行のテキストです。下の行のテキストです。
HTMLコード表示
<div class="inline-demo-margin">
  上の行のテキストです。上の行のテキストです。<br>
  <span class="demo-fail-margin">上下のmarginは効かず、左右だけ効きます！</span><br>
  下の行のテキストです。下の行のテキストです。
</div>
CSSコード表示
.inline-demo-margin {
  background-color: #f3e5f5;
  padding: 20px;
  border: 1px solid #e1bee7;
  line-height: 1.5;
}
.demo-fail-margin {
  background-color: #ce93d8;
  color: #4a148c;
  font-weight: bold;
  /* 上下に大きなmarginを指定しているのに、上の行を押しのけられない！ */
  margin-top: 50px;
  margin-bottom: 50px;
  /* 左右は効く！ */
  margin-left: 20px;
  margin-right: 20px;
}

text-alignが指定できる

「インライン要素」にtext-align: center;を指定しても何も起こりません。（幅がないためです。）

正しくは、「インライン要素を囲んでいる親のブロック要素」に対してtext-alignを指定することで、「中身のインライン要素を左揃え・中央揃え・右揃えにコントロールできる」が正しい考え方です。

▼ 親のブロック要素に text-align: center; を指定

インライン要素が中央に寄った！
HTMLコード表示
<div class="inline-demo-align">
  <p style="font-size:14px; margin-bottom:5px;">▼ 親のブロック要素に text-align: center; を指定</p>
  <div class="demo-align-parent">
    <span class="demo-align-child">インライン要素が中央に寄った！</span>
  </div>
</div>
CSSコード表示
.inline-demo-align {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
}
.demo-align-parent {
  background-color: #e0f2f1;
  border: 2px dashed #00897b;
  padding: 15px;
  /* ▼親のブロック要素に中央揃えを指定！▼ */
  text-align: center; 
}
.demo-align-child {
  background-color: #00bfa5;
  color: white;
  padding: 5px 15px;
  font-weight: bold;
}

inline⇔blockは指定変更可能

「リンク（<a>：元はinline）を、押しやすい大きなボタン（幅と高さを指定できるblock）にしたい！」

そんな時は、HTMLが元々持っている性質をCSSで上書き変更できます。

元々は inline の <a> タグですが、
display: block; で立派なボタンに変身しました！

クリックしてね
HTMLコード表示
<div class="inline-demo-override">
  <p style="font-size:14px; margin-bottom:15px;">元々は inline の <a> タグですが、<br>display: block; で立派なボタンに変身しました！</p>
  <a href="#" class="demo-btn">クリックしてね</a>
</div>
CSSコード表示
.inline-demo-override {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  text-align: center;
}
.demo-btn {
  /* ▼インライン要素(aタグ)をブロック要素に変更！▼ */
  display: block;
  /* blockになったので、幅や余白が自由に指定できる！ */
  width: 200px;
  margin: 0 auto;
  padding: 15px;
  background-color: #ff4081;
  color: white;
  text-decoration: none;
  font-weight: bold;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: 0.2s;
}
.demo-btn:hover {
  background-color: #f50057;
  transform: translateY(-2px);
}

display: inline-block;とは

display: inline-block;（インライン・ブロック）は、「インライン（横に並ぶ）」と「ブロック（幅や高さを持つ箱）」を合わせた性質です。

display: inline-block;について
  • 改行が入らず横に並ぶ
  • 幅と高さを指定できる
  • 上下左右の余白指定ができる
  • text-alignとvertical-alignの指定ができる
  • display: inline-block;の実例

改行が入らず横に並ぶ

inline要素と同じように、前後に改行が入らずスペースが許す限り横へと並びます。

親要素の端まで到達すると、文字と同じように次の行へと折り返されます。

▼ 改行されず横に並び、端まで行くと自然に折り返します

要素 1
要素 2
要素 3
要素 4
要素 5
要素 6
HTMLコード表示
<div class="ib-demo-wrap">
  <p style="font-size:14px; margin-bottom:10px;">▼ 改行されず横に並び、端まで行くと自然に折り返します</p>
  <div class="demo-ib-box">要素 1</div>
  <div class="demo-ib-box">要素 2</div>
  <div class="demo-ib-box">要素 3</div>
  <div class="demo-ib-box">要素 4</div>
  <div class="demo-ib-box">要素 5</div>
  <div class="demo-ib-box">要素 6</div>
</div>
CSSコード表示
.ib-demo-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  text-align: left;
}
.demo-ib-box {
  display: inline-block;
  background-color: #e3f2fd;
  border: 2px solid #2196f3;
  color: #0d47a1;
  padding: 10px 15px;
  margin: 5px;
  font-weight: bold;
  border-radius: 4px;
}

幅と高さを指定できる

inlineで無視されていたwidth（幅）とheight（高さ）の指定がinline-blockでは反映されます。

「横に並べつつ、同じサイズのボタンを作る」といったことが可能になります。

同じ width:150px; height:60px; を指定した比較

inline（効かない） inline-block（効く！）
HTMLコード表示
<div class="ib-demo-size">
  <p style="font-size:14px; margin-bottom:10px;">同じ width:150px; height:60px; を指定した比較</p>
  <span class="demo-inline-fail">inline（効かない）</span>
  <span class="demo-ib-success">inline-block（効く！）</span>
</div>
CSSコード表示
.ib-demo-size {
  background-color: #fce4ec;
  padding: 20px;
  border: 1px solid #f8bbd0;
}
.demo-inline-fail {
  display: inline; /* インライン要素 */
  background-color: #ffcdd2;
  border: 2px solid #ef5350;
  padding: 5px;
  /* 幅と高さを指定しても無視される */
  width: 200px;
  height: 100px;
}
.demo-ib-success {
  display: inline-block; /* インラインブロック要素 */
  background-color: #c8e6c9;
  border: 2px solid #4caf50;
  padding: 5px;
  /* 幅と高さがバッチリ効く！ */
  width: 200px;
  height: 100px;
  text-align: center;
  line-height: 50px;
  font-weight: bold;
}

width（横幅）とheight（高さ）の詳細な指定やボックスモデルを理解したい人は「【html&css】width（横幅）とheight（高さ）の指定とボックスモデル」を一読ください。

【html&css】width（横幅）とheight（高さ）の指定とボックスモデル

上下左右の余白指定ができる

inline-blockは上下左右のmarginとpaddingが正常に機能します。

上の行のテキストです。上の行のテキストです。
テキストの途中に
上下にmarginを指定したinline-block
を入れると、しっかりと上の行と下の行を押し広げて余白を作ってくれます。
下の行のテキストです。下の行のテキストです。
HTMLコード表示
<div class="ib-demo-margin">
  上の行のテキストです。上の行のテキストです。<br>
  テキストの途中に<div class="demo-ib-margin-box">上下にmarginを指定したinline-block</div>を入れると、しっかりと上の行と下の行を押し広げて余白を作ってくれます。<br>
  下の行のテキストです。下の行のテキストです。
</div>
CSSコード表示
.ib-demo-margin {
  background-color: #fff8e1;
  padding: 20px;
  border: 1px solid #ffecb3;
  line-height: 1.6;
}
.demo-ib-margin-box {
  display: inline-block;
  background-color: #ffe082;
  border: 2px solid #ffa000;
  font-weight: bold;
  padding: 10px;
  /* 上下にしっかり余白が取れる！ */
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
}

padding（内側の余白）とmargin（外側の余白）の設定やテクニックを知りたい人は「【html&css】paddingとmarginの違いは？上下左右の余白と順番」を一読ください。

【html&css】paddingとmarginの違いは？上下左右の余白と順番

text-alignとvertical-alignの指定ができる

  • text-align (左右の揃え)
    親要素にtext-align: center;などを指定すると、中のinline-block要素ごと中央揃えや右揃えにできます。
  • vertical-align (上下の揃え)
    隣り合うテキストや他のインライン要素に対して、上端（top）、中央（middle）、下端（bottom）のどこに合わせて並べるかを調整できます。

基準となるテキスト（下線）に対して、箱の高さをどう合わせるか調整できます。

top
基準テキスト
middle
基準テキスト
bottom
HTMLコード表示
<div class="ib-demo-align">
  <p style="font-size:14px; margin-bottom:10px;">基準となるテキスト（下線）に対して、箱の高さをどう合わせるか調整できます。</p>
  <div class="align-parent">
    <div class="demo-valign-box v-top">top</div>
    <span class="base-text">基準テキスト</span>
    <div class="demo-valign-box v-middle">middle</div>
    <span class="base-text">基準テキスト</span>
    <div class="demo-valign-box v-bottom">bottom</div>
  </div>
</div>
CSSコード表示
.ib-demo-align {
  background-color: #f3e5f5;
  padding: 20px;
  border: 1px solid #e1bee7;
}
/* 親要素で全体を中央揃えにする */
.align-parent {
  text-align: center;
  background-color: #ffffff;
  padding: 15px;
  border: 1px dashed #ce93d8;
}
.demo-valign-box {
  display: inline-block;
  width: 80px;
  height: 80px;
  background-color: #ab47bc;
  color: white;
  font-weight: bold;
  line-height: 80px; /* テキストを箱の中央に */
}
/* ▼ vertical-alignで縦の揃え位置を変える！ ▼ */
.v-top { vertical-align: top; }
.v-middle { vertical-align: middle; }
.v-bottom { vertical-align: bottom; }

.base-text {
  font-size: 24px;
  font-weight: bold;
  color: #4a148c;
  border-bottom: 2px solid #4a148c;
}

display: inline-block;の実例

実際のWebサイト制作の現場でinline-blockはどのように使われているのでしょうか？

よく使われる「ブログ記事のカテゴリータグ（バッジ）」の実例を見てみましょう。

displayプロパティの完全ガイド
HTML CSS 初心者向け レイアウト

このように、大きさがバラバラのタグを綺麗に並べ、リンクとしてクリックしやすいように余白を持たせるには、inline-block が最適です！

HTMLコード表示
<div class="ib-demo-practical">
  <div class="article-card">
    <div class="article-title">displayプロパティの完全ガイド</div>
    <a href="#" class="category-tag tag-html">HTML</a>
    <a href="#" class="category-tag tag-css">CSS</a>
    <a href="#" class="category-tag">初心者向け</a>
    <a href="#" class="category-tag">レイアウト</a>
    <p style="margin-top: 15px; color: #666; font-size: 14px; line-height: 1.6;">
      このように、大きさがバラバラのタグを綺麗に並べ、リンクとしてクリックしやすいように余白を持たせるには、inline-block が最適です！
    </p>
  </div>
</div>
CSSコード表示
.ib-demo-practical {
  background-color: #f8f9fa;
  padding: 25px;
  border: 1px solid #dee2e6;
  font-family: sans-serif;
}
.article-card {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  max-width: 500px;
  margin: 0 auto;
}
.article-title {
  font-size: 20px;
  margin: 0 0 10px 0;
  color: #333;
}
/* ▼ カテゴリータグの実装 ▼ */
.category-tag {
  display: inline-block; /* 横に並べつつ、余白と背景をつける */
  background-color: #e9ecef;
  color: #495057;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 10px;
  margin-right: 8px; /* 右側に隙間を空ける */
  margin-bottom: 8px; /* 折り返した時のために下にも隙間を空ける */
  border-radius: 20px; /* 角を丸くする */
  text-decoration: none;
  transition: 0.2s;
}
.category-tag:hover { background-color: #ced4da; }
.tag-html { background-color: #ffebee; color: #c62828; }
.tag-css { background-color: #e3f2fd; color: #1565c0; }

display: none;とは

display: none;は、指定した要素を画面から非表示にするプロパティです。

ポイントは、「要素が元々占めていたスペース（領域）も完全に無くなり、後の要素が上に詰める」という点です。

実際のWeb制作の現場では、以下のような場面で使われます。

  • スマホとPCでデザインを切り替える時
    PC用の大きなメニュー画像にはdisplay: none;を指定してスマホでは隠し、代わりにスマホ用のハンバーガーメニューを表示する
  • クリックで開閉するメニュー（アコーディオン）やタブを作る時
    最初は中身をdisplay: none;で隠し、ボタンが押されたら display: block;に切り替えて表示させる

要素が消えると「スペースも一緒に消えて詰められる」という挙動をボタンを押して体感してみてください。

▼ ボタンを押すと、真ん中の赤い箱が「display: none;」になります ▼

消えない箱 1
消える赤い箱
消えない箱 2
HTMLコード表示
<div class="none-demo-wrapper">
  <p style="font-size:14px; margin-bottom:15px; text-align:center;">▼ ボタンを押すと、真ん中の赤い箱が「display: none;」になります ▼</p>
  <input type="checkbox" id="toggle-none" class="demo-checkbox">
  <div style="text-align:center; margin-bottom:20px;">
    <label for="toggle-none" class="demo-toggle-btn">赤い箱を消す（display: none;）</label>
  </div>
  <div class="demo-container">
    <div class="demo-box box-blue">消えない箱 1</div>
    <div class="demo-box box-red target-box">消える赤い箱</div>
    <div class="demo-box box-blue">消えない箱 2</div>
  </div>
</div>
CSSコード表示
.none-demo-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  font-family: sans-serif;
}
/* チェックボックス自体は隠す */
.demo-checkbox {
  display: none;
}
/* 切り替えボタンのデザイン */
.demo-toggle-btn {
  display: inline-block;
  background-color: #343a40;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s;
}
.demo-toggle-btn:hover {
  background-color: #495057;
}
/* 箱を並べる親要素 */
.demo-container {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 15px;
  border-radius: 4px;
}
/* 共通の箱のデザイン */
.demo-box {
  padding: 15px;
  margin-bottom: 10px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
  transition: 0.3s ease;
}
/* 最後の箱だけ下余白をなくす */
.demo-box:last-child {
  margin-bottom: 0;
}
.box-blue {
  background-color: #0d6efd;
}
.box-red {
  background-color: #dc3545;
}
/* =========================================
 チェックが入ったら赤い箱を display: none; にする
  ========================================= */
#toggle-none:checked ~ .demo-container .target-box {
  display: none;
}
/* チェックが入った時のボタンのテキストと色を変更 */
#toggle-none:checked ~ div .demo-toggle-btn {
  background-color: #198754;
}
#toggle-none:checked ~ div .demo-toggle-btn::after {
  content: " → 元に戻す";
}

display: flex;とは

現代のWebデザインにおいて「display: flex;（フレックスボックス）」は、避けては通れません。

これまでのblockやinline-blockよりも直感的でレイアウトを組めます。

Flexboxを使う上で大切なルールは、「並べたい要素（子要素）を囲む、外側の箱（親要素）にdisplay: flex;を指定する」ということです。

display: flex;について
  • 親要素に指定するだけで横並びになる
  • 要素間の隙間（gap）が一瞬で作れる
  • 縦・横の「真ん中」配置が簡単にできる
  • スマホ対応もラク！要素の折り返しができる

親要素に指定するだけで横並びになる

<div>などのブロック要素は放っておくと縦に積み重なっていきます。

しかし、それらを囲む親要素にdisplay: flex;と1行書くだけで、中に入っている子要素が横一列に並びます。

▼ ボタンを押して親要素に flex をかけてみましょう ▼

子要素 1
子要素 2
子要素 3
HTMLコード表示
<div class="flex-demo1-wrapper">
  <p style="font-size:14px; margin-bottom:15px; text-align:center;">▼ ボタンを押して親要素に flex をかけてみましょう ▼</p>
  <input type="checkbox" id="fd1-toggle" class="fd1-checkbox">
  <div style="text-align:center; margin-bottom:20px;">
    <label for="fd1-toggle" class="fd1-toggle-btn">display: flex; を適用する！</label>
  </div>
  <div class="fd1-container">
    <div class="fd1-item">子要素 1</div>
    <div class="fd1-item">子要素 2</div>
    <div class="fd1-item">子要素 3</div>
  </div>
</div>
CSSコード表示
.flex-demo1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  font-family: sans-serif;
}
.fd1-checkbox {
  display: none;
}
.fd1-toggle-btn {
  display: inline-block;
  background-color: #0d6efd;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.2s;
}
.fd1-toggle-btn:hover {
  background-color: #0b5ed7;
}
/* 親要素（最初はただのブロック要素） */
.fd1-container {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 15px;
  border-radius: 4px;
}
/* 子要素 */
.fd1-item {
  background-color: #bbdefb;
  border: 2px solid #1976d2;
  color: #0d47a1;
  padding: 15px;
  margin-bottom: 10px; /* 縦積み時の隙間 */
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
}
/* 最後の要素の下余白を消す（縦積み用） */
.fd1-item:last-child {
  margin-bottom: 0;
}
/* =========================================
  チェックが入ったら親要素を flex にする
  ========================================= */
#fd1-toggle:checked ~ .fd1-container {
  display: flex; /* これだけで横に並ぶ！ */
}
/* flexになったら、子要素のもともとの下余白を消す */
#fd1-toggle:checked ~ .fd1-container .fd1-item {
  margin-bottom: 0;
  /* 見栄えのために少し横の隙間を開ける */
  margin-right: 10px; 
}
#fd1-toggle:checked ~ div .fd1-toggle-btn {
  background-color: #198754;
}
#fd1-toggle:checked ~ div .fd1-toggle-btn::after {
  content: "（適用中）";
}

要素間の隙間（gap）が一瞬で作れる

Webデザインでは、横に並べた要素に隙間を作りたい時marginを駆使して「最後の要素だけmarginを消して…」と複雑な計算をしていました。

しかしFlexboxなら、親要素にgap: 20px;（隙間を20pxにする）と書くだけで、要素と要素の間だけに余白を作ります。

▼ 隙間（gap）の大きさを切り替えてみましょう ▼

箱 A
箱 B
箱 C
HTMLコード表示
<div class="flex-demo2-wrapper">
  <p style="font-size:14px; margin-bottom:15px; text-align:center;">▼ 隙間（gap）の大きさを切り替えてみましょう ▼</p>

  <input type="radio" name="fd2-gap" id="fd2-gap0" class="fd2-radio" checked>
  <input type="radio" name="fd2-gap" id="fd2-gap10" class="fd2-radio">
  <input type="radio" name="fd2-gap" id="fd2-gap30" class="fd2-radio">

  <div class="fd2-controls">
    <label for="fd2-gap0" class="fd2-btn">gap: 0; (隙間なし)</label>
    <label for="fd2-gap10" class="fd2-btn">gap: 10px;</label>
    <label for="fd2-gap30" class="fd2-btn">gap: 30px;</label>
  </div>

  <div class="fd2-container">
    <div class="fd2-item">箱 A</div>
    <div class="fd2-item">箱 B</div>
    <div class="fd2-item">箱 C</div>
  </div>

</div>
CSSコード表示
.flex-demo2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  font-family: sans-serif;
}
.fd2-radio {
  display: none;
}
.fd2-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}
.fd2-btn {
  background-color: #e9ecef;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  border: 2px solid transparent;
  transition: 0.2s;
}
#fd2-gap0:checked ~ .fd2-controls [for="fd2-gap0"],
#fd2-gap10:checked ~ .fd2-controls [for="fd2-gap10"],
#fd2-gap30:checked ~ .fd2-controls [for="fd2-gap30"] {
  background-color: #ff9800;
  color: white;
}
/* 親要素はすでに display: flex; */
.fd2-container {
  display: flex;
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 15px;
  border-radius: 4px;
  /* アニメーションで隙間が広がるのを分かりやすくする */
  transition: gap 0.3s ease; 
}
.fd2-item {
  background-color: #ffe0b2;
  border: 2px solid #f57c00;
  color: #e65100;
  padding: 15px;
  font-weight: bold;
  border-radius: 4px;
  flex-grow: 1; /* 箱の幅を均等に伸ばす */
  text-align: center;
}
/* =========================================
  ラジオボタンで gap の値を切り替える
  ========================================= */
#fd2-gap0:checked ~ .fd2-container {
  gap: 0;
}
#fd2-gap10:checked ~ .fd2-container {
  gap: 10px;
}
#fd2-gap30:checked ~ .fd2-container {
  gap: 30px;
}

縦・横の「真ん中」配置が簡単にできる

要素を「上下左右の真ん中」に配置することは、以前のCSSでは非常に複雑なテクニックが必要でした。

しかしFlexboxなら、親要素に以下の2行を追加するだけで、中身を「真ん中」に配置できます。

  • justify-content: center;（横方向の中央揃え）
  • align-items: center;（縦方向の中央揃え）

▼ ボタンを押して、箱をエリアのド真ん中に移動させましょう ▼

🎯
ターゲット
HTMLコード表示
<div class="flex-demo3-wrapper">
  <p style="font-size:14px; margin-bottom:15px; text-align:center;">▼ ボタンを押して、箱をエリアのド真ん中に移動させましょう ▼</p>
  <input type="checkbox" id="fd3-toggle" class="fd3-checkbox">
  <div style="text-align:center; margin-bottom:20px;">
    <label for="fd3-toggle" class="fd3-toggle-btn">ド真ん中に配置する！</label>
  </div>
  <div class="fd3-container">
    <div class="fd3-item">🎯<br>ターゲット</div>
  </div>
</div>
CSSコード表示
.flex-demo3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  font-family: sans-serif;
}
.fd3-checkbox {
  display: none;
}
.fd3-toggle-btn {
  display: inline-block;
  background-color: #6f42c1;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s;
}
.fd3-toggle-btn:hover {
  background-color: #59359a;
}
.fd3-container {
  display: flex; /* フレックスボックスにする */
  height: 200px; /* 親要素に高さを設ける */
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  border-radius: 4px;
}
.fd3-item {
  background-color: #e1bee7;
  border: 2px solid #ab47bc;
  color: #4a148c;
  padding: 20px;
  font-weight: bold;
  text-align: center;
  border-radius: 50%; /* 少し丸くする */
  transition: all 0.5s ease; /* 移動をアニメーションに */
}
/* =========================================
  中央揃えの2つの魔法のプロパティを追加！
  ========================================= */
#fd3-toggle:checked ~ .fd3-container {
  justify-content: center; /* 横方向の中央揃え */
  align-items: center;     /* 縦方向の中央揃え */
}
#fd3-toggle:checked ~ div .fd3-toggle-btn {
  background-color: #20c997;
}
#fd3-toggle:checked ~ div .fd3-toggle-btn::after {
  content: "（成功！）";
}

スマホ対応もラク！要素の折り返しができる

横並びにした要素が多くなり、画面幅（親要素の幅）に収まらなくなった時、Flexboxは要素を縮めて無理やり1行に収めようとします。

しかし、スマホなどの狭い画面ではみ出した分を下の行に折り返してほしいです。

そんな時は親要素にflex-wrap: wrap;を追加するだけで折り返してくれます。

▼ 折り返し設定（flex-wrap）の効果を確認しましょう ▼

アイテム 1
アイテム 2
アイテム 3
アイテム 4
アイテム 5
HTMLコード表示
<div class="flex-demo4-wrapper">
  <p style="font-size:14px; margin-bottom:15px; text-align:center;">▼ 折り返し設定（flex-wrap）の効果を確認しましょう ▼</p>
  <input type="checkbox" id="fd4-toggle" class="fd4-checkbox">
  <div style="text-align:center; margin-bottom:20px;">
    <label for="fd4-toggle" class="fd4-toggle-btn">折り返し（flex-wrap: wrap;）をONにする</label>
  </div>
  <div class="fd4-container-area">
    <div class="fd4-container">
      <div class="fd4-item">アイテム 1</div>
      <div class="fd4-item">アイテム 2</div>
      <div class="fd4-item">アイテム 3</div>
      <div class="fd4-item">アイテム 4</div>
      <div class="fd4-item">アイテム 5</div>
    </div>
  </div>
</div>
CSSコード表示
.flex-demo4-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  font-family: sans-serif;
}
.fd4-checkbox {
  display: none;
}
.fd4-toggle-btn {
  display: inline-block;
  background-color: #dc3545;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s;
}
.fd4-toggle-btn:hover {
  background-color: #b02a37;
}
.fd4-container-area {
  background-color: #e9ecef;
  padding: 15px;
  border-radius: 4px;
}
.fd4-container {
  display: flex;
  gap: 10px;
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 15px;
  /* ▼ わざと狭い幅（300px）にして、要素が入り切らない状態を作ります ▼ */
  max-width: 300px;
  margin: 0 auto;
}
.fd4-item {
  background-color: #f8d7da;
  border: 2px solid #f5c2c7;
  color: #842029;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  /* アイテム1個の幅を100pxにする（3つ並ぶと300pxで枠いっぱいになる） */
  width: 100px;
  /* flexbox内で要素が縮まないようにする設定 */
  flex-shrink: 0; 
}
/* =========================================
  はみ出した要素を下の行に折り返す！
  ========================================= */
#fd4-toggle:checked ~ .fd4-container-area .fd4-container {
  flex-wrap: wrap; 
}
#fd4-toggle:checked ~ div .fd4-toggle-btn {
  background-color: #198754;
}

display: grid;とは

display: grid;は、Webページで目に見えない「マス目（グリッド）」を作り、マス目の中に要素をはめ込んでいくレイアウト手法です。

タイル状に並んだ画像ギャラリーやブログの「ヘッダー・サイドバー・メイン記事・フッター」といった複雑なページ全体の枠組みを直感的に作れます。

display: grid;について
  • 縦と横の「マス目（2次元）」でレイアウトを作れる
  • 行と列の数や幅を自由に決められる（単位fr）
  • 複数のマス目を合体させて自由に配置できる
  • 縦横の隙間（gap）が一括で指定できる

縦と横の「マス目（2次元）」でレイアウトを作れる

flexが要素を「一列のレール」に乗せるイメージなら、gridは「方眼紙（マス目）」を用意するイメージです。

親要素にdisplay: grid;を指定し、「何列のマス目にするか」を指定するだけで、中に入っている子要素が順番にマス目の中へ入ります。

▼ ボタンを押して親要素を「2列のマス目（grid）」に変えてみましょう ▼

マス目 1
マス目 2
マス目 3
マス目 4
HTMLコード表示
<div class="grid-demo1-wrapper">
  <p style="font-size:14px; margin-bottom:15px; text-align:center;">▼ ボタンを押して親要素を「2列のマス目（grid）」に変えてみましょう ▼</p>
  <input type="checkbox" id="gd1-toggle" class="gd1-checkbox">
  <div style="text-align:center; margin-bottom:20px;">
    <label for="gd1-toggle" class="gd1-toggle-btn">display: grid; を適用する！</label>
  </div>
  <div class="gd1-container">
    <div class="gd1-item">マス目 1</div>
    <div class="gd1-item">マス目 2</div>
    <div class="gd1-item">マス目 3</div>
    <div class="gd1-item">マス目 4</div>
  </div>
</div>
CSSコード表示
.grid-demo1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  font-family: sans-serif;
}
.gd1-checkbox {
  display: none;
}
.gd1-toggle-btn {
  display: inline-block;
  background-color: #0d6efd;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.2s;
}
.gd1-toggle-btn:hover {
  background-color: #0b5ed7;
}
.gd1-container {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 15px;
  border-radius: 4px;
}
.gd1-item {
  background-color: #e8f5e9;
  border: 2px solid #4caf50;
  color: #2e7d32;
  padding: 20px;
  margin-bottom: 10px; /* 縦積み時の隙間 */
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
}
.gd1-item:last-child {
  margin-bottom: 0;
}
/* =========================================
  チェックが入ったら親要素を grid にする
  ========================================= */
#gd1-toggle:checked ~ .gd1-container {
  display: grid;
  /* 2列のマス目を作る（1fr 1fr は「均等な幅で2つ」という意味） */
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#gd1-toggle:checked ~ .gd1-container .gd1-item {
  /* gridになったら元々の下余白を消す */
  margin-bottom: 0;
}
#gd1-toggle:checked ~ div .gd1-toggle-btn {
  background-color: #198754;
}
#gd1-toggle:checked ~ div .gd1-toggle-btn::after {
  content: "（マス目化 成功！）";
}

行と列の数や幅を自由に決められる（単位fr）

grid-template-columnsというプロパティとfr（フラクション＝比率）という単位があります。

例えば1fr 1fr 1frと書けば「幅を1:1:1で3等分する」という意味になり、面倒なパーセント計算（33.333%…）をする必要がなくなります。

さらにrepeat(3, 1fr)という書き方をすれば、「1frを3回繰り返す（3等分）」のように短く書けます。

▼ 魔法の単位「fr」で、列の数を切り替えてみましょう ▼

箱 A
箱 B
箱 C
箱 D
箱 E
箱 F
HTMLコード表示
<div class="grid-demo2-wrapper">
  <p style="font-size:14px; margin-bottom:15px; text-align:center;">▼ 魔法の単位「fr」で、列の数を切り替えてみましょう ▼</p>

  <input type="radio" name="gd2-col" id="gd2-col1" class="gd2-radio" checked>
  <input type="radio" name="gd2-col" id="gd2-col2" class="gd2-radio">
  <input type="radio" name="gd2-col" id="gd2-col3" class="gd2-radio">

  <div class="gd2-controls">
    <label for="gd2-col1" class="gd2-btn">1列 (1fr)</label>
    <label for="gd2-col2" class="gd2-btn">2列 (1fr 1fr)</label>
    <label for="gd2-col3" class="gd2-btn">3列 (repeat(3, 1fr))</label>
  </div>

  <div class="gd2-container">
    <div class="gd2-item">箱 A</div>
    <div class="gd2-item">箱 B</div>
    <div class="gd2-item">箱 C</div>
    <div class="gd2-item">箱 D</div>
    <div class="gd2-item">箱 E</div>
    <div class="gd2-item">箱 F</div>
  </div>

</div>
CSSコード表示
.grid-demo2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  font-family: sans-serif;
}
.gd2-radio {
  display: none;
}
.gd2-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.gd2-btn {
  background-color: #e9ecef;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  border: 2px solid transparent;
  transition: 0.2s;
}
#gd2-col1:checked ~ .gd2-controls [for="gd2-col1"],
#gd2-col2:checked ~ .gd2-controls [for="gd2-col2"],
#gd2-col3:checked ~ .gd2-controls [for="gd2-col3"] {
  background-color: #ff9800;
  color: white;
}
.gd2-container {
  display: grid; /* 最初からgridにしておく */
  gap: 10px; /* 隙間 */
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 15px;
  border-radius: 4px;
}
.gd2-item {
  background-color: #fff3e0;
  border: 2px solid #ff9800;
  color: #e65100;
  padding: 15px;
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
}
/* =========================================
  ラジオボタンで列の数を切り替える
  ========================================= */
#gd2-col1:checked ~ .gd2-container {
  grid-template-columns: 1fr;
}
#gd2-col2:checked ~ .gd2-container {
  grid-template-columns: 1fr 1fr; /* または repeat(2, 1fr) */
}
#gd2-col3:checked ~ .gd2-container {
  grid-template-columns: repeat(3, 1fr);
}

複数のマス目を合体させて自由に配置できる

エクセルの「セルの結合」のように、特定要素を「複数のマス目に広げる（結合する）」ことができます。

これを使うと、例えば「ヘッダーは一番上で横幅いっぱい、その下にサイドバーとメイン記事を並べる」といったよくあるレイアウトが完成します。

▼ ボタンを押して「ヘッダー」と「フッター」のマス目を横に合体させましょう ▼

ヘッダー (1マス分)
サイドバー
メイン記事
フッター (1マス分)
HTMLコード表示
<div class="grid-demo3-wrapper">
  <p style="font-size:14px; margin-bottom:15px; text-align:center;">▼ ボタンを押して「ヘッダー」と「フッター」のマス目を横に合体させましょう ▼</p>
  <input type="checkbox" id="gd3-toggle" class="gd3-checkbox">
  <div style="text-align:center; margin-bottom:20px;">
    <label for="gd3-toggle" class="gd3-toggle-btn">セルを結合してWebページ風にする！</label>
  </div>
  <div class="gd3-container">
    <div class="gd3-item gd3-header">ヘッダー (1マス分)</div>
    <div class="gd3-item gd3-sidebar">サイドバー</div>
    <div class="gd3-item gd3-main">メイン記事</div>
    <div class="gd3-item gd3-footer">フッター (1マス分)</div>
  </div>
</div>
CSSコード表示
.grid-demo3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  font-family: sans-serif;
}
.gd3-checkbox {
  display: none;
}
.gd3-toggle-btn {
  display: inline-block;
  background-color: #6f42c1;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s;
}
.gd3-toggle-btn:hover {
  background-color: #59359a;
}
.gd3-container {
  display: grid;
  /* 左（サイド）は 1fr、右（メイン）は 2fr の幅の「2列のマス目」 */
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 15px;
  border-radius: 4px;
}
.gd3-item {
  padding: 20px;
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
  color: #ffffff;
}
.gd3-header { background-color: #f44336; }
.gd3-sidebar { background-color: #2196f3; }
.gd3-main { background-color: #4caf50; }
.gd3-footer { background-color: #607d8b; }
/* =========================================
  チェックが入ったら、ヘッダーとフッターを結合する
  ========================================= */
#gd3-toggle:checked ~ .gd3-container .gd3-header,
#gd3-toggle:checked ~ .gd3-container .gd3-footer {
  /* 「縦の線1番」から「縦の線3番」までマス目を伸ばして結合！ */
  grid-column: 1 / 3;
}
/* チェックが入った時のテキスト変更 */
#gd3-toggle:checked ~ .gd3-container .gd3-header {
  content: "ヘッダー (結合して横幅いっぱい！)"; /* 擬似的な表現 */
}
#gd3-toggle:checked ~ div .gd3-toggle-btn {
  background-color: #20c997;
}
#gd3-toggle:checked ~ div .gd3-toggle-btn::after {
  content: "（結合成功！）";
}

縦横の隙間（gap）が一括で指定できる

例えば、マス目状に配置された要素に対してgap: 20px;と指定するだけで、「縦の隙間」と「横の隙間」の両方に均等の余白が出来ます。

▼ ボタンを押して、マス目の縦横に隙間（gap）を開けてみましょう ▼

1
2
3
4
5
6
HTMLコード表示
<div class="grid-demo4-wrapper">
  <p style="font-size:14px; margin-bottom:15px; text-align:center;">▼ ボタンを押して、マス目の縦横に隙間（gap）を開けてみましょう ▼</p>
  <input type="checkbox" id="gd4-toggle" class="gd4-checkbox">
  <div style="text-align:center; margin-bottom:20px;">
    <label for="gd4-toggle" class="gd4-toggle-btn">gap: 20px; を適用する</label>
  </div>
  <div class="gd4-container">
    <div class="gd4-item">1</div>
    <div class="gd4-item">2</div>
    <div class="gd4-item">3</div>
    <div class="gd4-item">4</div>
    <div class="gd4-item">5</div>
    <div class="gd4-item">6</div>
  </div>
</div>
CSSコード表示
.grid-demo4-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  font-family: sans-serif;
}
.gd4-checkbox {
  display: none;
}
.gd4-toggle-btn {
  display: inline-block;
  background-color: #e91e63;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s;
}
.gd4-toggle-btn:hover {
  background-color: #c2185b;
}
.gd4-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列のマス目 */
  /* 最初は隙間なし（gap: 0;） */
  gap: 0; 
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 15px;
  border-radius: 4px;
  transition: gap 0.4s ease; /* 隙間が開くのをアニメーションに */
}
.gd4-item {
  background-color: #fce4ec;
  border: 2px solid #f06292;
  color: #c2185b;
  padding: 20px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
}
/* =========================================
  チェックが入ったら、縦横に20pxの隙間を作る
  ========================================= */
#gd4-toggle:checked ~ .gd4-container {
  gap: 20px; /* 縦横の隙間が一発で開く！ */
}
#gd4-toggle:checked ~ div .gd4-toggle-btn {
  background-color: #198754;
}
#gd4-toggle:checked ~ div .gd4-toggle-btn::after {
  content: "（美しく開きました！）";
}

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • displayは要素の「表示形式（レイアウトや振る舞い）」を決める重要なプロパティ
  • display: block;は縦に並び、幅・高さ・上下左右の余白を指定できる
  • display: inline;は横に並ぶが幅・高さ・上下の余白は指定できない
  • display: inline-block;は横に並びつつ、幅・高さ・余白を指定できる
  • display: none;は要素を非表示にし、要素があったスペースも詰める
  • display: flex;は親要素に指定するだけで、子要素の横並びや中央揃えができる
  • display: grid;はマス目（行と列）を使って複雑な2次元レイアウトが作れる
HTML&CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次