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