初心者のためのホームページ作成動画解説付

クラスセレクタについて

違う要素に同じスタイルを用いたいとき等にクラスセレクタを使用

前回は要素pを、cssを使用してデザイン変更しました。同じように違う要素を簡単に変更することができます。
例えば、見出しに使うh4という要素があります。
<h4>初心者のためのホームページ講座もだんだんと難しくなってきました。</h4>
<h4>なんとかついていってホームページを作れるようになるぞ!</h4>
<h4>そのためには勉強は欠かせない</h4>
この3行分の背景と色を変えるには、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>初心者のためのホームページ講座</title>
<style type="text/css">
<!--
h4{background:#eeeeee;color:#555555;}
-->
</style>

</head>
<body>
<h4>初心者のためのホームページ講座もだんだんと難しくなってきました。</h4>
<h4>なんとかついていってホームページを作れるようになるぞ!</h4>
<h4>そのためには勉強は欠かせない</h4>
</body>
</html>
とやれば、

初心者のためのホームページ講座もだんだんと難しくなってきました。

なんとかついていってホームページを作れるようになるぞ!

そのためには勉強は欠かせない


上記のようになります。とここまでは前回と同じです。

ここで、各1行分だけデザインを変えたい場合はどうすればよいか(・・?)
このままでは、3行分デザインが同じに変わってしまいます。
ここで使用するのがクラスセレクタです。
クラスセレクタの使用方法は「.クラス名」になります。
このクラス名は任意ですので基本なんでもOKです。(ただし半角英数字で先頭は英字)
デザインの分かりやすい名前が一番ですね(^^)
では実際にやってみましょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>初心者のためのホームページ講座</title>
<style type="text/css">
<!--
.tama{background:#ccccff;color:#6666ff;border:dotted 5px #5555ff;padding:5px}
.tora{background:#ffcccc;color:#ff6666;border:dashed 5px #ff6666;padding:5px}
h4{background:#eeeeee;color:#555555}
-->
</style>

</head>
<body>
<h4>初心者のためのホームページ講座もだんだんと難しくなってきました。</h4>
<h4>なんとかついていってホームページを作れるようになるぞ!</h4>
<h4>そのためには勉強は欠かせない</h4>
</body>
</html>
デザインの分かりやすい名前が一番と言っておきながら、tamaとかtoraにしちゃっていますがお許しください(^^;)
使い方ですが、使用したい要素(この場合はh4)の後に半角スペースを入れ「class="XXX"」と指定します。
(XXXはクラス名)
具体的には
<h4 class="tama">初心者のためのホームページ講座もだんだんと難しくなってきました。</h4>
<h4 class="tora">なんとかついていってホームページを作れるようになるぞ!</h4>
<h4>そのためには勉強は欠かせない</h4>
です。こうすることによって同じ要素でも違うデザインにすることができます。↓↓↓

初心者のためのホームページ講座もだんだんと難しくなってきました。

なんとかついていってホームページを作れるようになるぞ!

そのためには勉強は欠かせない

3行目はクラスセレクタを使用していないので、背景だけ灰色となってます。
(h4{background:#eeeeee;color:#555555})
さあ、いかがでしょうか?
簡単にcssを説明しましたが多少は理解できたでしょうか?
いろいろなプロパティを覚えればデザインの幅が拡がります(^^)


このエントリーをはてなブックマークに追加

(゜д゜メ)ゴルァ
???と言う方へ
下記をコピペしてみてください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>初心者のためのホームページ講座</title>
<style type="text/css">
<!--
.hogehoge1
{
margin:5px;margin-bottom:35px;color:#aaaaff;font-weight:bold;padding:20px;
text-align:center;border: groove #aaaaff 10px;font-size:130%;
}
.hogehoge2
{
margin:5px;margin-bottom:35px;color:#aaffaa;font-weight:bold;padding:20px;
text-align:center;border: ridge #aaffaa 10px;font-size:130%;
}
.hogehoge3
{
margin:5px;margin-bottom:35px;color:#ffaaaa;font-weight:bold;padding:20px;
text-align:center;border: inset #ffaaaa 10px;font-size:130%;
}
-->
</style>

</head>
<body>
<div class="hogehoge1">キタ━━━(゜∀゜)━(_゜∀)━(___)━(∀゜_)━(゜∀゜)━━━!!!!< /div>
<div class="hogehoge2">キタ━━━(゜∀゜)━(_゜∀)━(___)━(∀゜_)━(゜∀゜)━━━!!!!< /div>
<div class="hogehoge3">キタ━━━(゜∀゜)━(_゜∀)━(___)━(∀゜_)━(゜∀゜)━━━!!!!< /div>
</body>
</html>
キタ━━━(゜∀゜)━(_゜∀)━(___)━(∀゜_)━(゜∀゜)━━━!!!!
キタ━━━(゜∀゜)━(_゜∀)━(___)━(∀゜_)━(゜∀゜)━━━!!!!
キタ━━━(゜∀゜)━(_゜∀)━(___)━(∀゜_)━(゜∀゜)━━━!!!!
上記のcssの数値を変化させていろいろ試してみましょう。