モバイルフレンドリー対応の為だけにやるべきこと(CSSレイアウト編)

2015年4月21日よりモバイルフレンドリーでない場合、スマホ検索時の検索順位が低下する可能性が極めて高くなります。それを踏まえて、古いサイトを運営している方向けにレスポンシブデザインとすることで自分のサイトをモバイルフレンドリー化するための方法をまとめたいと思います。

スマホ登場以前のサイトも手軽にモバイルフレンドリー化

スマートフォンが普及するまで多くのサイトはPCでの表示だけを前提にしてデザインやレイアウトを組んできたわけです。新しく作るサイトについてはスマホ対応を考えていても、古いサイトまでは手が回らないと言う方も少なくないのではないでしょうか?

スマートフォンならPCサイトでも見るだけなら問題が無いわけで、完全なスマホ対応を先延ばしにしてきた方も少なくないはず。

今回はそんな方でも比較的簡単にモバイルフレンドリーに対応するための方法をまとめます。あくまでもCSSレイアウトが前提です。また、この方法は簡易的な方法となりますのでご了承ください。

 

魔法のタグを挿入

まずはhead内に「<meta name=”viewport” content=”width=device-width; initial-scale=1.0″>」を挿入します。
深く考えなくていいです。
静的なサイトなどの場合には一括置き換えなどを使ってhead内に無理やり入れ込みましょう。head内ならどこでもOKです。

 

CSSにブレイクポイントを設定

参照しているCSSにブレイクポイントを設定しましょう。
これはこの画面サイズまでなら以下のCSSを適用しますよというものです。
大雑把でOKです。

@media screen and (max-width:620px)

としておけば620pxまでの画面サイズの人には以下のCSSを適用するよと言うものになります。

その上で、{}内に下記の点を抑えたCSSを記述します。

1)それぞれのブロックの横幅をすべて100%にする
ヘッダー部分、コンテンツ部分、サイドバー部分、フッター部分などで○○pxとサイズ指定しているケースが多いかと思いますが、それらのサイズ指定をすべてwidth:100%;で上書きします。
それぞれのブロックにpaddingが効いているような場合はそれを消しておくと(padding:0;など)スマホ向けには見やすくなります。

2)回り込みの解除
多くの場合、コンテンツとサイドバー部分をfloatで回り込みさせて左右に並べているはずです。この場合このfloatをすべて解除します。(float:none;を指定)

3)メニューやヘッダーのメニュー表記などを微調整
メニューなどが横長でサイズを超えるような場合はカラム落ちさせるなどして適切に表示させましょう。スマホ向けに不要な部分については「display:none;」で消してしまうのも一つの手です。

とりあえず、以上で概ねモバイルフレンドリーのテストには合格するはずです。

SNSでもご購読できます。