プログラミングと旅と映画の日々

普段はスマホ決済サービスの会社でバッグエンドを担当しているエンジニアです。プログラミングと趣味の映画、株、時々うどんに関してブログを書いていこうと思います。海外ドラマ、クロスバイクも好きです。

<CSS>id、class属性の使い方をマスターする<文系エンジニアのプログラミング>

id、class属性はCSSの全てのタグに追加可能で、同じタグに対してこの両方の属性を追加しても問題ありません。

 

◆id属性

id属性は、以下の用途でつかいます。

1.ページ内リンクのリンク先にするため

2.cssでその要素にスタイルを適用するため

3.JavaScripeでその要素を操作するため

 

id属性を追加することで一意に識別できるようになり、上記のような用途で使用できます。

 

*id属性を使用してCSSを適用する場合

○構文

#id名 {

 ...

}

 

◆class属性

class属性は主にCSSセレクタで使うために使う名前です。

id属性よりもclass属性の利用が推奨されます。

その理由はclassセレクタはidセレクタよりも詳細度が相対的に低いからです。

 

*class属性を使用してCSSを適用する場合

○構文

.class名 {

 ...

}

id属性は同じ命名をすることはできませんが、classの場合同じclass名を複数のドキュメントに定義することが可能です。また、一つのタグに複数のclass名をつけることもできるためid属性よりも柔軟にCSSの操作が可能です。

 

*複数のclass名の指定の仕方

<h1 class= test1 test2>hoz blog</h1>

class名の後に半角スペースをあければOK

*参考書籍*

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

新品価格
¥2,678から
(2017/1/31 20:14時点)

◇読者になって頂けるとありがたいです。

↓↓↓↓↓↓