classとid

ママたちのwebデザインのお勉強をサポートしてるkumakoです。

【本日のお題】idとclassについて

よくつまずくこれを話題にしました。これはわたしもかなり検証しましたがやっとしっくり来た気がします。

色々調べた結果
「classは複数使える。idは1個だけ」
という答えが多くありました。しかし、なんだかしっくりこなくて、間違いじゃありませんが教える上でもこれでは迷いますよね。

class

CSSのスタイリングで利用する

cssのスタイリングの場合同じスタイルを利用することがよくあります。見出しのフォントサイズ、文字の太さ、ボーダーを左側につけるなど

見出しのデザイン

このような場合に、同じサイト内なら共通して何度か使う必要が出てきます。そうした場合に便利に使えるのが「class」となります。

.heading{
font-size:26px; 
border-left:3px solid #fff222; 
padding:16px;
}

headingという名前でclass名を作り見出し用のスタイルを記述します。こうしておくと同じスタイルにしたいところの見出しにだけ.headingをつければ便利に使えます。

<h2 class="heading">見出しのデザイン</h2>

このように同じサイト内で複数使う可能性のあるスタイルを適応させるために主に使うのがclassです。

つまり解釈の仕方ですが、同じものを複数使いたいときはclassを使うと便利ですよ。ってことです。

SNSでもご購読できます。


コメントを残す

*