シリーズ第8回は、文章の一部分にスタイルを指定する方法です。特定の要素全体ではなく、一部分だけにスタイルをあてたいということはよくあります。その場合、どのようにHTMLやCSSで記述できるでしょうか。関連して、ブロックレベル要素とインライン要素の違いについてもかんたん解説します。
span要素を使う方法
スタイルを適用したい文章の一部分をspan要素で囲みマークアップします。方法は簡単です。
上の画像のように、index.htmlファイルのbody内にあるmainレイアウトの中にh1とpを記述しました。両方の文章に含まれる「プログラミング」という文字だけにスタイルを指定してみます。
単純にスタイルを適用したい文字をspan要素で囲みます。今回の場合「プログラミング」という文字です。後はCSSでスタイルを指定するだけです。
上の画像のように、stylesheet.cssファイルに記述します。span要素をセレクタにし、プロパティ部分で文字色をblue（青色）に指定しています。ファイルをアップロードして表示を確認してみましょう。
指定した通り「プログラミング」という文字だけが青色になっているのを確認できます。今回はspan要素全体にスタイルを指定したので、h1もpも同じスタイル（文字色：青白）になりました。
span要素にclassをつけることも可能です。h1とｐに別のclass名をつけてそれぞれにスタイルを指定すれば、別々の文字色にすることが可能です。class名の記述方法やCSSでのスタイルの指定については、シリーズ第6回で解説してます。
ブロックレベル要素とインライン要素
ここで関連情報として、HTML要素の分類について簡単に触れておきます。大きく分けて2種類に分類できます。
- ブロックレベル要素
- インライン要素
一言で言えば、改行される要素と改行されない要素です。
ブロックレベル要素
前後で改行が入り、親要素と同じ幅に広がります。
例：div要素、h1要素、p要素など
インライン要素
改行が入らず、文章の流れを分断せずにタグで囲まれた範囲だけを占有します。
例：span要素、a要素など
上の画像では、ブロックレベル要素を赤字、インライン要素を青字で示しています。
ですから、基本的にインライン要素の中にブロックレベル要素を置くことはできません。こうした概念も覚えておくと良いでしょう。
詳しく知りたい方は、インライン要素/MDN サイトが参考になります。
まとめ
シリーズ記事 初心者もできる！プログラミング基礎講座【第8回】はいかがでしたか。文章の一部分にスタイルを指定する方法、それに関連したブロックレベル要素とインライン要素について解説してきました。
次回は、簡単なお問い合わせフォームの作り方についてです。お楽しみに！
