class-id

0からサイト制作を学ぼう! 9 – HTML,CSS(要素のデザイン変更 class,id) –

 

こんにちは、真面目系変人マサです。

前回は<header>や<footer>、<div>タグを使用してグループ分けをしました。
今回はグループ分けした要素に色付けをしたり、中の文字色を変更したりしていきます

 

 

 

要素のセレクタ指定方法

CSSを使って要素内の色付けや文字色を変更する場合は、セレクタの指定が必要です。
セレクタ指定については、第6回で学習していますので参考にしてください。

 

0からサイト制作を学ぼう! 6 – CSS(文字の色や大きさの変更) –

さて、要素のセレクタ指定方法ですが、大きく2通りの方法があります。

 

➀要素自体をセレクタとして指定する。

これは、<header>や<footer>などのタグそのものをセレクタとして設定する方法です。

特徴としては、

・<header>や<footer>などページ内に1つしか存在しないタグに対して使用するのが一般的
・<div>や<p>タグなどページ内で複数使用しているタグの場合は、そのすべてのタグでCSSが適用されてしまう。

 

 

といった点が挙げられます。

 

②クラス、IDをセレクタとして指定する。

これは、タグに対してクラス(class属性)やID(id属性)といった属性を追加して、その属性に与えた名前をセレクタとして指定する方法です
詳しくは後で説明しますので、ここでは大まかな理解で構いません。

特徴としては、

特定の要素に対してだけCSSを適用したい時に使う。

 

 

といった点が挙げられます。

 

 

では、それぞれ詳しく見ていきましょう。

 

 

 

 

 

実際に適用させてみよう

要素自体をセレクタとして指定する方法と、クラスやIDを使った方法で実際にCSSを適用させてみましょう。

 

 

1.要素自体をセレクタとして指定する。

 

要素自体をセレクタに指定して、CSSでデザインを変更していきます。
まず、HTMLで下のようなページを作っていきます。

header

これはサンプルです。

サンプルの説明です。

index.html

 

コードでは下のように書いています。(<body>内のみ記載。他は省略しています。)

<header>
header
</header>

<p>これはサンプルです</p>
<p>サンプルの説明です。</p>

 

 

次はCSSを使って下のように色や幅を変えてみましょう。

・ヘッダーの背景を黄色に
・ヘッダーの高さを少し高く
・ヘッダー内の文字を真ん中に
・段落の文字色を赤色に

header

これはサンプルです。

サンプルの説明です。

index.html

 

CSSのコードは下のようになります。

header{
  height:50px;
  width:100%;
  background-color:yellow;
  text-align:center;
}
p{
  color:red;
}

使用しているプロパティ

height・・・headerの高さを調整しています。値はpx(ピクセル)や%で指定します。

width・・・headerの横幅を調整しています。値はheightと同じくpx、%で指定します。ここでは、ページいっぱいにheaderを広げるために100%の値に設定しています。(headerやdivは基本的にデフォルトで横幅いっぱいに広がるようになっているので、幅を狭めたい場合以外は特に指定しなくても問題ありません。)

background-color・・・背景の色を指定します。

text-align・・・文字を要素内のどこに位置させるかを指定できます。デフォルトでは左寄せになっていますが、値をcenterにすると中央寄せ、rightにすると右寄せにできます。

 

これで、シンプルな要素のデザイン変更ができました。
ただ、header部分は1つしか無いので問題ないのですが、段落は段落ごとに色分けや文字の大きさを変えたい場合、この方法では指定が難しくなってしまいます。

 

そこで使用するのがクラスとIDです。次に説明していきます。

 

 

2.クラス、IDをセレクタとして指定する。

では、次にクラス(class属性)とID(id属性)を使ってセレクタ指定していく方法を紹介します。

 

クラスとIDとは

クラス(class)とID(id)は、タグに指定できる属性です。
ページ内に複数ある<div>や<p>などの同じ要素に対して、違うCSSを適用したい場合に使用します。

 

クラスを使った書き方

クラスを使う場合は、htmlファイルではタグにclass属性を追記し、任意のクラス名を記述します。
書き方としては、<要素名 class=”任意のクラス名”>となります。

<p class="red">赤く塗ります</p>
<p class="blue">青く塗ります</p>

段落に対してredとblueというクラスを与えました。
次はCSSファイルを変更して、redクラスの文字色を赤色に、blueクラスの文字色を青色に変えてみましょう。

 

CSSファイルではclass名の前にピリオド(.)をつけてセレクタ指定します。
コードは下のようになります。ピリオドを付けるところ以外は、要素をそのまま指定するやり方と違いはありません。

.red{
  color:red;
}
.blue{
  color:blue;
}

赤く塗ります

青く塗ります

index.html

上のように色が変更されたと思います。

 

IDを使った書き方

基本的にはクラスと考え方は同じです。htmlファイルのタグにid属性を追加して、任意のID名を記述します。
書き方は、<要素名 id=”任意のID名”>となります。

<p id="big">文字を大きくします</p>
<p id="bold">文字を太くします</p>

段落に対してbigとboldというID名を与えました。
それぞれ文字の大きさと太さを変更していきます。

 

CSSファイルではID名の前にハッシュ(#)をつけてセレクタ指定します。

#big{
  font-size:30px;
}
#bold{
  font-weight:bold;
}

文字を大きくします

文字を太くします

index.html

 

これで<p>という同じ要素に対しても別々のCSSを適用することができるようになりました。

 

 

クラスとIDの違い

クラスとIDには(.)を使うか(#)を使うかというところ以外に違いが無いように見えますが、実は大きな違いがあるので、是非覚えておいてください。

 

・同じページで使える回数

クラスは同じクラス名を複数の要素に指定できるのに対して、IDはHTMLファイル内で同じID名を1度しか使うことができません
そのため、何度でも適用したいCSSがある場合はクラスで指定しておきましょう。

 

・適用されるCSSの優先順位

基本的にはIDが優先して適用されます。たとえば、同じタグにクラスとIDを指定してそれぞれ別の文字色をCSSに記述していた場合、IDで指定した文字色が適用されます。

たとえば、CSSで赤色指定しているid「red」と青色指定しているclass「blue」を同じタグに指定します。

<p id="red" class="blue">優先順位</p>

結果は下のようになります。

優先順位

index.html

・アニメーションの処理速度

WEB制作では、Javascriptという言語でサイトに動き(アニメーション)をつけることが多いです。
このJavascriptでは、どの要素に対して動きを入れるか指定しますが、その対象がクラスよりIDのほうが処理速度が速いという特徴があります。

現時点では、頭の片隅に置いておく程度で大丈夫です。

 

 

 

今回は以上です。ぜひ、復習してみてください。