display

<!-- inline, block, inline-block の比較 -->
<div>
  <span style="display: inline; background: #ffd;">インライン（幅と高さの指定が効かない）</span>
  <span style="display: inline; background: #dff;">インライン（横に並ぶ）</span>
</div>

<div style="display: block; background: #fcc; padding: 8px;">ブロック（1行占有）</div>
<div style="display: block; background: #cfc; padding: 8px;">ブロック（次の行）</div>

<div>
  <span style="display: inline-block; width: 120px; height: 40px; background: #ccf; padding: 8px;">インラインブロック</span>
  <span style="display: inline-block; width: 120px; height: 40px; background: #fcf; padding: 8px;">横に並ぶ+幅高さ有効</span>
</div>

<!-- display: none は要素が消える（スペースも消える） -->
<div style="display: none;">このテキストは表示されません</div>

<!-- flex レイアウト -->
<div style="display: flex; gap: 8px; background: #eee; padding: 8px;">
  <div style="background: #f90; padding: 8px;">Flex子1</div>
  <div style="background: #09f; padding: 8px;">Flex子2</div>
  <div style="background: #0f9; padding: 8px;">Flex子3</div>
</div>

<!-- grid レイアウト -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: #eee; padding: 8px;">
  <div style="background: #f90; padding: 8px;">Grid1</div>
  <div style="background: #09f; padding: 8px;">Grid2</div>
  <div style="background: #0f9; padding: 8px;">Grid3</div>
  <div style="background: #f0f; padding: 8px;">Grid4</div>
  <div style="background: #ff0; padding: 8px;">Grid5</div>
  <div style="background: #0ff; padding: 8px;">Grid6</div>
</div>

サンプルページはこちら

レイアウトには『display: flex』や『display: grid』がよく使われますが、float や table-cell でもレイアウトは組めます。用途や好みに応じて使い分けられます。

手法	得意なレイアウト	典型的な使用例
flex	1方向（横並び or 縦並び）の整列。子要素の伸縮	ナビゲーション、ボタン群、カード横並び
grid	2方向（縦横）の格子レイアウト	ページ全体のレイアウト、画像ギャラリー
float	テキストの回り込み、シンプルな段組み	画像の横にテキスト、2カラムレイアウト
table-cell	縦方向の中央揃え、均等幅の段組み	等幅カラム、縦中央配置

詳しくは 『flex』 / 『grid』 / 『float』 のページもご覧ください。以下にこのページだけで使い方がわかるよう、主要プロパティをまとめます。

『display: flex』を指定すると、その要素はフレックスコンテナになり、直下の子要素がフレックスアイテムとして並びます。初期値では横方向に並びます。

プロパティ	指定先	役割	主な値
flex-direction	コンテナ	並ぶ方向	『row』（横・初期値）/ 『column』（縦）/ 『row-reverse』 / 『column-reverse』
justify-content	コンテナ	主軸方向（並ぶ方向）の揃え方	『flex-start』（初期値）/ 『center』 / 『flex-end』 / 『space-between』 / 『space-around』 / 『space-evenly』
align-items	コンテナ	交差軸方向（並ぶ方向と垂直）の揃え方	『stretch』（初期値）/ 『center』 / 『flex-start』 / 『flex-end』 / 『baseline』
flex-wrap	コンテナ	折り返し	『nowrap』（初期値・折り返さない）/ 『wrap』（折り返す）
gap	コンテナ	アイテム間の隙間	数値（例: 『16px』『1rem』）
flex	アイテム	伸縮の比率	『flex: 1』（均等に伸縮）/ 『flex: 0 0 200px』（固定幅）
align-self	アイテム	個別の交差軸揃え（align-items を上書き）	『center』 / 『flex-start』 / 『flex-end』 等

/* 横並び中央揃え（ナビゲーションバーの定番パターン） */
.nav {
    display: flex;
    justify-content: space-between; /* 両端に寄せて均等配置 */
    align-items: center;            /* 縦方向は中央揃え */
    gap: 16px;
}

