作成日:  (更新日: )

Webサイトのレスポンシブ化のための作業項目

このページは、Web サイトや Web システムをレスポンシブ化する際に行うよくある作業をまとめる予定のページです。

目次

事前に必要な知識

レスポンシブ化をしたことがない、知識が無い、という場合、まず下記を知っておくとよいです。

メディアクエリ

CSS にはブラウザの横幅などによってスタイルを変更できる「メディアクエリ」と呼ばれる仕組みがあります。
これは「横幅が 〇〇 px 以下の時、横並びのメニューを縦並びにしたい」のような要望を実現できる仕組みで、プログラム言語でいう if 文にあたるものです。この仕組みは1つのページを PC 向け、スマートフォン向け、タブレット向けなどの様々な端末向けに表示調整するためによく使用します。

ブラウザの横幅が 680 px 以下の時にスタイルを適用する例 (max-width)
@media (max-width: 680px) {
    body {
        color: red;
    }
}
ブラウザの横幅が 681 px 以上の時にスタイルを適用する例 (min-width)
@media (min-width: 681px) {
    body {
        color: red;
    }
}

ブレークポイント (ブレイクポイント)

メディアクエリで「〇〇 px 以下」などと幅を区切ってスタイルを記述する時、区切る幅の境界線を「ブレークポイント」と呼ぶことがあります。
例えば CSS フレームワークの Bootstrap (4) では、下記のようなブレークポイントが決められています。

名称 条件
xs 576 px 未満
sm 576 px 以上
md 768 px 以上
lg 992 px 以上
xl 1200 px 以上

この用語を必ず覚えておく必要はありませんが、インターネット上で検索するときにこの用語を知っていると検索しやすいです (「CSS ブレークポイント」等で検索)。また、いくつかの JavaScript ライブラリでは、レスポンシブ対応のために「breakpoints」という設定がある場合があります。(Slider Pro 等)

スマートフォン、タブレット、PC を厳密に判別することはできない

前述のメディアクエリを使用することで幅に合わせたデザイン調整を行うことはできますが、「この幅だから絶対にスマートフォン」「この幅だから絶対にタブレット」という判別はできないということをあらかじめ知っておいてください。(厳密に分けようとすると効率が悪いため、どのタイプの端末でも極力問題が少なくなるように対応する)

  • 理由
    • スマートフォンやタブレットでは、ユーザーが自由に持ち方を縦向き (「ポートレート」と呼ばれる) にも横向き (「ランドスケープ」と呼ばれる) にも変更できます。
    • PC では、ユーザーが自由にブラウザ (ブラウザウィンドウ) の幅を変更できます。
    • スマートフォン、タブレット、PC とも様々な製品が発売されており、大きいサイズのスマートフォンや、小さいサイズのタブレット、タブレット PC (Surface Pro など。「2 in 1」と呼ばれる) などがあります。

特にタブレットと PC (ノート PC や小型ディスプレイで使用しているデスクトップ) は幅が近いため、両者に境界線を引くことは難しいです。

レスポンシブ化のために必要な作業内容

ここではレスポンシブ化をするときによく必要になる作業内容を説明します。

ここで出てくる例ではスマートフォン対応のための境界線 (ブレークポイント) を 680px にしていますが、特に深い理由はありません。

ページの縮小を防ぐ (<meta name="viewport"> を追加する)

PC 向けに制作したサイトをそのままスマートフォンで表示するとページ全体が端末の幅に合うように縮小されてしまいます。
文字サイズも縮小されて見づらくなってしまうため、ページの縮小を防ぐための <meta> タグを追加します。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTML に組み込んだ例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
  • width=device-width は「表示幅を端末の幅にする」、initial-scale=1.0 は「初期倍率を 1.0 倍にする」という意味です。
    content に指定できる内容はいろいろありますが、基本的には上記のままの <meta> タグを入れておけばよいです。
    (詳しく知りたい場合は <meta>: 文書レベルメタデータ要素 - HTML: HyperText Markup Language | MDN を確認してください)
  • Web システムや WordPress などの CMS を使っている場合は、共通レイアウトファイルに <meta> タグを追加するだけで済むと思います。
    (WordPress なら、だいたいは header.php に追加します)

画像の最大幅を指定する

スマートフォンなどでページを見たときに大きな画像が画面からはみ出ないように、CSS で最大幅を指定します。
この指定はメディアクエリ無しで指定してもよいです。(PC 向けサイトでも大きな画像が画面からはみ出る可能性が無いわけではないため)

例
img {
    max-width: 100%;
}

入力部品の文字サイズを変更する

iOS や Android ではテキスト入力欄 (<input type="text>) やプルダウン (<select>) などの入力部品の文字サイズが 16px 未満だとユーザーが入力部品をタップしてフォーカスしたときに画面全体が拡大されてしまうため、特にスマートフォンでは入力部品の文字サイズを 16px 以上にします。

例
@media (max-width: 680px) {
    input, select, textarea {
        font-size: 16px;
    }
}

段組みや固定表示を変更する

float や display: flex、position: absolute 等でレイアウトしている要素がスマートフォン等で見たときに見づらくなっている場合は、メディアクエリを使用してスタイルの調整を行います。

プロパティや値 対応の例
float float: none, clear で解除する
display: flex ・display: block で解除する
・flex-wrap: wrap で折り返す
・幅 (width や flex-basis) を調整する
position position: static で解除する

テーブルの表示を変更する

テーブルがスマートフォン等で見づらくなっている場合は、メディアクエリを使用してテーブルを解除する (td などを display: block にする) か、テーブルが横スクロールができるように調整します。

例
@media (max-width: 680px) {
    table, thead, tbody, tfoot, tr, th, td {
        display: block;
    }
}

グローバルメニューの表示を変更する

一般的なグローバルメニューはページ上部に横並びになっているかページの左右に段組みレイアウトで配置されているかのどちらかが多いですが、スマートフォン等では見づらくなってしまうのでメニューの配置を変更します。

よくあるのは「Ξ」のようなメニューボタンを設けてタップするとメニューが表示されるようにするもので、「Ξ」がハンバーガー (🍔) に見えることから「ハンバーガーメニュー」と呼ばれたり、右や左から引き出しを引くように表示されるものが多いことから「ドロワーメニュー」(drawer = 引き出し) と呼ばれたりしています。

マウス前提の機能をタッチ操作でも可能なように変更する

:hover や JavaScript の mouseover (mouseenter) イベントの処理等、マウスが使えることが前提になっている機能 (グローバルメニューのサブメニューを開くなど) を、タッチ操作でも使用できるようにします。

  • JavaScript の click イベントの処理は変更する必要がないことが多いです。iOS や Android のブラウザ側がタッチ操作でも click イベントを起こすようにしているためです。
  • :hover が満足にサポートされている端末かを判別するための any-hover というメディアクエリの判別方法 (メディア特性) があるため、これを活用して表示を調整することもできます。(IE 以外は対応しています)

  1. 一般的な Web サイトでは最初に PC 向けにスタイルを記述してそのあとにスマートフォンやタブレット対応することが多いため、min-width (「〇〇 px 以上」) よりは max-width (「〇〇 px 以下」) のほうが使用頻度が高いです。モバイルファースト (スマートフォンのデザインから先に記述する) の場合は逆に min-width の使用頻度が高くなります ↩︎