ウェブデザインをスタイルシートできれいなホームページにしよう

ホーム＞ idセレクタとclassセレクタ

idセレクタとclassセレクタ

CSSファイルでよく使うセレクタに「idセレクタ」と「classセレクタ」があります。
まずidセレクタからおぼえてみましょう。
idセレクタはhtmlの中にある要素1つにデザインする時に使います。
例
･HTMLの記述
<div id="bbbbb">
<p>あいうえお</p>
</div>

・CSSの記述
#bbbbb{
color:#000000;
font-size:10px;
}

この場合idに「bbbbb」と名付けました。
HTML内で「あいうえお」という文字をidで囲みました。
「あいうえお」はCSSの記述に沿ったデザインになります。
CSS内に、色を黒、文字サイズを10pxにしてありますので、そのようなデザインに変わります。

divタグをHTML内に記述する時はかならず、<>で囲みます。
ここからですよ、という宣言です。
終り部分には、必ず</div>を書き、ここまでで終りですよ、と宣言します。
これを守らないと、どこからどこまでかコンピューターがわからなくて期待どおりの結果になりません。
コンピューターは一文字のミスも許さない場合が、ほとんどなので、要チェックです。
CSS内には「bbbbb」の前に「#」を付けます。これは「id」である事を示しています。

次にclassセレクタですが、機能は、idセレクタと大体一緒なんです。
違う点といえば、idセレクタが要素1つをデザインする時に使うのに対し、classセレクタは複数の要素に使う事ができるということです。（あと、記述が若干ちがうぐらいです）
例
･HTMLの記述
<div class="ccccc">
<p>あいうえお</p>
</div>
・CSSの記述
.ccccc{
color:#000000;
font-size:10px;
}

この場合classに「ccccc」と名付けました。
効果は一緒ですが、同じページ内の複数の要素に何回も使える利点があります。
CSS内には「ccccc」の前に「.」を付けます。これは「class」である事を示しています。

idはWEBページのレイアウトでどのページも同じような部分に使い、classはその場に応じた変化する部分で使うという事が多いようです。
次項「ボックスのレイアウト」