問題
10spanタグでstyleを指定してみよう
この問題では、HTMLで頻繁に登場するspanタグについて学習していきます。 spanを使えるようになれば、細かい部分だけにCSSでスタイルを指定できるようになります。 問題に挑戦して、spanタグの知識を深めていきましょう!
HTMLの問題に挑戦しよう！
問題
「spanタグでstyleを指定してみよう」
spanタグを使ってstyleを指定してみましょう。
'ninjacode'の部分だけを赤字にして強調させてみましょう。
あらかじめエディタに書くコード
<p>
とにかく手を動かして学習するninjacodeを始めてみよう!
</p>
¥HTML¥
期待する画面
解答と解説（spanタグでstyleを指定してみよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
spanで特定の文字列だけにstyleを適用させるには、styleをあてたいテキストをspanタグで囲います。
今回であれば、'ninjacode'を囲い、CSSのstyle指定と同じ方法で赤の文字色を指定します。
CSSについてはCSSの問題集でじっくり解説しているので、HTMLの基礎が身についたらチャレンジしてみましょう。
ポイント
spanタグとは
spanタグとは、テキストなどのコンテンツを際立たせてデザインの微調整をしたり、グループ化する際に使用するとても汎用的なHTMLのタグです。
また、spanタグはインライン要素にあたりますが、ブロック要素のdivタグと用途が似ています。
一方でspanタグの不適切に使用すると、デザイン崩れに繋がります。
具体的には、高さや横幅、余白を調整したいコンテンツにspanタグを使ってマークアップした場合などにspanタグはインライン要素なので高さや横幅、余白を指定するCSSのプロパティ（widthやheight、marginなど）が効きません。
その結果、コンテンツサイズが大きすぎたり、小さすぎたり、距離が近すぎたりといった問題が発生し、ユーザーが読みづらいコンテンツになってしまう可能性があります。
このような状況を回避するために、spanタグを適切に使用してユーザーにとって分かりやすいコンテンツを心掛けましょう。
spanタグを使ったスタイル指定の方法
spanタグを使ってスタイルを指定する場合は主に、style属性を使う方法とCSSと連携して使う方法があります。
HTML上のみでスタイルを使用する場合は、style属性を使用してCSSを定義します。
CSSと連携して使用する場合は、html上でclass属性またはid属性を指定します。
一箇所のみのスタイル指定であれば、id属性を使いましょう。
