catnose
catnose
HTMLの<span>タグは、とくに意味を持たないタグです。おもに見た目（デザインやレイアウト）を変えるために使います。このページでは<span>の基本的な使い方や注意点を解説します。
spanタグの基本
spanタグには「意味がない」
基本的に1つ1つのHTMLタグは「意味」や「役割」を持っています。しかし、<span>タグと<div>タグだけは意味を持ちません。
| タグ | 意味・役割 | 解説ページ |
|---|---|---|
<p> | 段落 | pタグとは |
<h1> | 見出し | h1-h6タグとは |
<li> | リスト | liタグとは |
<div> | 意味はない😸 | divタグとは |
<span> | 意味はない😸 | このページ |
👆これはたくさんのHTMLタグの中のごく一部です。
spanタグの使いどころ
ではいつ<div>や<span>を使うのかというと、CSSをあてて、見た目を変えたいときに使います。「意味を持たない」ため、見た目のために遠慮なく使えるわけですね。
<p>このサイトの名前は<span class="example">Code Kitchen</span>です。</p>
👆たとえばこの例では、文章の一部を<span>で囲み、CSSで文字の色や太さを変える指定をしています。このように<span>は文章の一部を装飾したいときなどに活躍します。
spanタグの使い方と注意点
CSSでスタイルをあてるときにはclassを使う
<span>に対してCSSでスタイルを適用するときには、クラスを指定するようにします。
HTML spanにクラスを指定
<span class="my-style">こんにちは</span>
👆たとえばclass="my-style"とした場合…
.my-style {
font-weight: bold; /* 太字に */
font-style: italic; /* 斜体に */
background: #e7edf3; /* 背景をグレーに */
}
👆CSSでは.my-style { ~ }という形でスタイルを指定します。
✍️classの代わりにidを使うこともできますが、基本的にCSSをあてる目的ではclassだけを使うのが良いとされています。
spanの前後には改行が入らない
<p>このサイトは<span class="example">Code Kitchen</span>です。</p>
グレーの部分がspan
👆<span>の前後には改行が入りません。そのため、文章の一部に線を引いたり、背景色をつけたりなどの装飾に最適です。
spanにwidthやheightは効かない
.example {
background: #e7edf3;
width: 100px; /* 😿効かない */
height: 50px; /* 😿効かない */
}
グレーの部分がspan
👆span要素にCSSで幅（width）や高さ（height）だけを指定しても反映されません。これは<span>にはデフォルトでdisplay: inlineがあてられているからです。
幅や高さを変えるときはdisplay: inline-blockに
.example {
display: inline-block; /* 🖐 */
background: #e7edf3;
width: 100px; /* 😸効く */
height: 50px; /* 😸効く */
}
グレーの部分がspan
👆span要素にdisplay: inline-blockを指定すると、幅（width）や高さ（height）の指定がちゃんと反映されるようになります。
spanに上下のmarginは効かない
.example {
background: #e7edf3;
margin: 20px;
}
グレーの部分がspan
👆span要素にCSSでマージン（margin）を指定しても、左右にしか効きません（上下に余白が作られていないのが分かると思います）。
上下にpaddingを指定しても崩れる
.example {
background: #e7edf3;
padding: 20px;
}
グレーの部分がspan
👆パディング（padding）も左右には問題ないのですが、上下には思い通りに効きません。前後の行に重なるようにはみ出てしまいます。
余白を指定したいときはdisplay: inline-blockに
.example {
display: inline-block; /* 🖐 */
background: #e7edf3;
margin: 20px; /* 😸効く */
padding: 20px; /* 😸効く */
}
グレーの部分がspan
👆span要素にdisplay: inline-blockを指定すると、paddingやmarginがちゃんと反映されるようになります。
✍️覚えておきたい
span要素にwidth、height、margin、paddingが反映されないときは、display: inline-blockを合わせて指定する
spanの中にdisplay: blockの要素を入れない
<span>はデフォルトでdisplay: inlineです。display: inlineの要素内に、display: blockの要素を入れないようにしましょう。
🙅よくない
<span>
<div>~</div>
</span>
👆たとえば<span>の中に<div>を入れないようにしましょう。同じく<p>や<h1>などを入れることもできません。
spanの中に入れられるのはdisplay: inlineの要素
基本的にdisplay: inlineの要素内に入れるのはdisplay: inlineの要素です。
🙆♀️OK！
<ul>
<li>これは<span><a href="#">リンク</a></span>です。<li>
<li>...<li>
</ul>
👆リンク（<a>タグ）は、デフォルトでdisplay: inlineなので、<span>の中で使ってもOKです。
spanは何回使っても良い
<span>は何回でも使うことができます。ただし、入れ子にしすぎるとHTMLの可読性が低下する（読みづらくなる）ので注意しましょう。
こちらは正しい使い方の例です。
<div>の中に<p>を入れて、その中で<span>を使う…のような形になるわけですね。