SYMMETRIC Web開発ブログ
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。
※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました

レスポンシブ対応するためのCSSの書き方

   

こんにちは、開発チームの宇都宮です。
普段はレスポンシブと同様のマルチデバイス対応を実現する「スマホのサイト制作。PCは自動変換 | alter.js」に携わっています。

今回はレスポンシブデザインでWebページを作る際の基本テクニックをご紹介したいと思います。レスポンシブデザインというのは、スマートフォンやPC、タブレットといった異なる画面サイズを持つデバイス向けのWebサイトを、一つのソースコードで実現する手法のことを指します。HTMLやCSSの書き方は、難しい内容ではないのでお付き合いください。

レスポンシブの基本① viewportの指定

 viewportとは

viewportとはWebページの表示領域を指します。viewportを正しく指定すると、画面サイズに応じたレイアウトの最適化ができるようになります。レスポンシブデザインではこのviewportが重要で必須のテクニックになります。

viewportの書き方

viewportはHTMLの中にmetaタグとして指定します。content属性の内容でどのような表示領域を持つかを指定します。

よく使うのは、以下の2パターンです。
1.画面拡大できないようにする場合

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

2.画面拡大ができるようにする場合

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

widthプロパティ

表示領域の幅を指定するプロパティです。数値で直接指定するか、device-widthを指定します。device-widthを指定した場合は、表示しているデバイスの画面サイズが表示領域になります。レスポンシブデザインでは通常、device-widthを使用します。

initial-scale、minimum-scale、maximum-scaleプロパティ

initial-scaleで初期表示時のズーム倍率を指定します。minimum-scalemaximum-scaleではそれぞれ、ズーム倍率の最小値と最大値を指定します。特別な理由がない限りは、initial-scaleに1を指定し、初期表示時はズームしていない状態にします。

user-scalableプロパティ

ピンチインによるズーム処理が可能かどうか指定するプロパティです。yes を指定するとズーム可能になります。ズームを禁止したい場合は no を指定します。

レスポンシブの基本② メディアクエリの指定

メディアクエリとは

メディアクエリは、レスポンシブデザインを実現するための重要なテクニックです。レスポンシブデザインでは、デバイスの画面幅に応じて異なるデザインを記述する必要があります。メディアクエリを使用することで、デバイスの画面幅が〇〇px以上だったらこのCSS、〇〇px以下だったらこっちのCSSといった感じで、画面幅に応じてCSSを切り替えることができます。

メディアクエリではブレイクポイントと呼ばれる「分岐点」を設定し、分岐点を境目にしてCSSの記述内容を変化させます。ブレイクポイントの記述方法は、PCサイトを基準に考える「PCファースト方式」とスマホサイトを基準に考える「モバイルファースト方式」の二通りがあります。

  • メディアクエリでCSSを画面幅ごとに切り替える
  • PCファーストにするかモバイルファーストにするかでブレイクポイントの指定が変わる

レスポンシブサイト用のブレイクポイントのサイズについてはこちらの記事で細かく考察しています。

参考:レスポンシブサイト用ブレイクポイント考察!時代に適するサイズとは?

メディアクエリの書き方

メディアクエリを指定するには、CSSに@mediaという記述をします。メディアクエリを書く時には、「PCファースト方式」か「モバイルファースト方式」かで書き方が変わるので、どちらにするかを決めておきましょう。

PCファースト方式

PCファースト方式では、まずメディアクエリを使わずにPC用のCSSを記述します。その後、メディアクエリで表示領域が960px未満(959px以下)のデバイス用のCSS、480px以下のデバイス用のCSSの順に記述していきます。

/* PC用のCSSはメディアクエリの外に記述する */

@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS(タブレット用) */
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS(スマホ用) */
}

モバイルファースト方式

モバイルファースト方式では、まずメディアクエリを使わずにスマホ用のCSSを記述します。その後、メディアクエリで表示領域が481px以上のデバイス用のCSS、960px以上のデバイス用のCSSの順に記述していきます。

/* スマホ用のCSSはメディアクエリの外に記述する */

@media screen and (min-width: 481px) {
	/* 481px以上に適用されるCSS(タブレット用) */
}
@media screen and (min-width: 960px) {
	/* 960px以上に適用されるCSS(PC用) */
}

レスポンシブCSSのサンプル

レスポンシブでよく使うプロパティには、次のようなものがあります。

プロパティ用途
width, max-width画面サイズに応じて画像やボックスの大きさを制御する
display画面サイズに応じた表示・非表示を制御する
flex画面サイズに応じて横並びレイアウトにする

それではサンプルで使い方を解説します。

width, max-width プロパティ

画面サイズに合わせて、画像やボックス領域の幅を伸び縮みさせるときに使います。

レスポンシブでは width: 100% のように、パーセンテージでの指定することが多いです。ただ、パーセンテージで大きさを指定すると、PCブラウザのように画面幅が1000pxを超えてくるようなときに、画像が大きくなりすぎてしまいます。そこで、max-widthプロパティで最大の幅を指定します。

