classとidを使おう。

プログラミング

classとidを使おう

すみれ
すみれ

え〜っと、DOCTYPE宣言をして、headを書いて、bodyを書いて、
h1タグを書いて、h2タグを書いて、それぞれにpタグを書いて、
文字の背景色を変えるにはcssを書けば良いのですわね。

、、、、あれ?
2つのpタグをそれぞれ別の色にしたいのに、できませんわ!!
私、先生にまた騙されたのかしら!!!

先生
先生

ちょっとちょっとすみれちゃん!!
人聞きが悪いよ。騙したことなんて一度もないからね。

すみれ
すみれ

でも先生、
2つあるpタグの中身を 別々の背景色にしたいのにできませんわよ。

先生
先生

なるほど、それじゃあ一度書いたコードを見せてくれるかな?

html

css

すみれ
すみれ

そして実際にブラウザで表示したものがこれですわ。

先生
先生

すごい内容と、色使いだね、、、
まぁそれはともかく、1つ目の文章と2つ目の文章の背景色を変えたいんだね。

そんな時に使うのがclassidなんだよ。
このclassidをマスターしたら、いろいろなことを個別に指定をすることができるんだ。

すみれ
すみれ

是非、そのclassとidとゆうものを教えていただきたいですわ。

classとidとは

先生
先生

classとidとはタグに個別の名前を付けれるものなんだよ。

すみれ
すみれ

個別の名前って一体どうゆうことですの?

先生
先生

このように[id=”idの名前”]、[class=”classの名前”]と記述するんだよ。
名前を付けてあげることで、個別にその要素に対してcssを適用したりすることができるんだ。

 

すみれ
すみれ

あれ、でも個別の名前を付けるはずなのに
[class=”midasi”]、[class=”text1″]、[class=”text2″] は複数ありませんか?

先生
先生

すみれちゃん、良いところに気が付いたね。
それじゃあ、classとidの違いについて教えるね。

classとidの違いとは

先生
先生

classとidの違いはね、

  • classは同じWebページ内で同じ名前が使用できる。
  • idは同じWebページ内で同じ名前が使用できない。

この点が大きな違いなんだよ。

すみれ
すみれ

それじゃあ、タグを何個かまとめてcssを指定したい場合はclassを使えば良いのですね。

先生
先生

正解!!その通り!!
そしてcssでスタイルを指定する場合は、

  • classの場合 →  .classの名前
  • idの場合      →  #idの名前

記述するんだ。


先生
先生

こんな感じでclassだと、同じ名前を付けたタグには一括でcssを指定するとこができるんだよ。

すみれ
すみれ

これはとても便利ですわ!!!

先生
先生

そしてさらに覚えておきたいのが、divタグspanタグだね。

 

すみれ
すみれ

divタグ?、spanタグ?
それは一体何なのですか?

divタグとspanタグとは

先生
先生

divタグとは
単体では特に意味を持たないタグだけど、ブロック要素と言ってdivタグで囲んだ部分を一つのグループとして認識させるんだ。
divタグの中に記述されたタグに、まとめてcssを指定することができるんだ。
そしてdivタグの前後には改行が入るんだよ。

先生
先生

spanタグとは、
こちらも特に意味を持たないタグ、インライン要素と言いdivタグと違って前後に改行が入らないんだ。

 

すみれ
すみれ

なんだか難しそうですわね。


先生
先生

こんな感じで記述すれば良いんだよ。

すみれ
すみれ

先生、わたくしのサイトにも試してみてくださいませんか?

先生
先生

わかった、良いよ。

 

すみれ
すみれ

わぁ、比較的マシになりましたわね!!

先生
先生

比較的、、、
そうねちょっとはマシになったかな。

またわからないことがあったら聞いてね。

すみれ
すみれ

はぁ〜い、先生ありがとうございました。

タイトルとURLをコピーしました