spanタグとは
HTML の <span> 要素は、単体では特に意味を持たないタグですが、
<span>～</span>で囲った部分をインライン要素としてグループ化することができるタグです。
divタグとの違い
要素の違い
<div> がブロックレベル要素であるのに対し、 <span> はインライン要素です。
divの場合→display: block
spanの場合→display: inline
幅と高さを指定できるか
divの場合→幅と高さを指定できる
spanの場合→幅と高さを指定しても反映されない
前後に改行が入るか
divの場合→まとまりの前後に改行が入る
spanの場合→まとまりの前後に改行が入らない
どんなときに使うの？
以上のことから、spanタグは文字の装飾などデザインの一部を変更したいときに重宝するようです。
例えば・・・
- 文章の一部の文字色を変えたいときに！
- 文字に下線を引きたいときに！
使い方は？
例として、一部の文字色をかえたい場合のhtmlを書いてみました。
<p>ここに<span class="red">テキストが</span>はいります。</p>
.red {
color: #ff0000;/*色を赤色に*/
}まとめ
今回はHTMLのspanタグについて調べてみました！
個人的にはdivタグとの違いが面白くて、spanタグが文字の装飾で重宝される理由がよく分かりました！
似たようなタグでも、各々の特徴を理解して、適切な使い方をしていきたいですね。
コメント