(cache) [CSS] スマホ対応は超重要! 私が最低限やっている5つのこと

こんにちは! ヨス（@yossense）です。

Googleが今後、もしかしたら「スマホ対応」を検索順位の指標にするかもしれないらしいですね。ということで今回はブログのスマホ対応がテーマです。私がブログのスマホでの表示対応で最低限やっていることをまとめたいと思います!

スマホ対応で困った5つのこと

今回は私がスマホ対応のために最低限やっている5つを紹介するのですが、分かりやすいように「問題点」を見出しにして紹介しますね。

まずはこちらの比較画像をご覧ください。

スマホで見た時に、上画像の左側のような画像を見たことありませんか? これは画像サイズがパソコンのままになっているんですね。大きいのではみ出しています。

これをスマホで見た時は自動で上画像の右側のように縮小してほしいんです。でも大丈夫! 「max-width」を<img>に加えるだけでOKです。

img { max-width: 100%; }

ハイ。これは一発で直せました!

さて次です。これもよく見ます。

これは、画像を「float : left」の指定で、文字を右側に回りこませているんですよね。

PC画面のように横幅が広ければ問題ないのですが、スマホだと画像の横に文字を回りこませるには無理があります。なので、この「float」の回り込み指定を解除するだけです。

でもパソコンで見た時は、そのままにしておきたいので、ここではメディアクエリを使いましょう。

@media screen and (max-width: 480px) { ※ ここにCSSを普通に入れる }

上記のメディアクエリの記述内に、調整したいCSSを入れ、下記のように合体です。

@media screen and (max-width: 480px) { img { float : none ;} }

あとは微調整ですねー。どのページもきっと「width」「padding」「margin」などを駆使して、パソコンで見た時にキレイに見えるようにコードを書いている思います。

でもそれをスマホで見ても同じようにはいかないんですねー。この例を見てください。

けっこう違いますね。

まずはこちらの「見出し」を見てください。オレンジ色の帯の部分です。

この例の場合、文字が大きすぎるのと、文字周りのスペースを取り過ぎだと思います。なので、メディアクエリで、横幅が480pxになると、「文字を少し小さくしたり、文字周りの余白を減らすCSS」を読み込ませます。

@media screen and (max-width: 480px) { h2 { font-size: 75%; margin: 1em 0 0.8em 0; } }

見出しで微調整したところ
変更前	変更後
font-size（文字の大きさ）→　105%	font-size　→　75% ※ 文字の大きさを小さくしました。
margin（余白）→　0.7em 0 2em 0	margin　→　1em 0 0.8em 0 ※ 基本「 0 」にします。上下の余白を少し減らしました。

今度は最も文章に使われている<p>タグ。これは一番読みやすさに関わるので重要です。

上の「BEFORE」を見て私が気になったのは、両サイドのスキマ、文字の大きさ、余白（マージン）、行間です。実はこのままでも読みにくくないのですが、私のブログ記事のように長い文章の場合、スマホでは横一列の文字数を多めにしないと、長くなりすぎるんですよ（笑）。

なので、これもメディアクエリを使います。

@media screen and (max-width: 480px) { p { width: 100%; font-size: 65%; margin: 0 0 1.8em 0; line-height: 1.7; } }

変更したのはこちらの点。

段落で微調整したところ
変更前	変更後
width（横幅）→　85%	width　→　100% ※ 両サイドの空間を減らすために文字の横一列の幅を広げました。
font-size（文字の大きさ）→　75%	font-size　→　65% ※ 文字の大きさを小さくしました。
margin（文字周りのスペース）→　0 auto 2.5em auto ※ 左右は自動指定（auto）です。	margin　→　0 0 1.8em 0 ※ 文字下のマージン以外はゼロで。
line-height（行間）→　1.9	line-height　→　1.7 ※ 少しだけ行間を減らしました。