classとidについて説明していきます。
class（クラス）
classは、複数の要素に同じスタイルを適用する際に使用します。
記述するときは必ず「.（ピリオド）」をつけます。
同じclass名は再利用が出来るので何回でも使用可能です。
例えば、pタグが2つ存在して片方の文章のみを青にしたい場合、
HTML
<p>こんにちは</p>
<p class=”text”>こんばんは</p>
CSS
.text{
color:blue;
}
classを複数指定する場合
classを複数指定することも出来ます。
記述する方法は、ダブルクオーテーション内で半角スペースで区切ります。
HTML
<p class=”text big”>こんにちは</p>
CSS
.text{
color:bule;
}
.big{
font-size:30px;
}
id（アイディー）
idは、ぺージ内で1つだけ特別な要素にスタイルを適用する際に使用します。
記述するときは必ず「#（ハッシュ）」をつけます。
同じidは基本的に1回しか使用出来ません。
例えば、以下のh1のフォントサイズを30pxにしたい場合、
HTML
<h1 id=”title”>サイトタイトル</h1>
CSS
#title{
font-size:30px;
}
タグ名とclassとidをセットで指定する場合
通常、classやidを指定すると、使用するタグに関係なく反映されます。
これを特定のタグだけ反映させる書き方があります。
それは、CSSのclassやidの前にタグ名をセットで入力する方法です。
HTML
<h1 class=”blue”>こんにちは</h1>
<p class=”blue”>こんにちは</p>
CSS
p.bule{
color:blue;
}
classとidをセットで指定する場合
タグ内にclassとidをセットで指定すると、どちらも適用されます。
しかし、同一内容（例えば、どちらも色を指定する場合）は、必ずidが優先的に適用されるので注意が必要です。
HTML
<p id=”sample” class=”text”>テスト</p>
CSS
.text{
color:blue;
}
#sample{
font-size:30px;
}
コメント