HTMLを書いていると、div や p は勝手に改行されるのに、span や a は横に並ぶ、という違いに出会います。
これは、タグごとの初期表示が違うためです。
div や p は、初期状態ではブロックのように表示されます。
span や a は、初期状態では文章の一部として横に並びます。
ただし、実際の表示はCSSの display プロパティで変更できます。
この記事では、インライン要素とブロック要素の違い、div を改行させない方法、span をブロックのように表示する方法、display: contents; の使い方、CSSで改行を制御する方法を解説します。
- インライン要素とブロック要素の違い
div、p、span、aの表示の違いdivを改行させないCSSdivを改行させるCSSpタグを改行しないように見せる方法display: contents;の使い方と注意点- 長いテキストが改行されないときの考え方
インライン要素とブロック要素の違い
ざっくりいうと、ブロックのように表示される要素は前後で改行され、インラインのように表示される要素は文章の中に横並びで表示されます。
| 種類 | 特徴 | よくあるタグ |
|---|---|---|
| ブロックのように表示される要素 | 新しい行から始まり、横幅いっぱいに広がりやすい | div、p、h1、h2、ul |
| インラインのように表示される要素 | 文章の流れの中に入り、必要な幅だけを使う | span、a、strong、em |
ただし、現在のCSSでは「このタグだから絶対にこの表示」というより、display の初期値がそうなっている、と考える方が実務ではわかりやすいです。
<div>divです</div>
<div>divです</div>
<span>spanです</span>
<span>spanです</span>上のHTMLは、初期状態では div は縦に並び、span は横に並びます。
displayプロパティで表示のされ方を変える
CSSの display プロパティを使うと、要素の表示のされ方を変えられます。
よく使う値は次のとおりです。
| display | 意味 | 使う場面 |
|---|---|---|
block |
ブロックのように表示する | 縦に並べたい、幅や余白を扱いやすくしたい |
inline |
文章の一部のように表示する | 横に流したい、文章の途中に置きたい |
inline-block |
横に並ぶが幅や高さも指定しやすい | ボタンやラベルを横並びにしたい |
flex |
子要素を柔軟に並べる | ナビ、カード、横並びレイアウト |
contents |
要素自身の箱を作らず、子要素だけを親の中に出すように扱う | 余分なラッパーをGridやflexの配置上だけ無視したい |
none |
表示しない | 要素を非表示にしたい |
HTMLタグの意味はそのままに、見た目だけをCSSで変えるのが基本です。
divが改行される理由
div は、初期状態では display: block; のように表示されます。
そのため、次のように書くと縦に並びます。
<div class="box">1つ目</div>
<div class="box">2つ目</div>
<div class="box">3つ目</div>.box {
border: 1px solid #ccc;
padding: 8px;
}div は大きな箱として使うことが多いため、初期状態では前後で改行されるように表示されます。
改行されること自体はエラーではありません。
横並びにしたい場合は、HTMLを変えるのではなくCSSで調整します。
divを改行させないCSS
div を改行させずに横に並べたい場合は、目的によって書き方が変わります。
短い要素を横に並べたいならinline-block
ボタンやラベルのような短い要素を横に並べたい場合は、display: inline-block; が使いやすいです。
<div class="tag">HTML</div>
<div class="tag">CSS</div>
<div class="tag">JavaScript</div>.tag {
display: inline-block;
padding: 4px 10px;
border: 1px solid #ccc;
}inline-block は横に並びますが、width、height、padding なども扱いやすいです。
レイアウトとして横並びにしたいならflex
カードやナビゲーションのように、複数の要素をレイアウトとして横並びにしたい場合は、親要素に display: flex; を指定します。
<div class="cards">
<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>
</div>.cards {
display: flex;
gap: 16px;
}
.card {
flex: 1;
padding: 16px;
border: 1px solid #ccc;
}実務では、横並びレイアウトなら flex を使うことが多いです。
文章の一部のようにしたいならinline
どうしても div を文章の一部のように扱いたい場合は、display: inline; を指定できます。
.inline-div {
display: inline;
}ただし、文章の一部だけを囲みたいなら、最初から span を使う方が自然です。
<p>この文章の<span class="marker">一部だけ</span>装飾します。</p>HTMLタグは意味で選び、表示はCSSで調整します。
divを改行させるCSS
逆に、インラインのように表示されている要素を改行させたい場合は、display: block; を使います。
たとえば span を縦に並べたい場合は、次のようにします。
<span class="item">HTML</span>
<span class="item">CSS</span>
<span class="item">JavaScript</span>.item {
display: block;
}display: block; にすると、それぞれの要素が新しい行から表示されます。
pタグを改行しないように見せる方法
p タグも初期状態ではブロックのように表示されるため、前後で改行されます。
<p>1つ目の段落です。</p>
<p>2つ目の段落です。</p>もし見た目として横に並べたいだけなら、CSSで変更できます。
.inline-paragraph {
display: inline;
}ただし、p は段落を表すタグです。
横に並べたいだけで段落ではないなら、span や div に変えた方が自然な場合もあります。
<span class="label">名前</span>
<span class="value">山田太郎</span>「文章の意味として段落なのか」「見た目として横にしたいだけなのか」を分けて考えるのが大切です。
spanをブロック要素のように表示する方法
span は初期状態では文章の一部として横に並びます。
ただし、CSSで display: block; を指定すれば、ブロックのように表示できます。
.name {
display: block;
font-weight: bold;
}<p>
<span class="name">山田太郎</span>
Web制作を学習しています。
</p>ただし、最初から独立した箱として扱うなら、div や p の方が自然なこともあります。
インライン要素を中央寄せする方法
span や a のようなインライン要素を中央寄せしたい場合は、親要素に text-align: center; を指定します。
<p class="center">
<span>中央に表示したいテキスト</span>
</p>.center {
text-align: center;
}インライン要素そのものに margin: 0 auto; を指定しても、期待どおり中央寄せにならないことがあります。
margin: 0 auto; で中央寄せしたい場合は、対象を display: block; にして幅を指定します。
.button {
display: block;
width: 200px;
margin: 0 auto;
}テキストが改行されない場合はwhite-spaceやoverflow-wrapを見る
div や p は改行されるはずなのに、長いテキストが折り返されないことがあります。
その場合は、タグの種類よりもCSSを確認します。
特に次のプロパティが関係します。
| プロパティ | 役割 |
|---|---|
white-space |
空白や改行をどう扱うかを決める |
overflow-wrap |
長い単語やURLを途中で折り返せるようにする |
word-break |
単語の途中で改行するかを決める |
たとえば、長いURLや英数字がはみ出る場合は、次のようにします。
.text {
overflow-wrap: anywhere;
}一方、1行で表示したい場合は white-space: nowrap; を使います。
.nowrap {
white-space: nowrap;
}white-space: nowrap; が指定されていると、通常の折り返しがされにくくなります。
HTMLの改行や br の使い分けは、HTMLで改行されない原因と直し方 で詳しく解説しています。
display: contentsの使い方
display: contents; は、要素自身の箱を作らず、その子要素だけを親要素の中にあるように扱う指定です。
たとえば、HTMLの意味や管理の都合でラッパー要素は残したいけれど、CSS Gridやflexの配置では子要素を直接並べたい場合に使えます。
<ul class="menu">
<li class="menu-group">
<a href="#">ホーム</a>
<a href="#">サービス</a>
</li>
<li class="menu-group">
<a href="#">会社情報</a>
<a href="#">お問い合わせ</a>
</li>
</ul>.menu {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.menu-group {
display: contents;
}この例では、.menu-group の箱をレイアウト上は作らず、中の a をGridのアイテムのように扱えます。
display: contentsとdisplay: noneの違い
display: contents; と display: none; はまったく違います。
| 指定 | 表示 | 子要素 |
|---|---|---|
display: contents; |
要素自身の箱を作らない | 表示される |
display: none; |
要素を表示しない | 表示されない |
display: contents; は非表示のための指定ではありません。
あくまで、レイアウト上の箱を作らないための指定です。
display: contentsの注意点
display: contents; は便利ですが、何にでも使う指定ではありません。
特に、次のような要素には慎重に使います。
buttonやaなど操作する要素table、ul、olなど構造の意味が重要な要素header、nav、main、asideなどランドマークになりうる要素- 背景色、枠線、余白、クリック範囲を持たせたい要素
一部のブラウザや支援技術の組み合わせでは、display: contents; を指定した要素自身の意味がアクセシビリティツリーから落ちることがあります。
子要素は表示されても、親要素が持っていた意味や役割が期待通りに伝わらない可能性があるため、意味のある要素に安易に使わない方が安全です。
display: contentsを使う判断基準
実務では、次のように判断すると扱いやすいです。
- 単なる装飾・管理用のラッパーなら候補になる
- 意味のあるタグや操作要素には使わない方が安全
- 背景、枠線、余白、クリック範囲が必要な要素には向かない
- Gridやflexのためだけにラッパーを無視したいときに限定する
- 使う前に対象ブラウザとアクセシビリティ上の影響を確認する
レイアウト目的だけなら、HTML構造を少し見直す、Gridやflexの指定を親子関係に合わせる、という方が素直な場合もあります。
インライン要素とブロック要素の一覧
よく使うタグを、初期表示の傾向でまとめると次のようになります。
| 初期表示の傾向 | タグ例 |
|---|---|
| ブロックのように表示される | div、p、h1〜h6、ul、ol、li、table、section、article、aside |
| インラインのように表示される | span、a、strong、em、img、code |
この一覧は、あくまで初期表示の目安です。
CSSで display を変更すれば、表示のされ方は変えられます。
まとめ
インライン要素とブロック要素の違いは、HTMLタグの意味とCSSの表示を分けて考えると理解しやすいです。
この記事のポイントをまとめると、次のようになります。
divやpは初期状態では改行されるように表示されるspanやaは初期状態では文章の中に横並びで表示されるdivを改行させないならdisplay: inline-block;やdisplay: flex;を使うspanを改行させたいならdisplay: block;を使う- 横並びレイアウトには
flexが使いやすい display: contents;は、要素自身の箱を作らず子要素だけを配置上扱いたいときに使うdisplay: contents;はアクセシビリティ上の注意があるため、意味のある要素や操作要素には慎重に使う- 長いテキストが折り返されない場合は
white-spaceやoverflow-wrapを確認する - HTMLタグは意味、CSSは見た目を担当する
タグの意味自体を整理したい場合は、HTMLタグの使い分け も参考にしてみてください。
関連記事
- HTMLタグの使い分け｜div・p・span・h1〜h3・asideを初心者向けに解説
- HTMLで改行されない原因と直し方
- HTMLのtableでtdが改行されない原因とCSSで折り返す方法
- CSS flexの使い方｜横並び・中央寄せ・均等幅・折り返し・高さを揃える方法
- CSS Gridの使い方｜2列・レスポンシブ・repeat・grid-area・flexとの使い分け
- CSSで行の高さを調整するやり方