CSSスキル - 第7章 Lesson5

セレクタを使いこなしてみよう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

タイプセレクタ、idセレクタ、classセレクタを使いこなして、デザインを完成させましょう。
ここでは、同じタグ「div」に異なる境界線のCSSを適応させていきます。



この動画で学べること

・セレクタを使いこなす方法



セレクタを使いこなそう

今まで学んだセレクタを使いこなせるようになりましょう。
まずは見出し1を真ん中寄せにします。
<h1>に対してtext-align:center;
をかけます。



h1 {
text-align: center;
}



次に<div>ボックスにスタイルをかけていきますが、<div>ボックスは2つあるので、「セレクタとは?」のボックスにid名「box_selector」をつけます。
そして、CSSに#box_selectorを指定して書いていきましょう。



div#box_selector {
background-color: white;
border: 1px solid #ccc;
padding: 20px;
width: 500px;
margin: 0 auto 20px auto;
}



保存してブラウザで見てみましょう。
「セレクタとは?」の部分を囲むことができました。
では、もう一つの<div>ボックスにもid名「box_list」をつけていきましょう。
そして、この部分にもid名「box_selector」と同じCSSをかけていきたいので、コピーしてid名の部分を変更していきましょう。



div#box_list {
background-color: white;
border: 1px solid #ccc;
padding: 20px;
width: 500px;
margin: 0 auto 20px auto;
}



保存してブラウザで見てみましょう。
下のリストの部分も囲むことができました。
しかし、2度も同じCSSを書くことを考えると、一つにまとめてしまった方が便利なので、class名を追加して、CSSを一回だけ書くようにしましょう。
HTMLファイルのid名を記述した<div>タグにclass名「box」を追加していきましょう。
そして、CSSの#box_selectorと#box_listに書いたものを.boxに書き換えます。



.box {
background-color: white;
border: 1px solid #ccc;
padding: 20px;
width: 500px;
margin: 0 auto 20px auto;
}



保存してブラウザ見てみましょう。
両方とものボックスを囲むことができました。
では次は、それぞれのボックスに違う色の境界線を書いていきましょう。
このようなときは、id名を使ってください。



div#box_selector {
border-top: 5px solid #3D2D51;
}

div#box_list {
border-top: 5px solid #3BD5D4;
}



保存してブラウザ見てみましょう。
ボックスそれぞれに違う色の境界線をつけることができました。
最後に、フッターの文字を真ん中寄せにしましょう。



footer {
text-align: center;
}



ブラウザ見てみます。
フッターの文字を真ん中に配置できれば完成です。