レスポンシブデザインの情報です。

レスポンシブデザイン

レスポンシブデザインニュース

レスポンシブデザインに関する情報です。
進化するレスポンシブWebデザイン 「SGDD」とは何か?

レスポンシブデザイン

レスポンシブデザインは異なる端末に対して個々に専用ページを作成するのではなく、既存のファイルを利用して対応させる手法です。
また、この方法はGoogleも推奨しており、様々なデバイスが混在する現在では非常に効果的な手法とされています。
レスポンシブデザインとは
レスポンシブ・ウェブデザインの簡単な作り方
WebページをRetina対応させるテクニック

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

レスポンシブデザインのレイアウトチェック

レスポンシブデザインを作成する際に、ローカル環境で簡単にレイアウトチェックを行う方法です。
チェック方法は色々ありますが、最も効果的なのは各ブラウザのレスポンシブモードを利用する方法です。
また、Firefoxには1クリックでレスポンシブモードにできるアドオンがあるので、これを利用すると便利です。
PageSpeed Insights、モバイルフレンドリーテスト
ブラウザから全170機種超のAndroid端末の検証が可能にスマートフォン端末検証システム「STF-Smartphone Test Farm」を開発・オープンソース化

  1. Firefox:ツールバー→開発ツール→レスポンシブデザインビュー(開発ツールアイコンがなければカスタマイズから追加)、レスポンシブチェックアドオン
  2. Chrome:Chromeの設定→その他のツール→デベロッパーツール→端末を選択

ビューポート

viewportはHTMLのヘッダ内に記述する事で、表示領域を変更する事ができるものです。
現在では以下のコードが無難とされており、これはGoogleも推奨しています。
ビューポートを設定する
表示領域を設定する

<meta name=viewport content="width=device-width, initial-scale=1">

リキッドレイアウト

タブレットやスマートフォンは機種によって画面サイズが異なります。
このため横幅を固定すると全て表示されなくなりますが、100%に指定すれば自動的に端末の画面サイズに設定されます。
また、縦幅の場合も文字列が長くて行をまたぐような場合に自動的に調節してくれます。
リキッドレイアウトとは

要素 {width:100%;height:100%;}

メディアクエリー

メディアクエリー

メディアクエリーを利用すれば端末や表示領域の横幅に合わせてスタイルを個別に指定する事ができます。
このメディアクエリーにはCSSを使い分ける方法とCSS内に直接記述する方法がありますが、恐らくCSS内に記述した方が利用しやすいと思います。
また、「and」を挟んで複数の条件を組み合わせる事で、最小サイズ~最大サイズなどの限定した指定も可能です。
ただし、メディアクエリーはあくまでも各種デバイス用にスタイルを使い分けるもので、表示されなくてもデータは全て読み込まれます。
このため共通するスタイルを1つにまとめるなどして、できるだけCSSを肥大化させない工夫が必要になります。
メディアクエリとは

  1. ビューエリア(表示領域のサイズ):max-width(これ未満の表示に適用)、min-width(これ以上の表示に適用)
  2. デバイスサイズ(端末のサイズ):max-device-width(これ未満のデバイスに適用)、min-device-width(これ以上のデバイスに適用)

メディアクエリーのサイズ指定

メディアクエリーのサイズの設定方法です。
メディアクエリーでは全ての小型端末の画面サイズを設定する必要はなく、特定サイズ以下だとレイアウトが崩れると言う際にCSSで再指定します。
つまりどのサイズで崩れるかと言うのが基準点になるので、レイアウトが崩れなければ分ける必要もありません。
大抵は多くても数種類程度までで十分だと思いますが、モバイル端末は横置きで利用する場合もあるので注意してください。

  1. 一般対応:全デバイス共通(サイズ指定無し)、モバイル用(950px以下)、スマホ用(500px以下)
  2. 全デバイス対応:PC用、タブレット用、スマホ用、各モバイル端末の横置き用

個別にCSS指定

