HTML&CSS

【CSS】クラス名を指定する.classの使い方

【CSS】クラス名を指定する.class

CSSでは要素名(セレクタ)を指定するだけなく、クラス名を指定することで要素名以外にもプロパティと値を指定することができます。

クラス名を指定する際は「.class名」というように、クラス名の先頭に「.(ドット)」を記述します。

classにCSSを指定する際に、先頭の「.(ドット)」を忘れてしまうとCSSが適用されませんので、classの場合は「.(ドット)」が必要で、タグの場合は必要ない、ということをしっかりと覚えておきましょう。

 CSS
.main{
	color: red;
}

htmlではクラス名を指定する場合「""(ダブルクォーテーション)」で囲みます。

 html
<h1 class="main">プログラミング学習</h1>

【CSS】クラス名を指定する.classの使い方

複数の要素に同じclassをつけた場合、それら全てに同じCSSが適用されます。

リストタグは「Gray(#808080)」の文字色ですが、特定の行だけ「Red(#ff0000)」classが指定できるような場合のサンプルコードです。

 CSS
li {
	color: #808080;
}
.selected{
	color: #ff0000;
}

HTMLで1行目と3行目にCalss名を指定して赤色にしたい場合は下記のような記述になります。

 CSS
<ul>
  <li class="selected">テキスト</li>
  <li>テキスト</li>
  <li class="selected">テキスト</li>
  <li>テキスト</li>
</ul>







-HTML&CSS

© 2021 Issy9174 official web site