自主学習1-4【補足】「classを用いてCSSを装飾しよう」

前回分の修正

前回「自主学習1-4」にて、講師から以下のようなメッセージが書かれていましたね。

ただtypeごとにCSSを適用するということはあまりしません。基本的にclassを使用して反映するようにしたほうがいいと思います。

参照:自主学習1-4について、講師の評価

こちらについて修正していきます。

修正前のinputタグ
<input id="name" type="text" name="yourname"placeholder="例)山田太郎">
修正後のinputタグ
<input class="input_box" id="name" type="text" name="yourname"placeholder="例)山田太郎">
ゴミコ
全てのinputタグにクラス名input_boxをつけて、CSSでセレクタを.input_boxにして一括で装飾するように修正したよ。

ブラウザで表示させると以下のようになります。

参考1-5-1

入力欄の見た目を青色の二重線で囲っています。前回までは、入力欄の全てのinputタグのtypeごとにCSSを記述していました。しかし修正後はinputタグのクラス名を統一したので、CSSでの記述が1つだけで済みました。

divタグにクラス名をつける方法

①divの後ろにclassを記述して""の中に自分でクラス名を記述する。

<div class="item">装飾したい箇所</div>

②CSSでクラス名をセレクタに指定して装飾する。

.item

{
  margin: 10px;
  border-radius: 5px;
  background: lightcyan;
  color: midnightblue;
  display: block;
  padding: 15px;
  text-decoration: none;
}
  • id名は1つのファイルに1つしか付けることができない「タグ固有の名前」だが、クラス名は1つのファイルに何箇所でも付けることができる「かたまりの名前」である。
  • CSSでクラス名を指定して装飾することで、「divで囲ってクラス名を付けたかたまり」が一括で装飾される。
ゴミコ
これで講師の指摘事項の修正が完了したよ。

自主学習1-4【補足】について、講師の評価

指摘箇所の修正は問題なく完了していますね。あとは、CSSセレクタの優先順位についても知っておくと良いでしょう。後ほど「CSSセレクタ 優先順位」などで検索してみてください。

CSSはただ反映されればいいというものではなく、メンテナンス性も重要です。

byゴミリョ

次回の記事

にほんブログ村 IT技術ブログへ
にほんブログ村