HTMLで見出しを作っているとき、spanタグで文字を分けたのに、思ったように改行されないことがあります。
例えば、見出しの前半と後半で文字色やサイズを変えたい場合です。HTMLでは別々のspanタグにしているのに、ブラウザでは横一列に表示されてしまいます。
これはCSSの不具合ではなく、spanタグが持つ初期の表示形式によるものです。
この記事では、spanタグが改行されない理由と、display: blockを使って縦に並べる方法を解説します。あわせて、brタグとの違いや行間の調整方法も紹介します。
spanタグで改行できないのはなぜ？
spanタグで改行できない理由を理解するには、HTML要素の表示形式を知る必要があります。
まずは、spanタグがブラウザでどのように扱われるのか確認してみましょう。
spanはインライン要素として表示される
spanは、初期状態ではインライン要素として表示されます。
インライン要素は文章の一部を囲むために使われ、基本的には前後で改行されません。
例えば、次のHTMLを見てください。
<h1>
<span>What is Lorem Ipsum</span>
<span>What is Lorem Ipsum</span>
</h1>HTMLでは2つのspanタグを別々の行に記述しています。しかし、ブラウザでは基本的に横並びになります。
HTMLのソースコード上で改行しても、ブラウザ上で同じように改行されるとは限りません。
これは、HTML内の通常の改行や空白が、表示時にはまとめて扱われるためです。
インライン要素とブロック要素の違い
HTMLやCSSでは、要素の表示形式によって周囲の要素との並び方が変わります。
代表的な違いを整理すると、次のようになります。
| 表示形式 | 特徴 | 代表例 |
|---|---|---|
| インライン | 基本的に前後で改行されない | span、a |
| ブロック | 基本的に前後で改行される | div、p |
| インラインブロック | 横並びになりながら幅や高さを指定できる | CSSで指定した要素 |
ただし、HTMLタグの種類とCSSの表示形式は別のものです。
spanタグであっても、CSSのdisplayプロパティを使えば表示形式を変更できます。
displayでspanを縦に並べる方法
spanタグを使った見出しを2行に分けたい場合は、CSSでdisplay: blockを指定する方法があります。
HTMLを書き換えずに表示形式だけを変更できるため、見出しのデザインを調整するときにも便利です。
spanにdisplayを指定する
先ほどのHTMLに、次のCSSを追加します。
h1 span {
display: block;
}これで、h1の中にある2つのspanタグが縦に並びます。
display: blockは、要素をブロックレベルのボックスとして表示する指定です。
今回のように、見出しを2段に分け、それぞれの文字色やサイズを変更したい場合にも活用できます。
例えば、次のような指定です。
h1 span {
display: block;
}
h1 .title {
color: #e15252;
font-size: 32px;
}
h1 span:last-child {
color: #000;
font-size: 48px;
}これなら、1行目と2行目に異なるデザインを適用できます。
spanの行間が広いときはline-heightを確認する
spanタグを縦に並べられても、今度は行と行の間隔が広すぎる場合があります。
そんなときに確認したいのが、CSSのline-heightです。
h1 {
line-height: 1.1;
}line-heightは、文字が配置される行の高さを指定するプロパティです。
例えば1.1なら、基本的に文字サイズの1.1倍を行の高さとして扱います。
ただし、行間が広い原因はline-heightだけとは限りません。marginやpaddingが設定されていないかも確認しましょう。
spanの改行はbrタグでもできる？
HTMLで改行するといえば、brタグを思い浮かべる方も多いでしょう。
実際、brタグを使っても文字を次の行へ送れます。ただし、spanタグの表示形式を変更する方法とは役割が異なります。
brタグは改行、displayは表示形式の変更
例えば、次のHTMLでも2行の見出しを作れます。
<h1>
What is Lorem Ipsum<br>
What is Lorem Ipsum
</h1>brは、その位置で改行するためのHTMLタグです。
一方、display: blockは、CSSで要素の表示形式を変更する指定です。
文章中に必要な改行を入れるならbr、行ごとに文字色やサイズを変えながら配置したいならspanとCSSというように、目的に合わせて選びましょう。
なお、改行したいだけなら、必ずしもspanタグを使う必要はありません。
【まとめ】spanの改行はdisplayで調整できる
spanタグで改行できないのは、初期状態でインライン要素として表示されるためです。
2つのspanタグを縦に並べたい場合は、display: blockを指定することで解決できます。
今回のポイントは次のとおりです。
- spanタグは初期状態では前後で改行されません。
display: blockを指定すると縦に並べられます。- 行間が広い場合は
line-heightなどを確認します。 - 単純な改行には
brタグも使えます。
CSSで思ったように表示されないときは、数値を調整する前に、その要素がどのような表示形式になっているのかを確認してみましょう。