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

CSS

スマートフォンの普及で出てきた「レスポンシブ・ウェブデザイン」。
今回は「レスポンシブ・ウェブデザイン」にするための基本的な方法を見て行きたいと思います。

使い方

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

外部ファイル読み込む時の記述法

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

@importでの方法

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

インラインの記述法

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

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

幅の指定

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

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

スタイルを変化させたい幅を指定する

min-widthとmax-widthを使って、この幅以下はこのスタイル、この幅以上はこのスタイルのように指定しレスポンシブデザインを実装します。

例えばウインドウサイズが320pxより大きい場合のみスタイルを適用したい場合は以下のようにします。

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

逆にウインドウサイズが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">

参考サイト

というわけでレスポンシブデザインにするための基本的な方法でした。