「b要素」の文字色を赤にする <ここまでスタイル情報>
<ここから太字>この部分が「b要素」で太字になった部分です。<ここまで太字>
スタイル情報「style要素」
いままで扱ってきたHTML要素(たとえば「div要素」「span要素」)で、表示を変化させる「style属性」というものがありました。
この「style属性」を「style要素」として指定し、後の「style属性」を省略することができます。
<style>と</style>で囲った範囲に他のファイルへ移動する機能を加えることができます。
「style要素」の中は、スタイルシートと呼ばれる記述の仕方で記述します。
スタイルシートの詳細はこのページでは触れませんが、簡単な書き方のみ触れておきます。
たとえば、「b要素」の文字色を赤くする場合は以下のように記述します。
<style>
b {
color:red;
}
</style>
ちなみに、「style要素」の「style」は、形式や様式といった意味があります。
各々の要素の「id属性」で「style要素」を反映する方法
さて、一番最初に説明した方法では、HTMLファイル内のすべての「b要素」に「style要素」が反映されます。
この制限を解決するために、各々の要素の「id属性」で「style要素」を反映させることができます。
たとえば、「id属性」が"sample-id"の「b要素」のみ文字色を赤くする場合は、以下のように記述します。
<style>
b#sample-id{
color:red;
}
</style>
ただし、「id属性」の値は、1つのHTMLファイルの中に同じ値を２回以上使うことができません。
２つ以上の要素に同じスタイルを適応したいときにはとても不便です。
各々の要素の「class属性」で「style要素」を反映する方法
「id属性」と同じように、各々の要素の「class属性」で「style要素」を反映させることもできます。
「class属性」は「id属性」とは違い、1つのHTMLファイルの中に同じ値を２回以上使うことができます。
ですので、「class属性」を使用して、「style要素」を反映させたほうがよいでしょう。
「class属性」が "sample-class"の「b要素」のみ文字色を赤くする場合は、以下のように記述します。
<style>
b.sample-class{
color:red;
}
</style>
また、「b要素」だけではなく、すべての要素にこの「style要素」を適応させ、「class属性」の値が"sample-class-all"のみ文字色を赤くする場合は以下のように記述します。
<style>
.sample-class-all{
color:red;
}
</style>
このようにすることで、「strong要素」や「span要素」などで「class属性」に"sample-class-all"と指定すれば文字色が赤くなります。
疑似クラスのスタイル
「a要素」のハイパーリンクで、未訪問のリンク、訪問済みのリンク、カーソルが重なった状態のリンクなど、文字色やフォントが変わるサイトがあります(当サイトがそうです)。
こういった動作をさせるのもスタイルシートの役割で、疑似クラスと呼ばれています。もちろん、「style要素」でも指定可能です。
疑似クラスはたくさんあるのですが、今回は主によくつかわれる４つの疑似クラスについて簡単に説明します。
- :link
- 未訪問のリンクを表します。この疑似クラスは「a要素」のみ有効です。
- :visited
- 訪問済みのリンクを表します。この疑似クラスは「a要素」のみ有効です。
- :hover
- マウスカーソルが要素上にある場合を表します。リンクであれば、リンク上にマウスカーソルがある場合です。「a要素」以外でも使用可能です。
- :active
- 現在選択中の要素を表します。リンクであれば、現在選択中(リンク先に訪問中)の場合です。「a要素」以外でも使用可能です。
この疑似クラスを「a要素」すべて動作するようにする場合は、以下のように記述します。
(link：青、visited：紫、hover:赤、active:緑)
<style>
a:link{
color:blue;
}
a:visited{
color:purple;
}
a:hover{
color:red;
}
a:active{
color:green;
}
</style>
また、この疑似クラスを「a要素」の「class属性」の値が"sample-class-a"の場合のみ動作する場合は、以下のように記述します。
<style>
a.sample-class-a:link{
color:blue;
}
a.sample-class-a:visited{
color:purple;
}
a.sample-class-a:hover{
color:red;
}
a.sample-class-a:active{
color:green;
}
</style>
なお、この疑似クラスは、「:link→:visited→:hover→:active」の順番で記述する必要があります。
サンプル
今回説明した、「style要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>～</body>)に書いてください。
サンプルソースコード
<style>
b#sample-id{
color:red;
}
.sample-class-all{
color:gray;
}
a.sample-class-a:link{
color:blue;
}
a.sample-class-a:visited{
color:purple;
}
a.sample-class-a:hover{
color:red;
}
a.sample-class-a:active{
color:green;
}
span.sample-class-span:link{
}
span.sample-class-span:visited{
}
span.sample-class-span:hover{
background-color:lightgreen;
}
span.sample-class-span:active{
color:red;
}
</style>
<p>
<b id="sample-id">これは、「b要素」に「id要素」でスタイル"sample-id"を指定した例です。</b>
</p>
<p>
<em class="sample-class-all">これは、「em要素」に「class要素」でスタイル"sample-class-all"を指定した例です。</em><br>
</p>
<p>
<span class="sample-class-all">これは、「span要素」に「class要素」でスタイル"sample-class-all"を指定した例です。</span><br>
</p>
<a class="sample-class-a" href="#sample-id">このリンクは、「class要素」で疑似クラスを設定したスタイル"sample-class-a"を指定した例です。</a>
<p>
<span class="sample-class-span">これは、「span要素」に疑似クラスを設定したスタイル"sample-class-span"を指定した例です。マウスカーソルをのせてみたり、クリックしてみてください。</span><br>
</p>
表示結果
これは、「b要素」に「id要素」でスタイル"sample-id"を指定した例です。
これは、「em要素」に「class要素」でスタイル"sample-class-all"を指定した例です。
これは、「span要素」に「class要素」でスタイル"sample-class-all"を指定した例です。
このリンクは、「class要素」で疑似クラスを設定したスタイル"sample-class-a"を指定した例です。
これは、「span要素」に疑似クラスを設定したスタイル"sample-class-span"を指定した例です。マウスカーソルをのせてみたり、クリックしてみてください。
「style要素」のまとめと次回記事について
今回説明した「style要素」はいかがでしたでしょうか。
「style要素」はスタイルシートをHTMLに埋め込む要素です。
うまく使えば美しいウェブサイトが作成できると思いませんか？
次回は、HTML上でテーブル(表)を表示する「table要素」とその関連要素について説明します。
次からは難易度が高くなりますが、基本的な部分は今までのHTMLと同じですので、基礎さえできていれば理解できます。
以上、当サイト管理人のAsterismでした。