デザインを磨こう
素人っぽさの正体はばらつき
作ったものが素人っぽく見える原因は、色でも形でもなく、たいていは「ばらつき」です。余白が 12px と 20px と 16px で混ざっている、言い回しが場所ごとに違う。ひとつひとつは小さいのに、通して見ると落ち着かない画面になります。
使う数を減らす
余白はまず種類を減らします。このサイトなら 0.5rem / 1rem / 1.5rem / 2rem のように、使う値をあらかじめ決めておく。迷ったら新しい数を足さず、決めた中から選びます。
広い画面では、読む幅も余白も少しゆったりさせたほうが目が楽になります。900px 以上のときだけ幅を 52rem に広げ、セクションの内側と下の余白を 2rem にそろえましょう。ファイルのいちばん下に足します。
@media (min-width: 900px) {
.site-header,
.site-main,
.site-footer {
max-width: 52rem;
}
.section {
padding: 2rem;
margin-bottom: 2rem;
}
}言葉のトーンもそろえる
そろえるのは見た目だけではありません。このサイトの文はどれもやわらかい「です・ます」で、ヘッダーには「Web エンジニアを目指しています」と書いてあります。ページの説明だけ素っ気ないままだと、検索結果で見たときとサイトを開いたときで印象がずれます。説明文もサイトの言い方に合わせて書き直します。
課題
- style.css のいちばん下に
@media (min-width: 900px)のブロックを足す - 広い画面で
.site-header.site-main.site-footerのmax-widthを 52rem にする .sectionの内側と下の余白を 2rem にそろえる- ページの説明を、サイトの言い方に合わせて書き直す