01 / 05
見た目を作り込む
INPUT · スライド
ヘッダーの小さなボタンを作る
02 / 05
HTMLはとても短い
中身はリンク1つでいい。飾りはぜんぶCSSでつける。
HTMLが短いほど、あとで見た目を変えるのが楽になるんだ。
<a class="login" href="#">ログイン</a>03 / 05
文字の太さを変える
font-weight（文字の太さ）で太字にできる。
bold… 太いnormal… ふつう（見出しを細くしたいときに使う）
小さい文字は太くすると読みやすくなるよ。
.login { font-size: 14px; font-weight: bold;}04 / 05
枠で囲んで押せる形にする
枠線・丸み・余白の3つで「押せそう」な形になる。背景を塗らないので主役のボタンより控えめになるのがちょうどいい。
リンクなので text-decoration: none; と display: inline-block; も忘れずに。
.login { display: inline-block; padding: 8px 16px; border: 1px solid #7b5ea7; border-radius: 4px; text-decoration: none;}05 / 05
右端に置いて完成
最後に float: right; でヘッダーの右端へ。前のレッスンで覚えた指定だね。
新しい指定は font-weight だけ。あとは持っている道具の組み合わせで作れるよ。ここから書いてみよう。