スマホ幅の細部を仕上げる

01 / 05

積んだだけでは終わらない

1列になったページを 375px で見てみよう。並びは直ったけれど、まだ気になるところがある。

仕上げはこういう細かいところの積み重ねだよ。

02 / 05

せまい画面でいちばん場所を食うのが、帯の上下の余白。広い画面用の 48px を半分くらいにしてしまおう。

逆に左右の余白は残す。ここを 0 にすると文字が画面の縁にはりついて、とても読みにくくなるんだ。

@media (max-width: 480px) {  .events {    padding: 20px 0;  }}

03 / 05

まん中そろえは幅が広いときの飾り。せまい画面では、行が折り返すたびに読み始めの位置がずれて読みにくくなる。

左そろえに戻すと、たてに1本の線ができて目が迷わない。

@media (max-width: 480px) {  .inner h2 {    text-align: left;  }}

04 / 05

仕上げの最後は区切り。太い線は幅がせまいと主役になりすぎるので細くする。

そのぶんカードのあいだのすきまを広げると、区切りが線ではなく空間で伝わる。せまい画面ではこちらのほうが軽く見えるよ。

@media (max-width: 480px) {  .card {    border-bottom: 1px solid #cdd8c8;  }}

05 / 05

判定は幅 375px。ここまでの下地・段階的な切り替え・仕上げがぜんぶ乗ったページになるよ。

ここから書いてみよう。