第5回_IDとクラスの記述方法-サイト運営者のためのCSS講座

IDとクラスの記述方法

前回はIDとクラスについて、その役割の違いと意味を説明しました。

今回は具体的にHTML文書内でIDとクラスの記述方法を説明します。

記述方法となっていますが、いきなり自分で書くことは難しいので、

まずはHTML文書を読んだときに、

これはIDを設定しているんだな。

これはクラスを設定しているんだな。

ということが分かるように、記述のルールを大ざっぱに理解できることを目標とします。

そういう意味では読み方と言っても良いかもしれません。

語学でもプログラミングでもそうですが、読むことと書くことでは雲泥の差があります。

読むことはできても書くことは難しいのです。

まずは読めることを目標にしてください。

ID

IDはhtmlタグの中で”id=xxx”という形で記述されています。

たとえばこのようになります。

htmlでは半角スペースは意味のない文字として無視されるので、

“id”の後ろに半角スペースを入れて、<div id =menu> や <div id = menu> のように記述されることもあります。

また、前回説明したようにIDとクラスは同時に設定することができるので、次のような書き方になっていることもあります。

今のところは、とりあえず、”id=” という記述を見つけたら、そこにIDを設定しているんだなと分かるレベルで充分です。

クラス

クラスはhtml文書の中で”class=クラス名”という形で記述されています。

たとえばこのようになります。

idと同様、半角スペースを入れて、<div class =クラス名> や <div class = クラス名> のように記述されることもあります。

また、前回説明したようにクラスは同時に2つ以上設定することができるので、次のような書き方になっていることもあります。

さらにはIDと同時に設定できるので、次のようになっていることもあります。

今のところは、とりあえず、”class=” という記述を見つけたら、そこにクラスを設定しているんだなと分かるレベルで充分です。

次回は、CSS内でのIDとクラスの記述方法について説明します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です