/* 縦並び（カードのタイトル・本文・ボタンを縦に積む） */
.card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 折り返しありの横並び（タグ一覧など） */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 子要素の幅を均等にする */
.equal-columns {
    display: flex;
    gap: 16px;
}
.equal-columns > div {
    flex: 1; /* 全ての子が均等に伸びる */
}

/* サイドバー固定 + メイン可変 */
.layout {
    display: flex;
    gap: 24px;
}
.sidebar {
    flex: 0 0 240px; /* 伸縮なし・固定240px */
}
.main {
    flex: 1; /* 残りの幅を全て使う */
}

サンプルページはこちら

よくあるミス

『justify-content』『align-items』は親要素に『display: flex』を指定しないと効きません。同様に『flex』『align-self』は親がフレックスコンテナでないと無視されます。

NG: 親に display: flex がないので justify-content は効きません。

.container {
    justify-content: center; /* 無視される */
}

OK: display: flex を指定してから使います。

.container {
    display: flex;
    justify-content: center; /* 効く */
}

『gap』を指定しているのに隙間が空かない場合、親に『display: flex』か『display: grid』が指定されているか確認してください。通常のブロック要素では『gap』は効きません。

『flex-wrap: wrap』を付け忘れると、子要素が親の幅を超えてもはみ出したまま折り返しません。横並びの要素が多い場合は『flex-wrap: wrap』を指定すると折り返しが有効になります。

サンプルページはこちら

『display: grid』を指定すると、その要素はグリッドコンテナになり、直下の子要素がグリッドアイテムとして格子状に配置されます。列数・行数を明示的に指定できるのが flex との大きな違いです。

プロパティ	指定先	役割	主な値
grid-template-columns	コンテナ	列の幅を定義	『200px 1fr』 / 『repeat(3, 1fr)』 / 『repeat(auto-fit, minmax(200px, 1fr))』
grid-template-rows	コンテナ	行の高さを定義	『auto』 / 『100px 200px』 / 『repeat(3, 1fr)』
gap	コンテナ	アイテム間の隙間	数値（例: 『16px』『1rem』）。『row-gap』『column-gap』で縦横個別指定も可
grid-column	アイテム	アイテムが占める列の範囲	『1 / 3』（1列目から3列目の手前まで）/ 『span 2』（2列分）
grid-row	アイテム	アイテムが占める行の範囲	『1 / 3』 / 『span 2』
place-items	コンテナ	アイテムの揃え方（align-items + justify-items の一括指定）	『center』 / 『start end』

『1fr』は「残りの空間を1として等分する」単位です。例えば『1fr 2fr』なら 1:2 の比率で分割されます。『repeat(3, 1fr)』は『1fr 1fr 1fr』の省略形です。

/* 3等分の列（画像ギャラリーなど） */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* 2カラムレイアウト（サイドバー + メインコンテンツ） */
.layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
}

/* レスポンシブなカードグリッド（画面幅に応じて列数が変わる） */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

/* 特定のアイテムを2列分に広げる */
.featured {
    grid-column: span 2;
}

『auto-fit』と『minmax()』を組み合わせると、メディアクエリを使わずにレスポンシブなグリッドを作れます。上の例では各アイテムの最小幅が200pxで、それ以上のスペースがあれば自動的に列数が増えます。

サンプルページはこちら

よくあるミス

『grid-column』『grid-row』は親要素に『display: grid』を指定しないと効きません。子要素にだけ指定しても無視されます。

NG: 親に display: grid がないので grid-column は効きません。

.item {
    grid-column: span 2; /* 無視される */
}

OK: 親に display: grid を指定してから使います。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.item {
    grid-column: span 2; /* 効く */
}

『grid-template-columns』を指定し忘れると、子要素は全て1列に縦積みされます（列の定義がないため）。gridを使う場合は列の定義をセットで記述するのが基本です。

『repeat(auto-fit, minmax(200px, 1fr))』でレスポンシブにしたのに崩れる場合、親要素の幅が固定されていないか確認してください。親の幅が200px未満だと『minmax(200px, 1fr)』の最小値を下回り、はみ出すことがあります。

サンプルページはこちら

