spanタグでstyleを指定してみよう

spanタグとは、テキストなどのコンテンツを際立たせてデザインの微調整をしたり、グループ化する際に使用するとても汎用的なHTMLのタグです。
また、spanタグはインライン要素にあたりますが、ブロック要素のdivタグと用途が似ています。

一方でspanタグの不適切に使用すると、デザイン崩れに繋がります。
具体的には、高さや横幅、余白を調整したいコンテンツにspanタグを使ってマークアップした場合などにspanタグはインライン要素なので高さや横幅、余白を指定するCSSのプロパティ（widthやheight、marginなど）が効きません。
その結果、コンテンツサイズが大きすぎたり、小さすぎたり、距離が近すぎたりといった問題が発生し、ユーザーが読みづらいコンテンツになってしまう可能性があります。

このような状況を回避するために、spanタグを適切に使用してユーザーにとって分かりやすいコンテンツを心掛けましょう。

spanタグを使ってスタイルを指定する場合は主に、style属性を使う方法とCSSと連携して使う方法があります。

HTML上のみでスタイルを使用する場合は、style属性を使用してCSSを定義します。
CSSと連携して使用する場合は、html上でclass属性またはid属性を指定します。
一箇所のみのスタイル指定であれば、id属性を使いましょう。