メディアクエリーを利用すれば端末や表示領域の横幅に合わせて使用するCSSを使い分ける事ができます。
これにより小型端末でサイトを表示した時だけ、レイアウトを変更すると言った事が可能になります。
デバイスに合わせてCSSを振り分ける「Media Queries」

ウィンドウサイズの指定

個別にCSS指定する場合のウィンドウサイズの指定方法です。

<link rel="stylesheet" type="text/css" href="CSSのパス" media="screen and (max-width:この値未満に適用px)">
<link rel="stylesheet" type="text/css" href="CSSのパス" media="screen and (min-width:この値以上に適用px)">
<link rel="stylesheet" type="text/css" href="CSSのパス" media="screen and (max-width:この値未満に適用px) and (min-width:この値以上に適用)">

デバイスサイズの指定

個別にCSS指定する場合のデバイスサイズの指定方法です。

<link rel="stylesheet" type="text/css" href="CSSのパス" media="screen and (max-device-width:この値未満に適用px)">
<link rel="stylesheet" type="text/css" href="CSSのパス" media="screen and (min-device-width:この値以上に適用px)">
<link rel="stylesheet" type="text/css" href="CSSのパス" media="screen and (max-device-width:この値未満に適用px) and (min-device-width:この値以上に適用)">

個別にスタイル指定

メディアクエリーはCSSを指定する以外にも、CSS内に直接記述する方法もあります。
これを使えばより細かな個別のスタイル指定が可能になります。
ただし、CSSは記述の順番が狂うとレイアウトに影響するものがあるので、このあたりには注意が必要です。
CSS3のMedia Queries(メディアクエリ)の使い方と実装例

ウィンドウサイズの指定

個別にスタイル指定する場合のウィンドウサイズの指定方法です。

@media screen and (max-width:この値未満に適用px) {スタイルを記述}
@media screen and (min-width:この値以上に適用px) {スタイルを記述}
@media screen and (max-width:この値未満に適用px) and (min-width:この値以上に適用) {スタイルを記述}

デバイスサイズの指定

個別にスタイル指定する場合のデバイスサイズの指定方法です。

@media screen and (max-device-width:この値未満に適用px) {スタイルを記述}
@media screen and (min-device-width:この値以上に適用px) {スタイルを記述}
@media screen and (max-device-width:この値未満に適用px) and (min-device-width:この値以上に適用) {スタイルを記述}

レスポンシブデザインの注意点

レスポンシブデザインによる主な修正点

レスポンシブ化によって変更や修正が必要と思われる主な内容は以下になります。

  1. デバイスタイプ:PC、タブレット、スマートフォン
  2. メニュータイプ:サイドメニュー→ヘッダメニュー
  3. フォントサイズ:端末に合わせて個別に調節する(読みやすいフォント サイズを使用する
  4. PHPページ:端末に合わせて調節する
  5. Web広告:レスポンシブ広告に変更して縦に配置する(レスポンシブ広告ユニットについて
  6. 地図データ:CSSで調整する(レスポンシブなイメージマップの作成

メニュータイプとフォントサイズの変更

メニューをサイドに表示している場合は、レスポンシブ時にヘッダ表示に変更してください。
サイドのまま利用するとコンテンツ部分が狭くなり、非常に見づらくなります。
また、フォントサイズも端末や画面のサイズに合わせて再調節が必要になります。

リキッドレイアウトの対象

PHPでページを表示しているような場合は、HTMLページと共にPHPページもリキッドレイアウトの調節が必要です。
また、動的コンテンツや画像ファイルなどは自動縮小されると見えなくなる事もあるので、そのあたりの調整も必要です。

レスポンシブ広告の配置

レスポンシブ広告は自動でサイズ調節が行われますが、ページのサイドに配置するとコンテンツ部分が狭くなるなど弊害が出る可能性があります。
レスポンシブを考慮する場合は、広告を上下など縦に配置した方が効果的です。

オンラインPC館
TOPページテクニックネット → レスポンシブデザイン