最も簡単な既存サイトのレスポンシブ化の方法
既存サイトのレスポンシブ化は、悩みの種の一つです。
自分自身でコーディングしたサイトなら、マークアップも見慣れており、やりやすいかと思います。
しかし、他人が作成したサイトだと、一筋縄では行きません。
ここでは、初心者の方向けに、最も簡単でシンプルな既存サイトのレスポンシブ化の手順を掲載します。
既存サイトのレスポンシブ化を行う際には、先ずは下記の手順で準備しながら、進めていきましょう。
【最も簡単な既存サイトのレスポンシブ化の手順】
1. マークアップを綺麗にする
全てのHTMLマークアップを、w3cに準じた、綺麗なマークアップに整えます。
一番最短でレスポンシブ化を行いたいのですが、
レスポンシブ化を行う上でマークアップを綺麗にする事は、どのサイトでも共通で必須ですので、ここは手を抜かずに、しっかり正しい文法でマークアップを行いましょう。
2. CSSにメディアクエリーを追記する
既存のCSSに、メディアクエリーを追記します。
複数のCSSが読み込まれている場合には、構造部分となる（例えばcommon.cssの様な）CSSに追記します。
@media screen and (max-width: 640px) {
/*-- このコメント行の下に、スマートフォン用のCSSを記述 --*/
body {
width: 100%;
margin: 0px;
font-size: 1em;
text-align: center;
}
img {
max-width: 100%;
height: auto;
width /***/:auto;
}
}
@media screen and (min-width: 641px) {
/*-- このコメント行の下に、既存のPC用のCSSを全て入れる --*/
}
CSSの追記は、基本的には、たったこれだけで完了です。
コメントタグに記載していますが、一つ目のメディアクエリーには、
スマートフォン用のCSSを別途、追加で記述する必要があります。
二つ目のメディアクエリーの中には、
既存のCSSをカット&ペーストして入れる必要があります。
CSSが、メディアクエリーの{}で全て囲われている事に注意してください。
例えば、下記の様になります。
@media screen and (min-width: 641px) {
/*-- このコメント行の下に、既存のCSSを全て入れる --*/
body {
margin: 0;
padding: 0;
}
}
{}がダブって見えますので、分からなくならないように注意しましょう。
ここまで設定すれば、ブラウザウィンドウを伸縮するか、レスポンシブビューに
切り替えれば、ウィンドウの横幅が640ピクセルを堺に、
CSSが切り替わる様子が確認できるはずです。
3. Viewport（ビューポート）の設定
CSSの調整が完了したら、最後にHTMLの<head></head>セクションに
Viewportの記述を入れます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
上記一行のみです！
Viewportの詳しい説明は、ここでは省かせていただきます。気になる方は、Google等で検索して調べてみてください。
ここまでできたら、ご自身のスマホやタブレット等で確認して見ましょう！
目視や実際の操作を行いながら、スマホ用のCSSを調整しましょう。
Google Chromeの検証ツールのレスポンシブ表示を使用すれば、スムーズに作業が出来ます。
問題無ければ、作業は終了です。最後に念の為、Googleのモバイルフレンドリーテストを
実行しておきましょう。
既存サイトのレスポンシブ化、とっても簡単でしたよね？
