例えば、エントリーのタイトルに使われている
<h3 class="title">hogehoge</h3> というタグ。hogehoge という文字の色や大きさを変えたい場合は、スタイルシートに以下の記述をすればいい。
h3 {
font-color : #ff0000 ; /* 文字色を赤に変更 */
font-size : 20px ; /* 大きさを 20px に変更 */
} または
.title {
font-color : #ff0000 ; /* 文字色を赤に変更 */
font-size : 20px ; /* 大きさを 20px に変更 */
} なぜ、このような方法が 2 つ存在するかというと、この <h3> のタグには class 属性として、title という名称が使われているからです。注意として、指定したタグや class 、id が他にも存在する場合は、それらも同時に変更されてしまいます。
<h3 class="title">hogegoge</h3> <-- *1
<h3>hogehoge2</h3> <-- *2
*1 だけを変更するには、
.title {
font-color : #ff0000 ;
font-size : 20px ;
}
と記述すること。以下は駄目。
h3 {
font-color : #ff0000 ;
font-size : 20px ;
}
駄目な理由は、*1 だけじゃなく *2 も変更の対象になるからです。 事後になりましたが、id と class の属性に割り当てる場合は、それぞれの名前の先頭に記号を入れなければなりません。
<div id="hogehoge">
というタグで、id 属性に指定したい場合、
#hogehoge {
font-color : #ff0000 ;
font-size : 20px ;
}
といった具合に、文字列の先頭に "#" を付属します。
<p class="hogehoge">
というタグで、class 属性に指定したい場合は、
.hogehoge {
font-color : #ff0000 ;
font-size : 20px ;
}
といった具合に、文字列の先頭に "." を付属します。
タグそのもの（ <a> や <img> など）に指定する場合は、先頭に何も付属させる必要はありません。とりあえず概要をサラッと説明しましたが、本当はこれよりも最初に知らないといけないことがあったりします。昨晩、いろいろとサイトを巡回しましたが、CSS の紹介がされているサイトが目立ちました。しかし、「こうすればこうなる」といったような説明が多く、仕組みを教えているサイトというのは皆無に等しかったので、今回あえて記事にしました。
最初にスタイルシートの記述を覚えるよりも、仕組みを覚えた方がその人の今後の為にもなると思います。だって、数学の公式を多く覚えるよりも、その公式が成り立つ理由を知った方が余計な記憶をせずに済むわけですからね。
この記事で CSS の仕組みを知ってもらって、皆さんが自立的にデザインできるようにお役立てできれば嬉しいです。誰かの真似じゃなくて、一人一人がオリジナルのデザインを用いれば個性あふれるブログページができ、ブログを巡回するのも楽しみのひとつになるのでは？と思います。