総仕上げ カードを完成させよう
差が出るのは細かいところ
大きな装飾は前回までで終わりました。残っているのは、言われないと気づかないけれど、直っていないと安っぽく見える部分です。今回は3つ直して完成にします。
フォームだけ書体が違う
前回 body に Web フォントを当てました。ページをよく見ると、入力欄と送信ボタンだけ字が変わっていません。input や button は、文字の設定を親から受け継がない決まりになっているからです。
.form-input {
font-family: inherit;
}inherit は「親と同じにする」という意味の値です。これで body に当てた書体がフォームにも届き、ここだけ浮いて見えるのが直ります。
写真を浮かせる
プロフィール写真は白い枠が付いているだけで、カードに沈んで見えます。box-shadow を足すと、カードの上に写真が置かれているように見えます。ぼかしを大きめにして、輪郭のやわらかい影にします。
最後にコードを読み返す
書いている途中のメモは、完成したコードには要りません。読めば分かることを書いたコメントは消し、box-sizing をなぜ全要素に当てるのか、@import をなぜ上に置くのかのように、コードを見ても分からない理由だけ残します。
ここで CSS 入門は終わりです。セレクタ、ボックスモデル、装飾の3つで、1枚のカードを最後まで組み上げられました。次のコースでは、この部品を画面の中でどう並べるかを学びます。
課題
.form-inputと.submit-buttonにfont-family: inherit;を足す.profile-photoにbox-shadowを足して浮かせる- 読めば分かるコメントを消して、理由を書いたコメントだけ残す