ログイン
問題10

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

この問題では、HTMLで頻繁に登場するspanタグについて学習していきます。 spanを使えるようになれば、細かい部分だけにCSSでスタイルを指定できるようになります。 問題に挑戦して、spanタグの知識を深めていきましょう!

アイコン画像

本のアイコン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属性を使いましょう。

HTMLの問題に挑戦しよう!

以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの第一歩となるでしょう。

問題10:spanタグでstyleを指定してみよう

spanタグを使ってstyleを指定してみましょう。

'ninjacode'の部分だけを赤字にして強調させてみましょう。

エディターのアイコンあらかじめエディタに書くコード

                <p>
  とにかく手を動かして学習するninjacodeを始めてみよう!
</p>
¥HTML¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <p>
  とにかく手を動かして学習する<span style="color: red;">ninjacode</span>を始めてみよう!
</p>
¥HTML¥
            

コメントのアイコン解説

spanで特定の文字列だけにstyleを適用させるには、styleをあてたいテキストをspanタグで囲います。
今回であれば、'ninjacode'を囲い、CSSのstyle指定と同じ方法で赤の文字色を指定します。
CSSについてはCSSの問題集でじっくり解説しているので、HTMLの基礎が身についたらチャレンジしてみましょう。
ログインして解答を見る
HTMLを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる