<ここから文節の分類・グループ化>
この２つの要素自体はそのままつかうとこれといった意味を持ちません。
<ここまで文節の分類・グループ化>
<ここから文節の分類・グループ化>
ですが、意味を持たないからこそ様々な用途に使えるのです。
<ここまで文節の分類・グループ化>
<ここまで文章の分類・グループ化>
文章の分類、グループ化「div要素」
文章を分類、グループ化、一区切りにする必要があるときがあると思います。
そういった場合には「div要素」を使います。
<div>と</div>で囲んだ範囲が一つの文章のグループとなります。
この「div要素」、そのまま単体で使用した場合はブラウザ上の表示では特にこれといった効果はありません。
しかし、実は文字の色や形、背景など見た目を変えるためにとても重要な要素なのです。
ちなみに、「div要素」の「div」はdivisionの略で、分割や区分といった意味があります。
表示を変化させる「style属性」
「div要素」でブラウザ上の表示を変えるには「style属性」を使います。
この「style属性」はその要素内だけで有効になる「スタイルシート」というものを指定します。
スタイルシートの詳細についてはまたの機会に説明しますが、ここでは文字の色、背景を変える方法を簡単に説明します。
文字の色を変える、colorプロパティ
まずは「div要素」を使って文字の色の変え方の簡単な説明をします。
「div要素」を使って文字の色を赤に変えるには、
<div style="color:#FF0000;">
もしくは、
<div style="color:red;">
と記述します。
「color:#FF0000」、「color:red」で文字の色を赤にしなさいと記述しているわけです。
「color」の部分はプロパティといって、色の情報をもっています。それを今回の場合は赤に書き換えています。
#FF0000とは２ケタの１６進数でそれぞれ赤、緑、青の光の三原色を指定しています。
#00FF00では緑、#0000FFでは青、#FFFFFFならば白、#000000。
わかりやすく色付けをするならば、#FFFFFFとなります。
「color:red」のredはもうお分かりですね。色名を直接指定しています。
blueなら青、greenなら緑になります。
また、色を透明にする場合は、「transparent」と指定します。この場合、文字が透明になって見えなくなります。
なお、色名なら何でも指定できるというわけではなく、指定できる色にはきちんと決まりがあります。
詳しくはHTMLなどの標準化を進めているW3Gのサイト(http://www.w3.org/TR/css3-color/#svg-color)に掲載されていますので、それをご覧ください。
最後の「；」は区切り文字で、プロパティへ対する値の指定を区切るために記述します。これで複数のプロパティへの値を指定することができるようになります。
背景色を変える、background-colorプロパティ
文字の色を変えることができるなら、文字の背景色も変えることができます。
「div要素」を使って文字の背景色を赤に変えるには、
<div style="background-color:#FF0000;">
もしくは、
<div style="background-color:red;">
と記述します。
上で説明した、colorプロパティと使い方が同じで、プロパティだけ違うので使い方はもうお分かりでしょう。
colorプロパティで色を透明にする「transparent」も指定できます。
最後に、文字の色を赤、背景色を青に変えるには、
<div style="color:#FF0000;background-color:#0000FF;">
もしくは、
<div style="color:#red;background-color:blue;">
と記述します。
文節の分類、グループ化「span要素」
「div要素」は、文章を分類、グループ化する要素でしたので、短い文を分割、グループ化することには使いません。
短い文を分類、グループ化するには「span要素」を使います。
<span>と</span>で囲んだ範囲が一つの文節のグループとなります。
この「span要素」、そのまま単体で使用した場合は「div要素」と同じで、ブラウザ上の表示では特にこれといった効果はありません。
しかし、実は文字の色や形、背景など見た目を変えるためにとても重要な要素なのも「div要素」と同じです。
ちなみに、「span要素」の「span」は、短期間といった意味があります。
表示を変化させる「style属性」
「span要素」は「div要素」と同じようにブラウザ上の表示を変えるに「style属性」を使います。
この「style属性」はその要素内だけで有効になる「スタイルシート」というものを指定します。
詳細についてはまたの機会に説明しますが、ここでは「div要素」と同じように、文字の色、背景を変える方法を簡単に説明します。
文字の色を変える、colorプロパティ
「span要素」は「div要素」と同じように文字の色を変えることができます。
「span要素」を使って文字の色を赤に変えるには、
<span style="color:#FF0000;">
もしくは、
<span style="color:red;">
と記述します。
プロパティと値の詳しい説明は、「div要素」の説明の「文字の色を変える、colorプロパティ」をご覧ください。
背景色を変える、background-colorプロパティ
「div要素」と同じように、「span要素」でも文字の背景色も変えることができます。
「span要素」を使って文字の背景色を赤に変えるには、
<span style="background-color:#FF0000;">
もしくは、
<span style="background-color:red;">
と記述します。
「div要素」と「span要素」の使い方の違い
「div要素」と「span要素」はとてもよく似ている要素なのですが、使い方が異なります。
「div要素」は、長い文章を区切るために使い、「span要素」は短い文を区切るために使います。
具体的に言うと、段落が入るかどうかです。「div要素」は「p要素」を中に入れることができますが、「p要素」は「span要素」を入れることができません。
さらに、「p要素」は「span要素」を中に入れることができますが、「span要素」は「p要素」を入れることができません。
また、「div要素」の中に「span要素」を入れることはできますが、「span要素」の中に「div要素」を入れることはできません。
ですので、中に「p要素」「span要素」が入るならば「div要素」を使い、「div要素」、「p要素」の中で使うのであれば、「span要素」を使うようにしましょう。
なお、「div要素」の中に「div要素」は入れることができます。「span要素」の中に「span要素」を入れることもできます。
サンプル
今回説明した、「div要素」「span要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>～</body>)に書いてください。
サンプルソースコード
<div style="color:white;background-color:black;"> <p> 光の三原色と色の混合<br> <span style="background-color:#FF0000"> 赤(red) </span><br> <span style="background-color:#00FF00"> 緑(green) </span><br> <span style="background-color:#0000FF"> 青(blue) </span><br> <span style="color:black;background-color:#FFFF00"> 赤＋緑 </span><br> <span style="color:black;background-color:#FF00FF"> 赤＋青 </span><br> <span style="color:black;background-color:#00FFFF"> 緑＋青 </span><br> <span style="color:black;background-color:#FFFFFF">赤＋緑＋青</span><br> </p> </div>
表示結果
光の三原色と色の混合
赤(red)
緑(green)
青(blue)
赤＋緑
赤＋青
緑＋青
赤＋緑＋青
「div要素」「span要素」のまとめと次回記事について
今回説明した「div要素」「span要素」はいかがでしたでしょうか。
要素そのものにはこれといった意味はなくても、このように表示の仕方を変えるためなどには、とても重要な要素であることがわかっていただけると思います。
ですのでこの要素は絶対に覚えておいてください。
次回は、区切りを表す「hr要素」の説明をします。
以上、当サイト管理人のAsterismでした。