以下の例では、メディアクエリ内でmax-widthプロパティを指定しています。

/* スマホ用のCSSはメディアクエリの外に記述する */
img {
  width: 100%;
}

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

CodePenを開き、ブラウザのウィンドウ幅を広げたり狭めたりしてみてください。

CodePenでプレビューする

See the Pen レスポンシブでwidth/max-widthプロパティを使うサンプル by EGASHIRA, Shintaro (@symm_egashira) on CodePen.

手元で動くサンプルをダウンロード(515KB)

displayプロパティ

ある要素を「PCだけ表示する」「スマートフォンだけ表示にする」というように、デバイスごとに表示・非表示を切り替えるときに使います。メディアクエリを使い、特定の画面サイズのときに displayプロパティを none に指定すると、非表示になります。

たとえば、「現在地から検索」ボタンをスマホだけ表示する場合は、次のように記述します。

/* スマホ用のCSSはメディアクエリの外に記述する */
.search-here {
  color: #fff;
  background-color: #e2001b;
  border: none;
  border-radius: 5px;
  padding: 4px 10px;
  margin: 10px 10px;
}

@media screen and (min-width: 481px) {
  .search-here {
    display: none;
  }
}

CodePenを開き、ブラウザのウィンドウ幅を広げたり狭めたりしてみてください。

CodePenでプレビューする

See the Pen レスポンシブでdisplayプロパティを使うサンプル by EGASHIRA, Shintaro (@symm_egashira) on CodePen.

flex, flex-wrapプロパティ

画面サイズの狭いデバイスでは縦並び、広いデバイスでは横並びにレイアウトすることがありますよね。CSSで横並びさせる方法は様々ありますが、便利なのがフレックスボックスレイアウトです。フレックスボックスレイアウトでは、flexプロパティやflex-wrapプロパティなどを使います。

画面サイズの大きいデバイスにプロパティなどを適用するので、モバイルファースト方式でメディアクエリを指定すると、コード量も少なく、分かりやすい書き方になります。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
img {
  width: 100%;
}

@media screen and (min-width: 481px) {
  ul {
    display: flex;
    flex-wrap: wrap;
  }
  li {
    width: 50%;
    box-sizing: border-box;
    padding: 10px;
  }
}
@media screen and (min-width: 640px) {
  li {
    width: 33%;
  }
}

CodePenを開き、ブラウザのウィンドウ幅を広げたり狭めたりしてみてください。

CodePenでプレビューする

See the Pen レスポンシブでフレックスボックスレイアウトを使うサンプル by EGASHIRA, Shintaro (@symm_egashira) on CodePen.

手元で動くサンプルをダウンロード(515KB)

レスポンシブでの画像切り替え方法

レスポンシブで画像を切り替える方法はたくさんあります。対応方針を決めてから取り掛かった方がよいでしょう。

img画像の切り替え

imgタグのsrcset属性を使う方法と、メディアクエリでimgタグの表示・非表示を切り替える方法があります。

srcset属性を指定

画面サイズごとに使用する画像ファイルをsrcset属性で指定します。

<img srcset="image-sp.jpg 480w, image-tablet.jpg 640w, image-pc 960w">

srcset属性で、メディアクエリと同じような切り替えができます。くわしくは、以下の記事を参考にしてください。
レスポンシブの画像出し分けを適切にできる!srcset属性解説

img要素の表示・非表示を切り替え

imgタグを複数記述し、使用するimgタグをdisplayプロパティで切り替えるという方法です。

<img class="mobile" src="image-sp.jpg">
<img class="pc" src="image-pc.jpg">

CSSでは以下のようにメディアクエリでdisplay: noneを指定するルールを記載しておきます。

