レスポンシブデザインが簡単に作れる！スマホ対応に必須のCSSの書き方を解説

今回はレスポンシブデザインに初めて取り組む方に、レスポンシブデザインを作る上で欠かせないCSSの書き方を解説します。

1 レスポンシブデザインとは？
2 レスポンシブデザインを作るCSSの書き方
- 2.1 viewpointを設定する
- 2.2 メディアクエリを記述する
  - 2.2.1 PCファースト
  - 2.2.2 モバイルファースト方式
3 レスポンシブデザインを作る時に便利なCSSテクニック

レスポンシブデザインとは？

レスポンシブデザインとは閲覧するPCやスマホ、タブレットのウインドウ幅に合わせて表示が最適化されるデザインです。

最近は色んなウインドウ幅のPCやスマホ、タブレットを使用している人が増えたのでレスポンシブデザインは必須の対応となっています。

レスポンシブデザインを作るCSSの書き方

レスポンシブデザインを作る時は以下の２つを書く必要があります。

viewpointの設定
メディアクエリの設定

viewpointを設定する

viewpointとはWebページの表示領域を指定するmeta要素のname属性です。

viewportを指定することで、ユーザーの閲覧しているデバイスの画面サイズに合わせたサイトのレイアウトを表示できます。

下記をコピペで入れておけば問題ありません。

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

contentの中にいくつか属性を追加しているのでその部分を説明します。

分解すると「width=device-width」「user-scalable」「initial-scale」の3つが属性値として入っています。

表示領域の指定「width=device-width」

「width=device-width」はサイトの表示領域を閲覧しているデバイス画面の幅に合わせる指定ができるmeta要素のcontent属性の属性値。

ズーム操作の指定「user-scalable」

「user-scalable」はサイト上でズーム操作を許可する（yes）・許可しない（no）の指定ができるmeta要素のcontent属性の属性値。

画面を拡大させない設定

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

画面の拡大を許可する設定

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes">

初期のズーム倍率の指定「initial-scale」

「initial-scale」は初期のズーム倍率で最小倍率（minimum-scale）と最大倍率（maximum-scale）の指定ができるmeta要素のcontent属性の属性値。

最小倍率（minimum-scale）は0～10の範囲、初期値は 0.25。最大倍率（maximum-scale）は0～10の範囲、初期値は1.6となっています。

メディアクエリを記述する

メディアクエリはデバイスのウインドウ幅に合わせて適応するCSSを設定できる要素です。

サイトに訪れたユーザーのデバイスに合わせて、PCの時はPC用のCSS、スマホの時はスマホ用のCSSといったように適応するCSSを最適化することができます。

書き方は「スタイルシートに直接記述する方法」と「link要素としてmetaに記述する方法」があります。

またメディアクエリではブレイクポイントと呼ばれる分岐点を設定することで、デバイスのウインドウ幅に合わせたCSSの記述内容を適応させます。

ブレイクポイントの記述方法は、PCとスマホのどちらを基準にするかで書き方が変わってきます。

従来はPCメインでの書き方が大半でしたが、今はスマホの方が多いため、スマホファーストでCSSを記述することが増えています。

PCファーストかスマホファーストかは特に差が無いので書きやすい方を選びましょう。

PCファースト

PCファーストの場合、普通にPC用のコードを書いていき、その後にメディアクエリでスマホ用のCSSを書いていきます。

メディアクエリではタブレット向けにウインドウ幅が960px未満、スマホ向けに最大ウインドウ幅が480px以下のCSSを順番に書いていきます。

max-widthはウインドウ幅の最大値を指定できるプロパティになります。逆に最小値はmin-widthになります。

/* PC用CSS */

@media screen and (max-width: 959px) {
/* タブレット用CSS 959px以下 */
}

@media screen and (max-width: 480px) {
/* スマホ用CSS 480px以下 */
}

モバイルファースト方式

モバイルファースト方式では、まずメディアクエリを使わずにスマホ用のCSSを記述します。

その後、メディアクエリでウインドウ幅が481px以上のスマホ用のCSS、960px以上のタブレット用のCSSの順番で書いていきます。

/* スマホ用CSS */

@media screen and (min-width: 481px) {
/* タブレット用CSS 481px以上 */
}

@media screen and (min-width: 960px) {
/* PC用CSS 960px以上 */
}

レスポンシブデザインを作る時に便利なCSSテクニック

画像サイズの変更

PCとスマホでは画像の見せ方が変わることがよくあると思います。

PCでの見せ方だと画像が大きすぎたり、小さすぎたりする時に、スマホの横幅一杯に表示させるのに使えます。

@media screen and (max-width: 480px)　{
img {
　width: 100% ;
}
}

非表示にする

PCだけ表示させてスマホは非表示にしたい要素がある時は「display : none」を使います。

逆にPCやタブレットの時だけ非表示にすることもできます。

@media screen and (max-width: 480px)　{
img {
　display:none ;
}

横並びを解除する

PCで横並びに表示されている画像をスマホでは縦に並べるために横並びを解除するためには「float: none」を使います。

スマホでは横幅一杯に表示することが一般的だと思うのでそのCSSも書いています。

@media screen and (max-width: 480px)　{
img {
　float: none;
}

img {
　width: 100% ;
}
}

最大値を設定する

レスポンシブデザインではデバイスのウインドウ幅に合わせて表示を最適化するため、画像やブロック要素に対してwidth: 100% のように、パーセントでの指定することが多いです。

これによりPCでもスマホでも見やすい表示になるのですが、パーセント指定ではウインドウ幅が想定よりも大きい場合、画像やブロック要素が大きくなりすぎてレイアウトが崩れることがあります。

そういう時に役立つのが、先程も少し触れた最大値を指定できるmax-widthプロパティになります。

/* スマホ用CSS */
img {
  width: 100%;
}

@media screen and (min-width: 960px) {
img {
　max-width: 960px;
}
}

要素の位置をリセットする

positionのプロパティでabsoluteやfixedを指定していたものを解除するにはデフォルト値のposition: staticを指定することで解除することができます。

ちなみにposition:initialを使うことでもpositionのプロパティでabsoluteやfixedを指定していたものを解除することができます。ただしIEでは効かないので注意しましょう。

.example {
    position: static;
}

優先度を設定する

CSSでは全称セレクタやタイプセレクタなどよりも「class」を優先したり、「class」よりも「id」を優先するなどルールがあります。

スタイルシートで「!important」を指定されたスタイルは他の何よりも最優先される例外の設定ができます。

注意は他の何よりも最優先されるため、記述したことを忘れていると他のスタイルで指定したことが反映されないなど勘違いもよくあるので取り扱いは注意しましょう。

p {
  color : red !important;
}

img {
　width: 100% !important;
　height: auto !important;
}