レスポンシブWeb制作の基礎
レスポンシブウェブデザインには様々なやり方がありますが、ここではHTML初心者、素人Web制作者でもスマホ対応ができるよう、最も簡単なお薦めの方法をご紹介します。
HTMLは一つ、CSSを解像度で切替える
レスポンシブの基本は、HTMLはひとつで、ユーザーの解像度によってCSSを切替えてレイアウトを変えることです。
メディアクエリで解像度を取得
ユーザーの解像度を取得するには、「メディアクエリ」を使用します。メディアクエリとは、ユーザーの端末情報を取得して、その条件によってCSSを切り分ける仕組みです。
@media screen and (max-width: 480px)
{
ここにCSSを記載
｝CSSに上記のように記述すると、ウィンドウの横幅が480px以下の場合に｛ ｝内のCSSが適用されます。このように自由に条件を指定してスタイルを分けられるのがメディアクエリです。
切り分け方法にはいろいろありますが、簡単かつお薦めなのは、まずデフォルトのCSSとしてPC用のスタイルを記述し、スマホの場合のみ、その後ににスマホ用のスタイルで上書きする方法です。
この方法の利点は、メディアクエリに対応していない古いブラウザ（IE8以前）も救うことができることです。
条件分岐にメディアクエリを使用すると、対応していない古いブラウザではCSSが読み込めず、レイアウトが崩れてしまいます。IE8以前の古いブラウザは今もまだパソコンで結構使われており、広く一般公開するサイトであれば完全に無視するわけにはいきません。
そこで、デフォルトではメディアクエリを使わずにPC用のスタイルを記述し、スマホの場合のみメディアクエリを使ったスマホ用スタイルで上書きするのです。
コード見本
実際のコードは下記のようになります。HTMLに3行追加、CSSにも3行追加です。
●HTML
<head> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" type="text/css" href="style.css" media="all" /> <link rel="stylesheet" type="text/css" href="sp-style.css" media="all" /> </head>
ヘッダー部分に上記の3行を追加します。
最初の１行の意味は「表示領域（viewport）の横幅は、端末の画面サイズ（device-width）とし、初期表示の倍率（initial-scale）は等倍とする」ということです。
2，3行目は、CSS（スタイルシート）のファイルをリンクさせています。ここでは分かり易いようにCSSを２ファイルに分けています。PC用のCSS(style.css）と、スマホ用のCSS（sp-style.css）です。
PC用のCSSの方を上に書いてください（PCがデフォルトなので）。
●スマホ用のCSS
@media screen and (max-width: 480px)
{
ここにスマホ用のCSSを記載
｝PC用のCSSは何も変更する必要はありません。スマホ用のCSSにのみ、最初に@media～を追加して、CSSの記述全体を｛ ｝で囲みます。
「ユーザーの端末の画面サイズが、横幅480px以下の場合は｛ ｝内のCSSが適用される」という意味です。CSSは後に書いた方が有効になりますので、PC用のCSSが先に読み込まれても、スマホの場合のみスマホ用のCSSで上書きされます。
PC用CSSファイルをコピーしてスマホ用を作成
当サイトでお薦めしている方式は、CSSファイルをPC用とスマホ用の２つ作る方法ですので、まず元々あるPC用のCSSファイルをコピー＆リネームしてスマホ用のCSSファイルを作り、そのスマホ用のファイルを編集していきます。
デフォルトでPC用CSSが読み込まれていますので、PCとスマホ同一の部分は削除してもOKです。（残しておいても問題ないが、量が多いと重くなる）
スマホで変更する部分だけ、スマホ用の記述に書き変えます。このとき気をつけなくてはいけないのは、あくまでもPC版が先に読み込まれているので、変更点は上書きする形で変えるということです。
例えば、PCではフロートにしていたので、float:left; としてあった場合、スマホではフロートさせないからその一文を削除してしまうと、実際にはPC用のCSSが生きているのでフロートのままになってしまいます。この場合はスマホ版にフロートしないという記述、float:none; と記載しなくてはいけません。
ブレイクポイントは何ピクセル？
さて、実際にPC版とスマホ版を分ける時に、ブレイクポイント（分かれ目のピクセル数）はいくつに設定するのがよいでしょうか。
誰もが最初に悩む点なので、これは別ページで詳しく解説しますので、そちらをご覧ください。
→ ブレイクポイントはいくつ？
スマホ用レイアウトは横幅100%
実際に、PC版からスマホ版にどのようにレイアウトを組変えるかですが、難しいことはありません、基本は「横幅100%」です。
パソコン用サイトのデザインとして、横の段組みが一段だけであれば(上記の１に相当）、PC用で width=900px;等と記述していたものを、widht=100%;（横幅いっぱい）にします。
段組みが二段、三段であったとしても、スマホではそれを縦方向にレイアウトしますので、それぞれがwidht=100%;です。(上記の６と７に相当）
画像やボタンのように、２つ横に並べてもいい場合は（上記の２～５に相当）、widht=50%; 等とします。
（実際には余白・マージン等もありますので、適宜98%とか45%などの値にしてください）
フォントサイズや余白を整えよう
スマホ用のだいたいのレイアウトが整ったら、中身の文字のサイズや余白などを調整しましょう。
これはPC用のCSS同様にスタイルを指定するだけです。実際にスマートフォンで表示させて、見易いデザインに調整してください。
拡大しなくても読みやすい大きさ、リンク同士が近すぎて誤ってタッチしてしまわない大きさ、が基本です！
メニューの表示方法を工夫しよう
スマホ用のレイアウトで気をつけなくてはいけないのは、メニューの配置です。ページの内容がどんなに良くても、メニューが見つけ難かったり操作し難かったりすると、せっかくサイトを訪れたユーザーも他のページは見てくれず、直帰してしまいます。
パソコンであれば、メニューは上部か左右に常に表示されていて、すぐに探すことができますが、スマホでは上下にたくさんスクロールして探すことは困難です。
そこでよくあるのが、ページをスクロールしてもメニュだけは固定位置に常に表示させる方式。絶対位置指定（position: fixed;）で指定します。
※より詳しいテクニックについては、レスポンシブの技あれこれのページで詳しく解説します。
スマホ対応簡単解説 ＜目次＞
