CSSでスタイルを指定するには(1)要素で指定(2)クラスやIDで指定(3)タグの中に直接記述の、3つの方法があります。さっさと覚えて早くページのデザインに移りましょう。
前のページで使った方法です。
要素名 {
プロパティ: 値;
}要素名のところにem、strong、h1、pなどを指定すると、その要素のスタイルを一括して指定することができます。例えば、
h2 {
color: red;
font-size: 150%;
}とすると、<h2>〜</h2>で囲んだ部分のデザインが全部変わります。
em要素で強調するのにもいろいろなバリエーションを持たせてみましょう。次のようにタグにclass属性を加えてください。
<p>当社のサービスを利用すれば
<em class="inexpensive">安く</em>
<em class="easy">簡単に</em>
<em class="high">最高品質の</em>
すごいものが手に入ります。</p>そしてCSSに次のように書いてみましょう。
em.inexpensive {
color: blue;
}
em.easy {
color: green;
}
em.high {
color: red;
}すると、クラスごとに文字の色が変わります。
当社のサービスを利用すれば安く簡単に最高品質のすごいものが手に入ります。
要素名を省略し「.クラス名」とすると、すべての要素のデザインを変えることができます。
<p>
<em class="great">威風堂々</em>かつ
<strong class="great">泰然自若</strong>とした態度
</p>.great {
color: red;
}これならタグにclass="great"がついている要素は全部赤い文字になります。
威風堂々かつ泰然自若とした態度
まとめると次のようになります。
要素名.クラス {
プロパティ: 値;
}
.クラス {
プロパティ: 値;
}ここまでOKですか？だんだん覚えることが増えてきて大変ですが、がんばりましょう！！
クラスの使い方とほとんど同じです。タグの中でid属性を指定します。
<h1 id="logo">○○のページ</h1>そしてCSSを次のように書きます。
h1#logo {
font-size: 200%;
}クラスのときと同じく、要素名を省略し「#ID」とすることもできます
「なんだ、クラスもIDも同じゃないか」と思いますよね？でも、クラスとIDは一つだけ大きな違いがあります。一つのIDはHTMLの中で1回しか使えないことです。ですからid="logo"は2回以上出てきたらアウトです。
id属性の値はアルファベット(a?z、A?Z)で始まらないといけません。スタイルシートのIDには、アルファベット以外には数字(0?9)とハイフン(-)、アンダースコア(_)しか使えません。
次の例はすべて間違いです。
id="1abc"(アルファベットで始まっていない)id="300"(アルファベットで始まっていない)id="abc:def"(コロン(:)を使っている)id="いろは"(全角文字を使っている)まとめると次のようになります。
要素名#ID {
プロパティ: 値;
}
#ID {
プロパティ: 値;
}クラスは一般名詞、IDは固有名詞のようなイメージです。
例えばクラスならclass="man"や、class="Japanese"のように、対象を分類するために使います。
IDはid="Yamada"や、id="Smith"のように、対象に他と重複しない名前をつけるために使います。
3つ目の方法です。文の中で1ヵ所だけデザインを変えたいところがあったら、この方法が使えます。
<em style="color: red; font-size: 90%;">
ここの強調だけは赤色にして文字を90%の大きさに
</em>style属性を使い、属性値のところに直接CSSを記述します。CSSを外部ファイルにするメリットが活かせなくなるので、できるだけ使わないようにしたほうがいいでしょう。
要素名 { プロパティ: 値; }」と書く要素名.クラス名 { プロパティ: 値; }」と書く要素名#ID名 { プロパティ: 値; }」と書く<○○ style="プロパティ: 値;">…<○○>」と書くこのページで紹介したのはCSSの基本的な使い方です。もっと詳しく知りたければ、スタイルの指定方法 その2を見てください。