CSSのシャープ（#)idとドット(.)クラスの全て
CSSのシャープ（#)idとドット(.)クラスの全て
今回はCSSのシャープ(#)とドット(.)について詳しく説明していきます。
レベル1 #について
#はCSSではクラスではなくてidの時に使います。
次の例で見て下さい。
<div id="testid1">テスト</div>
#testid1{
font-size:20px;
}
font-size:20px;
}
実際は次のように表示されます。
テスト
とにかくクラスはドット(.)、idはシャープ(#)と覚えておくといいです。
レベル2 idのもう一つの書き方
通常は<div id="testid2">内容</div>のように記述しますが
<input type="text id="html" name="htmlname" size="30">
のような時にも使えます。
次の例で見て下さい。
<input type="text id="html" name="htmlname" size="30">
#html{
background-color:green;
}
background-color:green;
}
すると今回は背景を緑にしたので次のように表示されます。
レベル3 通常のクラスの書き方
これが一番ポピュラーな方法です。
<div=class="popular">内容</div>と書いた場合です。
次の例を見て下さい。
idではなくクラスなので#ではなくてドット(.)を使っています。
<div class="popular">テスト3</div>
.popular{
border:2px solid red;
}
今回は境界線の色を赤にしたので次のように表示されます。
テスト3
レベル4 クラスのもう一つの使い方
idも2種類書き方があったようにクラスにももう一つ書き方があります
<input type="radio" id="radioid" name="pic"> <label for="radioid" class="radioclass"<メニュー>/label<
のように書くやり方があります。
次の例を見て下さい。
<input type="radio" id="radioid" name="pic">
<label for="radioid" class="radioclass">メニュー</label>
<label for="radioid" class="radioclass">メニュー</label>
.radioclass{
background-color:yellow;
}
background-color:yellow;
}
すると今回は背景を黄色にしたので次のように表示されます。
