前回分の修正
前回「自主学習1-4」にて、講師から以下のようなメッセージが書かれていましたね。
ただtypeごとにCSSを適用するということはあまりしません。基本的にclassを使用して反映するようにしたほうがいいと思います。
参照：自主学習1-4について、講師の評価
こちらについて修正していきます。
修正前のinputタグ<input id="name" type="text" name="yourname"placeholder="例）山田太郎"><input class="input_box" id="name" type="text" name="yourname"placeholder="例）山田太郎">
ゴミコ
全てのinputタグにクラス名input_boxをつけて、CSSでセレクタを.input_boxにして一括で装飾するように修正したよ。
ブラウザで表示させると以下のようになります。
入力欄の見た目を青色の二重線で囲っています。前回までは、入力欄の全てのinputタグのtypeごとにCSSを記述していました。しかし修正後はinputタグのクラス名を統一したので、CSSでの記述が１つだけで済みました。
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名は１つのファイルに１つしか付けることができない「タグ固有の名前」だが、クラス名は１つのファイルに何箇所でも付けることができる「かたまりの名前」である。
- CSSでクラス名を指定して装飾することで、「divで囲ってクラス名を付けたかたまり」が一括で装飾される。
ゴミコ
これで講師の指摘事項の修正が完了したよ。
自主学習1-4【補足】について、講師の評価
指摘箇所の修正は問題なく完了していますね。あとは、CSSセレクタの優先順位についても知っておくと良いでしょう。後ほど「CSSセレクタ 優先順位」などで検索してみてください。
CSSはただ反映されればいいというものではなく、メンテナンス性も重要です。
byゴミリョ
次回の記事