@media screen and (min-width: 481px) {
  .mobile {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  .pc {
    display: none;
  }
}

src属性を動的に切り替え

JavaScriptで画面サイズに応じてsrc属性を切り替える方法です。たとえば、src属性にはモバイル用の画像パスを書いておき、PCブラウザからアクセスがあったときはPC用の画像パスに変換するというやり方です。

HTMLがシンプルになるメリットがありますね。alter.jsもこの方式を採用しています。

背景画像はメディアクエリで切り替え

背景画像は、background-imageプロパティをメディアクエリで切り替えます。

.main-visual {
  background-image: url('main-sp.jpg');
}

@media screen and (min-width: 481px) {
  .main-visual {
    background-image: url('main-pc.jpg');
  }
}

手元で動くサンプルをダウンロード(515KB)

レスポンシブでのテーブル切り替え方法

テーブルの見た目をレスポンシブで切り替えることもできます。

テーブルの行列を転置する

横長テーブルをスマホでは縦長テーブルで表示するサンプルです。

メディアクエリを使い、480px以下のデバイスの時、tr要素をdisplay: flexで横並び表示させ、th/td要素をdisplay: block で縦表示しています。

CodePenでプレビューする

See the Pen レスポンシブでテーブルレイアウトを切り替えるサンプル by EGASHIRA, Shintaro (@symm_egashira) on CodePen.

手元で動くサンプルをダウンロード(515KB)

レスポンシブ対応のCSSを書くための参考サイト集

今回紹介した書き方を含め、レスポンシブデザインに対応したCSSを初めて書く人向けに、読んでおいた方が幸せになれるサイトをまとめてみました。レスポンシブデザインの作り方の基本を抑えたい方は是非、参考にしてみてください。

レスポンシブ ウェブデザインの基本

WebFundamentalsのレスポンシブウェブデザインの基本

レスポンシブ ウェブデザインの基本 | Web | Google Developers

Googleが公開しているドキュメントです。なぜ、レスポンシブで作ると良いのかといった説明や基本的なCSSの記述方法が書かれています。このドキュメントはデザイン・UXに関するページの一コンテンツとして存在しているので、ユーザーにとってどのようにコンテンツが見えるのかに主眼が置かれています。デザイン、UX観点でも参考になるドキュメントです。世界で最も使われているAndroid OSを作っているGoogleのドキュメントには目を通しておくべきでしょう。レスポンシブでのブレイクポイントのサイズの決め方に関するセクションはとても参考になります。

レスポンシブ ウェブ デザイン

レスポンシブ ウェブ デザイン  |  Google 検索デベロッパー ガイド  |  Google Developers

レスポンシブ ウェブ デザイン  |  Google 検索デベロッパー ガイド  |  Google Developers

こちらもGoogleが公開しているドキュメントです。モバイルファーストインデックス(以下MFI)に向けたガイドラインの一コンテンツとして公開されている点が特徴です。MFIはGoogleで検索結果を表示した際の表示順位を、モバイルサイトのコンテンツを元に行うというもので、2018年3月27日に開始されたものです。MFI適用以降、モバイルサイトの重要性が更に増しています。そのような状況下どのようにモバイルサイトを作ればモバイルフレンドリーになるのか、つまりGoogleの検索順位を上げることができるのか、詳しく書かれています。

Optimizing Your Website for Safari

Optimizing Your Website for Safari

https://developer.apple.com/documentation/webkit/safari_tools_and_features/optimizing_your_website_for_safari

Appleが公開している開発者向けのドキュメントサイトです。ウェブサイトをSafari向けにどのように最適化すれば良いかまとめられています。SafariはiPhoneやMacといったApple製品にインストールされているウェブブラウザです。レスポンシブデザインに関わるトピックとしては、動画でwatchOS向けのウェブ制作手法Safariを使用した開発方法等が解説されています。ウェブデザインのベストプラクティスは、W3Cで公開されているHTML5、CSS3の標準仕様に準拠することされていますので、標準仕様を抑えることも重要ですね。アクセシビリティやタッチスクリーンなどにも触れられています。

Media Queries

W3C Media Queries仕様書

https://www.w3.org/TR/css3-mediaqueries/

今回紹介したレスポンシブの基本テクニックであるメディアクエリの標準仕様です。ドキュメントのボリュームが多く、熟読するには気合と時間が必要です。まずは全体像を把握する、不明点が出た際に原典として参照するといった使い方がいいと思います。

CSS Device Adaptation Module Level 1

W3C CSS Device Adaptation Module Level 1仕様書

https://www.w3.org/TR/2016/WD-css-device-adapt-1-20160329/

もう一つのレスポンシブ基本テクニック、viewportに関する仕様です。概要を把握しておき、不明点が出た際に参照する使い方が良さそうです。こちらも英語ドキュメントですが、インターネット上には和訳もあるので、そちらを参照するのも良いと思います。

まとめ

いかがでしたでしょうか。レスポンシブデザインでの基本テクニックを二つ紹介しました。どちらもデファクトスタンダードと思われる手法です。レスポンシブデザインで作る場合、viewportの指定はあまり選択肢がありませんが、メディアクエリは今回ご紹介した方法以外にも色々なテクニックがあり奥深い領域なので調べてみると面白いですね。ただし、どの手法もデバイス毎にCSSを沢山書かなくてはならないので、Webエンジニアにとっては頭の痛いところかつ、腕の見せ所です。
なお、今回はご紹介しませんでしたが、javascriptでの表示切替でレスポンシブを実現することも可能です。

また、レスポンシブデザインでCSSを書くときに参考になるサイトもまとめました。特にGoogleやAppleのサイトは情報もモバイルファーストの考え方に即したものになっており、時代にマッチしたものになってますね。原典に関しては英語だしボリュームも多いし、全てを読むのは難しいですが、サイトの存在を知っておくことは重要でしょう。これからレスポンシブデザインにチャレンジする方は、参考にしてみてください。

シンメトリックでは、レスポンシブデザインの知識がなくてもレスポンシブと同様のマルチデバイス対応を実現する「スマホのサイト制作。PCは自動変換 | alter.js」を提供しています。スマホ中心のWebサイト制作、リニューアルをお考えでしたら、ぜひ使ってみてください。

また、alter.jsを使用したLP制作サービス「スマホからLP制作」も展開しています。
こちらもご興味ありましたら是非お問い合わせください。

Page Top