追記：
当記事がレバテック キャリア様にて紹介されました！ – レバテックキャリア
ご担当者様ありがとうございます！
やぁ。未だにビールが飲めないユトピ(@yutopi60pa)だよ。
こう毎日HTMLやCSSの解説記事を書いていくと、今まで何となく理解していた知識が、アウトプットすることによってしっかりと定着していくことを感じます。
やっぱりアウトプット大事ですよ。
さて今回はHTMLタグの「spanタグ」について解説いきますよ。
spanタグは基本的にdivタグなんかと同じ機能ですが、もちろん違いもあるのでそこを解説していこうかなと思いますぞ！
spanタグとは？
spanタグとはインライン要素のタグで、それ自体に意味はありません。このあたりはdivタグと同じですね。
divタグについてはこちらをご覧あれ。
初心者必見！レイアウトで失敗する前に”divタグ”を理解しよう。
基本的にspanタグだけ書いてもなにも表示されません。
それじゃいつ使うのでしょうか？？？
グループ化する！
spanタグには囲った範囲をインライン要素としてグループ化する機能があります。グループ化しておけばCSSやレイアウトの設定をする際に複数の内容を一括で扱えるので、便利になりますね。主に文章の一部に対して使うことが多いタグです。
divタグも同じようにグループ化する機能がありますが、spanタグと決定的に違うのが、ブロック要素かインライン要素かです。
ブロック要素とインライン要素の詳しい説明はこちらを確認してください。
・あなたは大丈夫？”ブロック要素”と”インライン要素”の違いを理解しよう。【お母さんにもできるHTML入門】
特徴だけあげると、ブロック要素は前後に改行が入り縦に並びますが、インライン要素は改行が入らず横にならんでいきます。
他にもCSSのwidth、heightの指定ができない、margin、paddingの扱いが違うなどありますが、要はタグの種類が違うため扱い方も違ってくるということです。
それでは実際に書いていきましょう！
spanタグを使おう！
spanタグでグループ化！
コード
|
1 2 |
HTML 仮面ライダー＝<span>本郷猛</span>は<span>改造人間</span>である。 彼を改造した<span>ショッカー</span>は、世界制覇を企む悪の秘密結社である。 仮面ライダーは<span>人間の自由のため</span>に、ショッカーと闘うのだ! |
結果
仮面ライダー＝本郷猛は改造人間である。 彼を改造したショッカーは、世界制覇を企む悪の秘密結社である。 仮面ライダーは人間の自由のために、ショッカーと闘うのだ!
上のデモではspanタグをそのまま使用しました。
先ほど解説したようにspanタグにはグループ化する機能以外に、見た目での変化は特に起こりません。
ですので、CSSを使ってデザインを入れていきましょう！
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
CSS #s1 { background:red; color: #fff; } #s2 { background:blue; color: #fff;} #s3 { background:green; color: #fff; } #s4 { background:gold; color: #fff; } HTML 仮面ライダー＝<span id="s1">本郷猛</span>は<span id="s2">改造人間</span>である。 彼を改造した<span id="s3">ショッカー</span>は、世界制覇を企む悪の秘密結社である。 仮面ライダーは<span id="s4">人間の自由のため</span>に、ショッカーと闘うのだ! |
仮面ライダー＝本郷猛は改造人間である。 彼を改造したショッカーは、世界制覇を企む悪の秘密結社である。 仮面ライダーは人間の自由のために、ショッカーと闘うのだ!
こんな感じで、spanタグにid名を付けてbackgroundプロパティとcolorプロパティを追加しました。
このように文章の一部をspanタグで囲めば、このような表現方法をとることができるわけですね。
spanタグの注意点
ここでspanタグのやりがちな注意点！
spanタグは文章の一部を囲ってグループ化できますが、同じようなテキスト関連のタグである「h1～h6タグ」と「pタグ」をspanタグで囲ってしまう人がいます。
例えばこんな感じ。
|
1 2 3 4 5 |
間違い× <span><h1>本郷猛について</h1></span> 間違い× <span><p>ライダー・・・変身！</p></span> |
これはHTMLの文法上間違いです！
なぜかというと、インライン要素であるspanタグに、ブロック要素であるhタグやpタグを入れることはできないからです。
特にブロック要素とインライン要素についてよく理解できていない人がやりがちなミスです。
記事でも解説しましたが、HTMの文法上、インライン要素の中にブロック要素のタグを入れることは間違いなのです。
ブロック要素にインライン要素を入れたり、インライン要素にインライン要素を入れることはできますが、上のような書き方はダメ。
ではどうすればよいのか？
解決法を2つ書いておきます。
1つ目はルールに沿って、書き直す。
|
1 2 3 4 5 |
正解○ <h1><span>本郷猛について</span></h1> 正解○ <p><span>ライダー・・・変身！</span></p> |
この書き方なら問題ないですね。
そのほかにCSSプロパティ「display」を使用したパターンがあります。
|
1 2 3 4 5 6 7 8 |
CSS span { display: block; } CSS含めて正解△ <span><h1>本郷猛について</h1></span> CSS含めて正解△ <span><p>ライダー・・・変身！</p></span> |
displayプロパティでspanタグをブロック要素に変換したので、理屈では間違いではなくなりました。
しかしHTMLだけになるとやっぱり間違いなので、できるなら1つ目のルールに従ってコーディングをしていきましょう。
このspanタグの間違いはプロでもやりがちなので、皆さんもしっかりと頭に入れておきましょう！
まとめ
以上がspanタグの解説でした。
基本的なことはdivタグと同じなので、新たに覚えることはすくないかもですが、spanタグがインライン要素だということを忘れて使っていると、バグが起きてしまうこともありますので、注意点だけはしっかりと意識しながらコーディングをしていきましょう！