【html】spanタグの使い方を解説

【html】spanタグの使い方を解説

この記事では、htmlでspanタグを使う方法について説明します。

 

spanタグの使い方

spanタグは、汎用的な目的で使用できるhtmlタグです。

段落の中にある一部のテキストのスタイルを変更したい時などに、スタイルを適用させる範囲を指定するために使います。

たとえば、目立たせたい部分の文字色を変える、下線を引くなどしてデザインを調整したい場合に、以下のようにspanタグで範囲を指定しstyle属性でスタイルを適用させることが可能です。

spanタグは、<span style="color: blue;">段落の一部の文字のスタイル</span>を変更する時に使います。

もしくは、外部ファイルでCSSを読み込む場合は、class属性を使い、以下のように記述してスタイルを適用することもできます。

spanタグは、<span class="sample">一部の文字のスタイル</span>を変更する時に使います。
.sample {
color: blue;
}

ブラウザ上の表示

spanタグは、一部の文字のスタイルを変更する時に使います。

 

divとの違い

次に、spanタグとdivタグの違いについて説明します。

spanタグと同じような使い方ができるhtmlタグに、「div」タグがあります。

divタグとspanタグは同じような使い方ができるため、理屈だけ見ると違いが分かりにくいように思われますが、spanタグはインライン要素divタグはブロック要素という違いがあります。

つまり、spanタグで構成されたボックスはwidthやheightで幅や高さを指定できず、横並びに表示されるため、一部の文字のスタイルを変える目的でよく使用されます。

逆にブロック要素はwidthやheightで幅や高さを指定することが可能で、縦並びに表示されるブロックとして構成されるため、まとまったコンテンツの背景色を変えて目立たせたり、囲み枠をつくったりする場合に使います。

spanタグとdivタグの違い

spanタグ:部分的にテキストのスタイルを変えたい時に使う

divタグ:あるひとかたまりのコンテンツの範囲を指定してスタイルを適用したい場合に使う

たとえば、この記事を例にしてみると、文章の一部を目立たせるために下線を引いている部分がありますが、この部分はspanタグを使って範囲を指定しスタイルを適用しています。

<span class="marker">spanタグはインライン要素</span>、<span>divタグはブロック要素</span>です。
.marker {
border-bottom: 3px solid #95C8FF;
font-weight: bold;
}

ブラウザ上の表示

spanタグはインライン要素divタグはブロック要素です。

 

それに対して、あるひとかたまりのコンテンツを囲み枠を使って目立たせたい時にはdivタグを使います。

<div class="box">
spanタグはインライン要素、divタグはブロック要素です。
</div>
.box {
background-color: #e5e5e5;
border-left: 20px solid #55A5FF;
width: 400px;
height: 100px;
padding: 10px;
}

ブラウザ上の表示

spanタグはインライン要素、divタグはブロック要素です。

 

まとめ

以上、htmlでspanタグを使う方法について説明しました。

spanタグは汎用的な使い方ができ、一部分のテキストの範囲を指定して、背景色や文字色などのスタイルを適用させる時に使います。

divタグも理論上は同じような使い方をするタグですが、divタグはブロック要素のためインライン要素であるspanタグとは違った使い方をします。

使い方に迷った時には参考にしてみてください。

htmlの書き方カテゴリの最新記事