Frontend Academy · レッスン

display: block、inline、flex、gridの基礎

displayの値を切り替え、block、inline、flex、gridがそれぞれ異なる方法でコンテンツを配置する仕組みを確認します。

「display: block、inline、flex、gridの基礎」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

displayプロパティ

displayプロパティは、レイアウトで最も重要なCSSプロパティです。要素がレイアウトフローに参加する方法と、子要素の配置方法を制御します。よく使う値は、block、inline、inline-block、flex、grid、noneです。

display: block

ブロック要素はコンテナーの全幅を占め、新しい行から始まります。例として<div>、<p>、<h1>があります。ブロック要素にはwidth、height、margin、paddingを設定できます。

.card {
  display: block;
  width: 100%;
  margin-bottom: 24px;
}

display: inline

インライン要素はテキスト内に流し込まれ、新しい行からは始まりません。例として<span>、<a>、<strong>があります。インライン要素ではwidth、height、垂直方向のmarginは効果がありません。

span { display: inline; color: blue; }
/* Setting width: 200px on a span does nothing */

display: inline-block

inline-blockは両方の性質を組み合わせたものです。要素はインライン（テキストのように）で流れますが、blockのようにwidth、height、垂直方向のmarginを受け付けます。テキストの行内に並べたいボタンやバッジに便利です。

.badge {
  display: inline-block;
  padding: 4px 8px;
  background: #e2e8f0;
  border-radius: 4px;
  font-size: 0.75rem;
}

display: none

display: noneは要素をレイアウトから完全に削除するため、空間を占有しません。空間を維持したまま非表示にするには、visibility: hiddenを使用します。

Flexbox — 一次元レイアウト

display: flexを指定すると、要素はフレックスコンテナーになります。直接の子要素はフレックスアイテムとなり、デフォルトではrowに沿って、またはcolumnに沿って配置されます。Flexは空間の分配とアイテムの整列に適しています。

.nav {
  display: flex;
  justify-content: space-between; /* horizontal */
  align-items: center;            /* vertical */
  gap: 16px;
}

Flexboxの主要プロパティ

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

CSS Grid — 二次元レイアウト

display: gridを指定すると、要素はグリッドコンテナーになります。grid-template-columnsとgrid-template-rowsで行と列を定義します。Gridはページレイアウトやカードグリッドに適しています。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

fr単位

fr（fraction、分数）単位は、利用可能な空間を分配します。grid-template-columns: 1fr 2fr 1frとすると3列が作られ、中央の列には他の列の2倍の空間が割り当てられます。

.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar + main */
  gap: 32px;
}

FlexとGridの使い分け

Flexboxは一次元レイアウト（ボタンの横並びやカードの積み重ね）に使用します。Gridは二次元レイアウト（ページの骨格や、行と列を明示的に指定するフォトギャラリー）に使用します。どちらも同じページ内で併用できます。

display: noneとvisibility: hiddenの違い

display: none：レイアウトから削除され、スクリーンリーダーからも認識されません。visibility: hidden：見えなくなりますが、空間を占有し、アクセシビリティツリーにも残ります。opacity: 0：見えなくなりますが、空間を占有し、アクセシビリティツリーからも認識できます。

確認問題

複数の行と列を持つレスポンシブなカードグリッドをレイアウトする必要があります。最初に使うdisplay値として最適なのはどれですか？

まとめ：displayの値

blockは全幅を占めます。inlineはテキストとともに流れます。inline-blockは両方の性質を持ちます。flexは子要素を一次元に配置します。gridは子要素を二次元に配置します。noneはレイアウトから削除します。これらを使いこなせば、Web上のあらゆるレイアウトを制御できます。

よくある質問

「display: block、inline、flex、gridの基礎」レッスンは無料ですか？

はい。「display: block、inline、flex、gridの基礎」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「display: block、inline、flex、gridの基礎」で何を学びますか？

displayの値を切り替え、block、inline、flex、gridがそれぞれ異なる方法でコンテンツを配置する仕組みを確認します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「display: block、inline、flex、gridの基礎」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る