オリジナルテンプレートへの道のり

■ HTMLタグをCSSタグで装飾する
あの人気ブログ「動画の桜」の運営者エロ流さんによるデザイン講座第三回目です。

【今回のお題】 前回はセレクタ、属性、値について学びました。たとえば、

body {
color: #cccccc;
}
というCSSのタグがあった場合、bodyはセレクタcolorは属性、そして#ccccccは値となるというお話でした。 今回はその三つを使用して、具体的にCSSを記述してみましょう。

CSSを記述してみよう

■ HTMLタグをCSSで装飾してみる
HTMLタグで最もよく使う、<body>タグをCSSで装飾してみましょう。 例えば「テキスト色をグレー(#cccccc)」、「背景色を白(#ffffff)」、「背景画像を配置(image.gif)」 というような装飾をする場合、従来は<body>タグに直接スタイルを指定する必要がありました。

HTMLファイル -----------------------------------------
<body text="#cccccc" bgcolor="#ffffff" background="image.gif">
-------------------------------------------------------

しかし、CSSを利用すれば<body>タグには何も指定する必要はありません。 以下のように<body>のままでよいのです。

HTMLファイル -----------------------------------------
<body>
-------------------------------------------------------

しかし、このままでは装飾したことにはなりませんので、CSSファイルにbodyタグの装飾スタイルを指定してあげます。bodyというセレクタに対して、スタイル属性と値を記述してみましょう。

CSSファイル -----------------------------------------
body {
color: #cccccc;
background-color: #ffffff;
background-image: url(image.gif);
}
-------------------------------------------------------

このように、記述方法はHTMLとは少し異なりますが、従来は<body>タグに直接指定していたスタイルを、CSSで指定しているのです。

セレクタは独自で作る事も可能です!

例えば、<body>タグは一つのHTMLファイルの中で一度しか出てきませんが、<p>タグなどは複数回出てくる可能性が高いですよね。以下のようにCSSで<p>タグの色を指定してしまうと、全ての<p>タグが 同じ色になってしまいます。

CSSファイル -----------------------------------------
p {
color: #cccccc;
}
-------------------------------------------------------

そこで登場するのが「class」属性です。この属性を使えば、あらゆるタグに自由に名前をつけることが可能です。ブログのHTMLファイルを見るとよくわかりますが、この「class」属性は何度も登場しています。

例えば、以下のように、阪神とロッテという文字が<p>タグで囲まれているとします。

HTMLファイル -----------------------------------------
<p>阪神</p>
<p>ロッテ</p>
-------------------------------------------------------

以下のように、<p>タグの色を阪神カラーの黄色(#FFCC00)に指定してしまうと、ロッテの文字まで黄色になってしまいます。

CSSファイル -----------------------------------------
p {
color: #FFCC00;
}
-------------------------------------------------------

それでは困りますので、阪神の文字は黄色に、ロッテの文字は黒にしてみましょう。「class」属性を使用して、<p>タグにオリジナルの名前をつけてみましょう。記述方法は、class="好きな名前"となります。

HTMLファイル -----------------------------------------
<p class="tigers">阪神</p>
<p class="marines">ロッテ</p>
-------------------------------------------------------

"tigers"という<p>タグと、"marines"という<p>タグが出来上がりました。このように一つのタグに対してCSSで異なった装飾を施したい場合は、class属性を使って2つのスタイルを作ってあげましょう。

では、この2つの<p>タグをCSSで装飾してみましょう。"tigers"のテキストは黄色(#FFCC00)に、"marines"のテキストは黒色(#000000)に指定してみましょう。

CSSファイル -----------------------------------------
.tigers {
color: #FFCC00;
}
.marines {
color: #000000;
}
-------------------------------------------------------

ここで注意して頂きたいのは、「class」属性を使用してオリジナルの名前を作った場合、必ずセレクタの先頭に「.(ドット)」をつけてください。

こうして、同じ<p>タグでも、別々の装飾をすることができました。

CSSで一度指定すれば何度でも使える!

さて、先ほど阪神とロッテの色を指定したCSSですが、実は<p>タグ以外でも使えてしまうんです。例えば、<h2>タグで使う場合は、以下のように指定してやればよいのです。

HTMLファイル -----------------------------------------
<h2 class="tigers">阪神</p>
<h2 class="marines">ロッテ</p>
-------------------------------------------------------
次回予告
ということで、今回はここまで。CSSでの装飾に続き、次回はさらなる記述のテクニックです。

エロ流さんプロフィール

名前: HARU(ハル)
職業: ITベンチャー勤務、3流フォトグラファー
趣味: 写真、読書、3流映画鑑賞、一人温泉旅
夢: フォトグラファー