猫カフェのコンテンツレイアウトを作成しながら、ボックスモデルについて理解することが目的です。
Contents
Chap12-2 問題の答え合わせ
背景画像の表示
背景画像の基本プロパティ3セットとオプション2セットがポイントです。
#cont-1{
background-image: url(images/bg_1.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
padding-top: 50vh;
}背景色の表示
背景色を表示する<div>を特定するために、セレクタの記述がポイントです。
#cont-1>div{
background-color: rgb(255,240,235);
padding: 80px 0;
}文章間の開き
<dl>の下の余白は、パディングでも構いません。
#cont-1 dl{
margin-bottom: 80px;
}
個人的にはパディング使います
クラス名を使ったデザイン
同じデザインを、他の場所でも使い回す時に便利なのが、クラスセレクタです。
.cont_link{
color: rgb(0, 60, 255);
text-decoration: underline;
}先にクラスセレクタでCSSを記述し、その後でデザインしたいタグにclass属性を追加します。
<p><a href="#" class="cont_link">お部屋によって、待っている猫ちゃんが違います。</a></p><a>を記述していなかったら、追加しておきましょう。
最後にレイアウトして完成です。
#cont-1 p{
width: 960px;
margin: auto;
text-align: right;
}.cont_linkがa:linkのデザインになってしまう問題
同じ場所へ違うセレクタを使ってデザインした場合、セレクタの優先順位によってどのデザインになるかが決まります。
Chap13-1で答え合わせをします
Chap13-1の解答
nav a:link,
nav a:visited{
color: rgb(51,51,51);
text-decoration: none;
}メインメニュー（グローバルメニュー）部分のデザインには、セレクタを「nav a」というように、<nav>の中で使う<a>にデザインしておかないと、全ての<a>にデザインしてしまうので注意。
セレクタの優先順位を決める詳細度
詳細度は、セレクタの種類ごとに点数がつけられていて、その合計でセレクタの優先順位が決まる仕組みのことです。
| セレクタの種類 | 記述例 | 点数 |
|---|---|---|
| 全称セレクタ | ✴︎（アスタリスク） | 0 |
| タグセレクタ | pやaなどのタグ名 | 1 |
| 擬似要素 | ::beforeや::afterなど | 1 |
| 擬似クラス | :linkや:hoverなど | 10 |
| クラスセレクタ | .cont_linkなど | 10 |
| idセレクタ | #cont-1など | 100 |
CSSを作成していて思ったように表示されない時は、入力ミスの他にもこういった優先順位も関係しているので、記述の順番やセレクタの選び方に注意してみましょう。
idを適切に使っていれば、何も怖くありません