【spanタグ】特別な意味はもたないけど装飾などに便利！テキストを部分的にマークアップしてみよう！

2022年8月11日 2022年8月10日

nobreco

★タグの特徴

・タグのカテゴリ ―― インライン要素。

・コンテンツモデル ―― フローコンテンツ・フレージングコンテンツ・パルパブルコンテンツ。

・タグの省略 ―― 不可。
（開始タグと終了タグが必要）

・使用可能な親要素 ―― フローコンテンツ・フレージングコンテンツを許容するすべての親要素。

・グローバル属性のみを持つ。

・ARIAロール ―― 標準でのARIAロールはなし。

の説明

タグとは

マークアップした範囲内のテキストに、CSSでの装飾を目的に「id属性」や「class属性」を指定して使用するタグです。

その他にも「lang属性」で部分的に扱う言語を変更したり、「style属性」で要素に直接CSSを記述する使用方法などがあります。

このタグ自体に役割といえるものはなく、意味を持たずにただテキストをマークアップするためにあるものです。

使用目的

主な使用目的は囲んだテキストなどのデザイン装飾をするためです。

タグの開始タグにid属性やclass属性を付与することで、個別にデザイン変更可能になり、装飾の微調整に便利で使い勝手が良いのが特徴です。

同じようなタグに<div>要素がりますが、こちらはブロックレベル要素になり、箱のようなイメージで他の子要素を内包するものです。タグのインライン要素は、その箱（div要素）に内包された子要素のテキスト内の一部分をマークアップしたりするものです。

便利だけど、デザイン装飾には制限がある。

インライン要素には、「上下左右・幅・高さ」のプロパティは指定できない。

なぜできないのか？

これには「ブロックレベル要素」と「インライン要素」の特性の違いが関わっているのです。

　一番大きな違いとして、ブロックレベル要素が縦方向に並ぶのに対して、インライン要素は横方向に並ぶ性質があります。さらにインライン要素はブロックレベル要素の中で使われるもので、主にテキスト（文章）の一部に使用されます。

　例えば、ブロックレベル要素は縦に積み上がっている大きな箱のイメージで、インライン要素はその箱の中に横並びになっている中身（テキスト）を包む小さな袋のようなものです。

　ブロックレベル要素は中身（テキスト）を入れるための容量を自由に指定できるようにしてあります。一方、インライン要素は中身であるテキストの大きさが決まっていますので、それに合わせて袋で密封するというイメージになります。

　なので、インライン要素は下記にあるリストのように「上下左右・幅・高さ」など箱のサイズ変更に関係するプロパティを指定することはできませんので覚えておきましょう！

★インライン要素で指定できないレイアウト

widthプロパティ（幅）
heightプロパティ（高さ）
paddingプロパティ（内側の余白・上下左右）
marginプロパティ（外側の余白・上下左右）

テキストのwidth（幅）とheight（高さ）のサイズは文字数やコンテンツの大きさに合わせて決められます。

タグでは主に下記のようなCSSプロパティが使用されています。

よく使われるCSSプロパティ

font-sizeプロパティ（テキストの太さ）
colorプロパティ（文字の色）
backgroundプロパティ（背景色）
font-familyプロパティ（書体）

使用上の注意点

① なにか役割や意味があるタグではない。

基本的には、文章内でデザイン装飾を個別に反映させたい場合などに使います。

② 他の適切なタグで表現できる場合はそちらを優先する。

　便利なので使う機会が多くなるかと思います、勿論、装飾目的で使用するのはありです。ですが上記で述べたようにこのタグには意味がりませんので、意味的なマークアップをしなくてもよい場合にだけ使用しましょう。そうでなければ、他の適切な意味を持ったタグで囲んでください。その方が検索エンジンなどのアピールには有効です。

③ 「外側・内側の余白」「幅・高さ」などのプロパティは指定できない。

タグはインライン要素ですので、自動的にマークアップしたテキストの大きさそのものに準じます。これはテキスト（や<h>など）や画像（img）などの要素サイズが、box-sizingで予め決められており、その値に初期値でcontent-boxが適用されているためその要素に合わせた大きさになるわけです。

もしも余白を設けたい場合

タグで囲んだ範囲のテキストなどの幅（width）や高さ（height）、外側の余白（margin）や内側の余白（padding）の変更には、CSSで{display: inline-block;}を指定します。

使い方は、の開始タグの中にclass属性やid属性を指定して、CSSで次のルールセットを記述します。

例えば開始タグに、 を指定するとします。

次にCSSを記述する場所に.size {display: inline-block;}を指定していきます。

最後は、{display: inline-block;}の中に、後続して変更したい項目のプロパティ：値に数値と単位；を宣言すれば変更は可能になります。