CSSでレイアウトを組む際に欠かせない「display」プロパティ。でも、「何も指定しないときはどうなるの？」「なんでdivは縦に並んでspanは横に並ぶの？」と疑問に思ったことはありませんか？
実は、displayプロパティには「CSS仕様で定められた初期値」と「ブラウザが各HTML要素に設定するデフォルト値」という2つの概念があり、この違いを理解していないと混乱してしまいます。
この記事では、displayプロパティのデフォルト値について、初心者の方でも分かりやすく解説します。実際のコード例も交えながら、HTML要素ごとのデフォルト値と使い分けのコツを紹介していきますね。
displayプロパティとは？基本のおさらい
まずは基本から確認しましょう。
displayプロパティの役割
displayプロパティは、HTML要素をどのように表示するかを決めるCSSプロパティです。簡単に言えば、「この要素を縦に並べるか、横に並べるか、それとも非表示にするか」などを制御します。
主な値の種類
displayプロパティには、たくさんの値がありますが、よく使われるのは以下の通りです：
- block（ブロック）：要素が縦に並ぶ
- inline（インライン）：要素が横に並ぶ
- inline-block（インラインブロック）：横に並びつつ、高さや幅も指定できる
- flex（フレックス）：柔軟なレイアウトを作る（フレックスボックス）
- grid（グリッド）：格子状のレイアウトを作る
- none（非表示）：要素を完全に非表示にする
今回は、この中でも特に基本となる「block」と「inline」のデフォルト値について詳しく見ていきます。
知っておくべき2つの概念
ここが混乱しやすいポイントなので、しっかり理解しましょう！
①CSS仕様で定められた「初期値（initial value）」
CSSの仕様書によると、displayプロパティの初期値は「inline」です。
これは、「何も指定されていない場合、CSSの仕様としてはinlineになる」という意味なんです。
/* display: initial; と指定すると... */
div {
display: initial; /* すべての要素が inline になる！ */
}重要なポイント：display: initial;を使うと、divでもpでもh1でも、すべての要素がinlineとして表示されます。これは、CSS仕様上の初期値が「inline」だからです。
②ブラウザが設定する「デフォルト値（default value）」
一方で、私たちが普段見ている表示は、ブラウザのデフォルトスタイルシートによって決まっています。
たとえば、divタグを何もCSSを書かずに使うと、自然と縦に並びますよね？これは、ブラウザが裏側で以下のようなスタイルを自動的に適用しているからです：
/* ブラウザのデフォルトスタイルシート（イメージ） */
div {
display: block;
}
span {
display: inline;
}
li {
display: list-item;
}つまり、ブラウザが各HTML要素に対して適切なdisplay値を自動的に設定してくれているわけです。
2つの違いをまとめると
| 項目 | 説明 | 値 |
|---|---|---|
| CSS仕様の初期値 | CSSの仕様書で定められた値 | inline |
| ブラウザのデフォルト値 | ブラウザが各HTML要素に自動設定する値 | 要素ごとに異なる |
この違いを理解しておくと、「なぜdivは何も書かなくてもblockなのか？」という疑問がスッキリ解決します！
主なHTML要素のデフォルトdisplay値一覧
それでは、代表的なHTML要素のデフォルトdisplay値を見ていきましょう。
ブロックレベル要素（display: block）
以下の要素は、デフォルトでdisplay: blockが設定されています。
特徴：
- 要素が縦に並ぶ（前後に改行が入る）
- 幅は親要素いっぱいに広がる
- 高さ・幅（width、height）を指定できる
- 余白（margin、padding）を上下左右すべてに指定できる
代表的な要素：
<!-- コンテナ系 -->
<div>divタグ</div>
<section>sectionタグ</section>
<article>articleタグ</article>
<main>mainタグ</main>
<header>headerタグ</header>
<footer>footerタグ</footer>
<nav>navタグ</nav>
<aside>asideタグ</aside>
<!-- 見出し -->
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<!-- h4、h5、h6も同様 -->
<!-- テキスト系 -->
<p>段落タグ</p>
<blockquote>引用タグ</blockquote>
<pre>整形済みテキスト</pre>
<!-- リスト系 -->
<ul>順序なしリスト</ul>
<ol>順序ありリスト</ol>
<!-- その他 -->
<form>フォーム</form>
<hr> <!-- 水平線 -->
<table>テーブル</table>コード例：
<div style="background-color: lightblue;">1つ目のdiv</div>
<div style="background-color: lightgreen;">2つ目のdiv</div>
<div style="background-color: lightyellow;">3つ目のdiv</div>表示結果：
┌────────────────────┐
│ 1つ目のdiv │
└────────────────────┘
┌────────────────────┐
│ 2つ目のdiv │
└────────────────────┘
┌────────────────────┐
│ 3つ目のdiv │
└────────────────────┘このように、縦に並んで表示されます。
インライン要素（display: inline）
以下の要素は、デフォルトでdisplay: inlineが設定されています。
特徴：
- 要素が横に並ぶ（改行されない）
- 幅はコンテンツ（中身）に応じて決まる
- 高さ・幅（width、height）を指定できない
- 上下のmarginは指定できない（左右のmarginとpaddingは指定可能）
代表的な要素：
<!-- テキスト装飾 -->
<span>spanタグ</span>
<strong>強調タグ</strong>
<em>強勢タグ</em>
<b>太字タグ</b>
<i>斜体タグ</i>
<small>小さい文字タグ</small>
<!-- リンク・画像 -->
<a href="#">リンクタグ</a>
<img src="image.jpg" alt="画像">
<!-- その他 -->
<code>コードタグ</code>
<label>ラベルタグ</label>
<input type="text">
<button>ボタンタグ</button>コード例：
<p>
これは<span style="background-color: yellow;">spanタグ</span>と
<strong style="background-color: lightblue;">strongタグ</strong>を
含む段落です。
</p>表示結果：
これは[spanタグ]と[strongタグ]を含む段落です。このように、文章の中で自然に横に並んで表示されます。
その他の特殊な値
list-item（リストアイテム）
<li>リスト項目</li>リスト項目（<li>タグ）は、デフォルトでdisplay: list-itemが設定されており、リストマーカー（・や数字）が表示されます。
table系の値
<table> <!-- display: table -->
<thead> <!-- display: table-header-group -->
<tr> <!-- display: table-row -->
<th> <!-- display: table-cell -->見出し</th>
</tr>
</thead>
<tbody> <!-- display: table-row-group -->
<tr>
<td> <!-- display: table-cell -->データ</td>
</tr>
</tbody>
</table>テーブル関連の要素は、それぞれ専用のdisplay値が設定されています。
none（非表示）
<script>console.log('表示されない');</script>
<style>/* 表示されない */</style><script>タグや<style>タグなどは、デフォルトでdisplay: noneが設定されており、画面上には表示されません。
blockとinlineの違いを実際に見比べてみよう
実際のコード例で、違いを体感してみましょう！
例1：divタグ（デフォルトはblock）
<div style="background-color: red; color: white;">1つ目</div>
<div style="background-color: blue; color: white;">2つ目</div>
<div style="background-color: green; color: white;">3つ目</div>表示結果：
[1つ目 ]
[2つ目 ]
[3つ目 ]縦に並び、幅は親要素いっぱいに広がります。
例2：spanタグ（デフォルトはinline）
<span style="background-color: red; color: white;">1つ目</span>
<span style="background-color: blue; color: white;">2つ目</span>
<span style="background-color: green; color: white;">3つ目</span>表示結果：
[1つ目][2つ目][3つ目]横に並び、幅はコンテンツに合わせて決まります。
例3：displayを変更してみる
<!-- divをinlineに変更 -->
<div style="display: inline; background-color: red; color: white;">1つ目</div>
<div style="display: inline; background-color: blue; color: white;">2つ目</div>
<div style="display: inline; background-color: green; color: white;">3つ目</div>表示結果：
[1つ目][2つ目][3つ目]divタグでも、display: inlineを指定すれば横に並びます！
よくある使い分けのパターン
実際の制作現場でよく使われるパターンを紹介します。
パターン1：ナビゲーションメニューを横に並べる
<ul style="list-style: none; padding: 0;">
<li style="display: inline; margin-right: 20px;">
<a href="#">ホーム</a>
</li>
<li style="display: inline; margin-right: 20px;">
<a href="#">サービス</a>
</li>
<li style="display: inline; margin-right: 20px;">
<a href="#">お問い合わせ</a>
</li>
</ul>リスト項目（li）は本来縦に並びますが、display: inline;を指定することで横並びのメニューが作れます。
パターン2：リンクをボタンのように見せる
<a href="#" style="display: block;
width: 200px;
padding: 10px;
background-color: blue;
color: white;
text-align: center;
text-decoration: none;">
クリックしてね
</a>aタグは本来inlineですが、display: block;にすることで、高さや幅を指定できるボタン風のリンクが作れます。
パターン3：要素を非表示にする（JavaScriptと組み合わせ）
<div id="message" style="display: none;">
このメッセージは最初は非表示です
</div>
<button onclick="document.getElementById('message').style.display = 'block';">
メッセージを表示
</button>display: none;で要素を非表示にし、JavaScriptでdisplay: block;に変更することで表示することができます。
inline-blockという便利な値
実は、inline-blockという、inlineとblockの「いいとこ取り」の値もあります。
inline-blockの特徴
- 要素が横に並ぶ（inline的）
- 高さ・幅を指定できる（block的）
- 上下左右すべてのmargin・paddingが使える（block的）
コード例
<span style="display: inline-block;
width: 100px;
height: 100px;
background-color: red;
color: white;
text-align: center;
line-height: 100px;">
Box1
</span>
<span style="display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
color: white;
text-align: center;
line-height: 100px;">
Box2
</span>表示結果：
[ Box1 ][ Box2 ]横に並びつつ、サイズも指定できる便利な値です！
displayのデフォルト値を確認する方法
実際にHTML要素のデフォルトdisplay値を確認したい場合は、ブラウザの開発者ツールを使いましょう。
手順
- ブラウザでページを開く
- F12キーを押して開発者ツールを開く
- 確認したい要素を選択（または右クリック→「検証」）
- 「Styles」タブや「Computed」タブで
displayの値を確認
Computedタブを見ると、「user agent stylesheet」（ブラウザのデフォルトスタイル）として設定されている値を確認できます。
display: initialを使う際の注意点
display: initial;を使うと、すべての要素がinlineになってしまいます。
問題のあるコード例
div {
display: initial; /* これは inline になる！ */
}これだと、divが本来持っているblock表示が失われてしまいます。
正しい使い方
元のブラウザデフォルトに戻したい場合は、revertキーワードを使いましょう：
div {
display: none; /* 一度非表示にして... */
}
div.show {
display: revert; /* ブラウザのデフォルト（block）に戻す */
}ただし、revertは比較的新しいキーワードなので、古いブラウザでは動作しない可能性があります。
まとめ
CSSのdisplayプロパティのデフォルト値について、重要なポイントをまとめます。
理解すべき2つの概念
- CSS仕様の初期値：すべての要素で「inline」
- ブラウザのデフォルト値：HTML要素ごとに異なる（div→block、span→inlineなど）
主なデフォルト値
- display: block → div、p、h1〜h6、section、article、headerなど
- display: inline → span、a、strong、em、img、buttonなど
- display: list-item → li
- display: none → script、style
実務での使い分け
- メニューを横並びにしたい →
display: inline;またはdisplay: flex; - リンクをボタン風にしたい →
display: block; - 横並びでサイズも指定したい →
display: inline-block; - 要素を非表示にしたい →
display: none;
displayプロパティのデフォルト値を正しく理解すれば、CSSの挙動が予測しやすくなり、より効率的にレイアウトを組めるようになります。ぜひ、この知識を活用してみてください！
コメント