レスポンシブデザインにするための基本的な方法

使い方

記述方法は以下になります。

<link href="css/mini.css" rel="stylesheet" media="only screen and (幅の指定)" >

@import url("mini.css") screen and (幅の指定)

@media screen and (幅の指定) {
～ここに記述～
}

個人的には同じファイルで見れたほうが嬉しいので、インラインを使っています。自分が管理しやすい方でよいかと思います。

幅の指定

上記のコードの「幅の指定」部分に適用したい幅を入れてスタイルを調整していきます。

この「幅の指定」の部分には、レスポンシブ以外に使えるもの以外にもいろいろ入れられますので、詳しい説明は以下のページをご覧下さい。

• メディアクエリ – CSS | MDN
• Media Queries

@media screen and (min-width: 320px) {
～指定～
}

@media screen and (max-width: 320px) {
～指定～
}

@media screen and (min-width: 300px)　and (max-width: 600px) {
～指定～
}

これらをレスポンシブを実装したい幅に合わせて適用していきます。以下のサンプルページはウインドウの横幅を変えると背景色が変わる指定をしてます。

• 横幅を変えると背景色が変わるサンプルページ

どの幅を指定するか

あとはどの幅でスタイルを切り替えるかですが、そのページをどのデバイスで最適化するかによるかと思います。特にスマートフォンのAndroidは様々なサイズがあるので
対象デバイスを調べておかないといけません。iPhoneの横幅はポートレート（縦長）だと320px、ランドスケープ（横長）だと480pxです。

参考ページ

• スマートフォン、タブレット、デスクトップのためにレイアウトの幅をどのように設計すればよいか | コリス

忘れずにviewportを指定する

スマートフォンに対応する場合には「viewport」を指定します。「viewport」とはパソコンにおいてブラウザのウインドウサイズになります。

このviewportを指定しないと、iPhoneではviewportが980pxに設定されているため意図しない表示になります。

指定は以下のように出来ます。

• width　横幅の指定　device-widthを指定するとデバイスの横幅に合うようになる
• height　高さの指定　device-heightを指定するとデバイスの縦幅に合うようになる
• initial-scale　拡大率の初期値
• minimum-scale　拡大率の最小値
• maximum-scale　拡大率の最大値
• user-scalable　ユーザーに拡大縮小を許可するか

以下のものが、デバイスの横幅に合わせて表示させ、拡大縮小をさせない例になります。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">