⇒【東証プライム企業も多数利用！】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは？
コンテンツを見やすくデザインする際に使用するタグには、spanタグというものがあります。しかしspanタグには類似したタグもあるので、いまいち使いこなせていないという方もいるのではないでしょうか。
この記事では、spanタグがHTML上で持つ意味や役割、実際の活用方法を解説します。
1．HTMLのspanタグが持つ役割とは？
spanタグは、囲んだ要素だけデザインを変更する時に使うタグです。
spanタグを使うことで、読み込んでいるスタイルシート上で、色やフォントを他の部分とは別に変更することができます。
例えばHTML上でspanタグで指定した要素は、個別に色やフォントをCSSのスタイルシートで変更ができます。
つまり、HTML上でspanタグはCSSなどのスタイルシートで変更する箇所を示しており、このタグ自体は意味を持っていません。
コードは以下のようになっています。
sample.html
<!DOCTYPE html>
<html>
<head>
<title>spanタグの使い方</title>
<link rel=”stylesheet” href=”sample.css”>
</head>
<body>
<div>
ここが<span class=”change”>spanで指定しているところ</span>です
</div>
</body>
</html>
sample.css
div{
width:500px;
height:100px;
background-color:#337079;
color: white;
}
.change{
color:#cab64a;
}
このようにspanタグで囲った部分だけ変更することが可能になります。
HTML上で指定するだけでは意味はなく、その部分をCSSなどのスタイルシートで変更することで表示内容が変わります。
2．似ている要素 div, pとの違いとは？
spanタグと使い方が似ているdivタグ<div>とpタグ<p>について解説します。
divタグとpタグのspanタグとの使い方がわからず、つまずくプログラミング初心者が多いです。
この３つの違いは、そもそもの要素の種類が違うことです。
HTMLの要素にはブロック要素・インライン要素・インラインブロック要素の3種類があります。
これらは、width/heightの指定ができるかどうかや並び方が異なります。
〇ブロック要素とインライン要素の違い
ブロック要素
- 高さや幅の指定ができる
- 余白の指定ができる
- 横いっぱいに広がる＝要素が縦並び
インライン要素
- 高さや幅の指定ができない
- 余白の指定は左右のみできる
- 要素は横に並んでいく
2-1．ブロック要素のdivタグとpタグ
まず、ブロック要素とは名前の通り、１つの塊を表す要素です。
例えば、文章そのもの全体や図、表などです。
ブロック要素はコンテンツを一つにまとめる働きを持っており、幅や余白の変更ができます。
divタグ<div>はブロック要素で、このタグに囲まれた部分は一つのまとまりとなり、divタグ自体は意味を持ちません。
pタグ<p>もブロック要素であり、文章に段落をつけるタグで、文章のまとまりを作っています。
どちらのタグも、まとまり全体に対しての効果を指定することになります。
2-2．インライン要素のspanタグ
他の要素とまとまりとして区切るブロック要素とは反対にインライン要素とは、ある一部を指定して効果を表す要素です。
例えば、文章の中の一文字や一文のような、一部分を示すことができるタグのことです。
spanタグがこのインライン要素に該当します。
インライン要素のため、spanタグでは指定した部分だけを変更することができ、ブロック要素のようにまとまりを作ることはありません。
これさえ覚えておけば混乱することはないでしょう。
3．spanタグの使い方
spanタグはインライン要素というだけあって、使用するにあたって少し特徴があります。
この特徴をよく知った上でhtmlに無駄のないすっきりとした記述を目指しましょう。
3-1．基本的な使い方
spanタグの基本的な使い方は主に2パターンです。
HTML上で使う場合は、style属性を指定する
CSSと連携して使う場合は、class属性やid属性を指定する
HTML上で使う場合は、style属性を指定する
HTML上で使う場合は、html上で直接cssを適用できるstyle属性を指定します。
指定したstyle属性でcssを定義してデザインします。
ホームページの順位を上げるために<span style=”color:#FF0000; font-weight:bold;”>SEO対策が重要</span>です。
CSSと連携して使う場合は、class属性やid属性を指定する
CSSと連携して使う場合は、html上でclass属性やid属性を指定します。
html上で指定したclass属性やid属性をcssで定義してデザインします。
cssの記述では、「要素名.クラス名もしは#id名 {プロパティ名:値;}」という書式です。
※要素名は省略できます。
ホームページの順位を上げるために<span class=”seotext”>SEO対策が重要</span>です。
span.seotext {
color:#FF0000;
font-weight:bold;
}
ホームページの順位を上げるために<span id=”seotext”>SEO対策が重要</span>です。
span#seotext {
color:#FF0000;
font-weight:bold;
}
idは数種類用意していても1ページにつきそれぞれ1回の使用となる点がclass属性とは異なります。
例えば#sampleというidがあったとします。これを1ページ内に複数使用しないということです。
その中に入るclassは同じ要素名であったとしても複数使用しても問題ありません。
ただ、そうしなければ表示されないわけではなく、あらゆるコンテンツをグルーピングするといった意味を持つと言うとわかりやすいかもしれません。
ページ内リンクで指定するidがページ内に複数あれば困ってしまいますよね？そういった意味でも正しく記述しておくと良いでしょう。
3-2．文字色・背景色を指定
「color」プロパティに値を入れて、文字色が指定できます。
「background-color」プロパティに値を入れて、背景色が指定できます。
span {
color:#FFF;/*文字色を白*/
background-color:#000;/*背景色を黒*/
}
3-3．右寄せにする
spanタグがインライン要素のためこのままでは、「右寄せ」を指定しても無効となります。
spanタグにcssを適用し、「display」プロパティにblock値を入れて、ブロック要素に切り替えることで「右寄せ」が有効になります。
span {
display:block;
text-align:right;/*右寄せ*/
}
3-4．横幅を指定する
spanタグは“インライン要素”のため、デフォルトでは「width」を指定しても無効となります。
横幅を指定したい場合は、cssで「display」プロパティにblock値を記述してブロック要素に変更します。
このようにspanはインライン特有の表現があるため、ブロック要素にすることで、「width」が有効になります。
span {
display:block;
width:100px;
}
3-5．文字サイズを指定する
「font-size」プロパティに値を入れて、フォント（文字）サイズが指定できます。
フォントサイズはpx、em、％などの単位で指定します。
span {
font-size:16px;
}
3-6．marginを指定する
spanタグのmarginは左右の指定のみが有効となります。
上下のmargin指定を有効にするには、spanタグにcssを適用し、「display」プロパティにblock値を入れて、ブロック要素に切り替えます。
ブロック要素にすることで、上下のmargin（余白）指定も有効になります。
span {
display:block;
margin:50px 30px 50px 10px;/*上 右 下 左*/
}
3-7．spanの入れ子について
spanタグに入れていいのはインライン要素のみとなり、主にspanタグやaタグが入ります。
そしてspanの中にspan、そしてさらにその中にspanといった入れ子で使用しても問題ありません。
spanタグの中にブロック要素であるdivタグやhタグなどは入れることはできません。
pタグはブロック要素なため、spanタグの中に入れてもページを表示してみると外に出てしまいます。
インライン要素とブロック要素を使い分けで正しく記述しましょう。
<span>ホームページの順位を上げるために<span>SEO対策が重要</span>です。</span>
3-8．spanタグの縦並びと横並びについて
spanタグはインライン要素のため、spanタグで括られた内容を続けて記述しても横並びに表示されてしまいます。
これを縦並びにさせるには、spanの「display」プロパティにblock値を入れて、以下のようブロック要素に切り替える必要があります。
span {
display:block;
}
4．まとめ
spanタグは、文章内で囲った一部分の文字の色や大きさを変えたり、下線を引く際に使用するものです。spanタグに似たdivタグやpタグとの違いがわかっていないと、使い方に戸惑うかもしれません。正しい使い方や役割を覚えることで記事にメリハリが付き、読み手に伝えたいことを印象付けることができます。
とても汎用性の高いタグなので、ぜひコンテンツ作成に役立ててみてください。
⇒【東証プライム企業も多数利用！】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは？