『float』は本来テキストの回り込みのためのプロパティですが、シンプルなレイアウトにも使えます。指定する項目が少ないので、さくっと組みたいときに便利です。

/* 画像の横にテキストを回り込ませる */
.image-left {
    float: left;
    margin-right: 16px;
}

/* 2カラムレイアウト */
.col-left {
    float: left;
    width: 70%;
}
.col-right {
    float: right;
    width: 28%;
}
/* float を使った後は clearfix で解除する */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

float を使った後は親要素に『clearfix』を適用するか、親要素に『overflow: hidden』を指定して float を解除する必要があります。詳しくは 『float』 / 『clear』 のページをご覧ください。

サンプルページはこちら

よくあるミス

float を使った後に『clear』で解除しないと、親要素の高さが0になります。これは float した子要素が通常のフローから外れるためです。

NG: float の解除を忘れると親の高さが0になり、後続の要素が重なります。

.parent {
    background: #eee; /* 背景が見えない（高さが0） */
}
.child {
    float: left;
    width: 50%;
}

OK: clearfix で float を解除します。

.parent::after {
    content: "";
    display: block;
    clear: both;
}

『width』を指定し忘れると、float した要素は内容の幅に縮みます。2カラムレイアウトにする場合は、幅を明示的に指定する必要があります。

左右のカラムの幅を合計100%にすると、間の余白（margin/padding/border）で溢れることがあります。合計を100%未満にするか、『box-sizing: border-box』を指定してください。

サンプルページはこちら

要素を「見えなくする」方法として『display: none』と『visibility: hidden』の2つがありますが、動作が異なります。

プロパティ	表示	スペース	アクセシビリティ
display: none	非表示	消える（レイアウトから除外）	スクリーンリーダーも読まない
visibility: hidden	非表示	残る（空白のまま占有）	スクリーンリーダーも読まない
opacity: 0	透明	残る	スクリーンリーダーが読む場合がある

/* インライン・ブロック・非表示 */
div.test { display: inline;}
div.test1 { display: block;}
div.test2 { display: none;}

/* インラインブロック（横並び＋幅高さ指定可能） */
.btn { display: inline-block; width: 120px; padding: 8px;}

/* フレックスボックス（横並びレイアウト） */
.card-row { display: flex; gap: 16px;}

/* フレックスボックス（縦並びレイアウト） */
.card-col { display: flex; flex-direction: column; gap: 8px;}

/* グリッドレイアウト */
.grid-layout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;}

/* テーブルと同じふるまい */
.table-like { display: table; width: 100%;}
.cell-like { display: table-cell; padding: 8px;}

値	概要
none	要素を表示しません。この値を指定された要素は存在しなかったものとしてレイアウトが構築されます。
inline	要素をインラインレベル要素とします。
inline-block	要素をインラインブロック要素(置換要素)とします。
block	要素をブロックレベル要素とします。
list-item	要素をリスト要素とします。この値が指定された要素はリストマーカーも同時に生成されます。li要素と同じふるまいです。
table	table要素と同じふるまいになります。 ※IE8以前のIEでは未対応です。
table-caption	caption要素と同じふるまいになります。 ※IE8以前のIEでは未対応です。
table-cell	td要素と同じふるまいになります。 ※IE8以前のIEでは未対応です。
table-row	tr要素と同じふるまいになります。 ※IE8以前のIEでは未対応です。
table-column	col要素と同じふるまいになります。 ※IE8以前のIEでは未対応です。
table-column-group	colgroup要素と同じふるまいになります。 ※IE8以前のIEでは未対応です。
table-footer-group	tfoot要素と同じふるまいになります。 ※IE8以前のIEでは未対応です。
table-header-group	thead要素と同じふるまいになります。 ※IE8以前のIEでは未対応です。
table-row-group	tbody要素と同じふるまいになります。 ※IE8以前のIEでは未対応です。

※ バージョン情報は MDN に基づいています。

要素の表示形式を変更します。各HTML要素によって初期値に違いがありますのでご注意ください。

こちらの記事でも『display』プロパティの解説を行っています。初心者の方向けの内容となっておりますので良ければ合わせてご覧ください。