かなこと仲良く数学、無料のオンライン学習塾

主に数学と数学に関するプログラミングを扱っています。小学生~大学入試までの算数と数学の問題と詳しい解説をしていきます。普通の生徒はコメント欄で質問し放題です! 特別生徒は一名募集していて毎週日曜日に専用の問題が出て、ツイッターで質問し放題です笑

CSSのシャープ(#)idとドット(.)クラスの全て

CSSのシャープ(#)idとドット(.)クラスの全て


今回はCSSのシャープ(#)とドット(.)について詳しく説明していきます。

レベル1 #について

#はCSSではクラスではなくてidの時に使います。

次の例で見て下さい。

<div id="testid1">テスト</div>
#testid1{
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;
}

すると今回は背景を緑にしたので次のように表示されます。


レベル3 通常のクラスの書き方

これが一番ポピュラーな方法です。

<div=class="popular">内容</div>と書いた場合です。

次の例を見て下さい。

idではなくクラスなので#ではなくてドット(.)を使っています。

<div class="popular">テスト3</div>
.popular{ border:2px solid red; }

今回は境界線の色を赤にしたので次のように表示されます。


レベル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>
.radioclass{
background-color:yellow;
}

すると今回は背景を黄色にしたので次のように表示されます。