オンラインPC館

リキッドレイアウト

リキッドレイアウト

タブレットやスマートフォンは機種によって画面サイズが異なります。
このため横幅を固定すると全て表示されなくなりますが、100%に指定すれば自動的に端末の画面サイズに設定されます。
また、縦幅にはautoを指定する事で、行をまたぐような場合に自動的に調節してくれます。
さらにカラムやメニューの一部だけを可変にする場合は、自動計算が可能なcalcを使用すると便利です。
このようにできるだけサイズの指定をパーセントで行って可変できるようにしておくと、画面サイズごとの調整が少なくて済みます。
リキッドレイアウトとは

  1. 縦横のサイズ指定:要素 {width:100%; height:auto;}
  2. 特殊なカルクやメニューのサイズ指定:自動計算(calc)

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

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

ビューポートとメディアクエリー

ビューポート

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

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

メディアクエリー

メディアクエリーは端末や表示領域の横幅に合わせてスタイルを指定する事ができます。
メディアクエリーはあくまでも補足的なもので、基本的にはリキッドレイアウトでできる限り対応してください。
メディアクエリー

レスポンシブデザインの修正

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

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

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

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

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

レスポンシブ広告の配置

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

  1. 広告の要素 {width:100%;}
  2. 広告の親要素 {box-sizing:border-box;}

ポジションプロパティの修正

レスポンシブでpositionを多用すると、場合によってはサイズ別に調整が必要となって非常に不利です。
レスポンシブ化する際にCSSのコードが増えるようなら、positionを解除して別のプロパティを使用してください。

レスポンシブデザインのトラブル対策

横にずれる時の対処法

モバイル端末で閲覧する時に、指で動かすとサイトが横にずれる場合の対処法です。
この場合はモバイル用のレスポンシブコードで、以下のように指定します。
bodyの横幅を端末のサイズに合わせるため100%とし、paddingやmarginなどによるずれを防ぐためにbox-sizing:border-boxを指定します。
また、この指定をしてもまだずれる場合は、paddingやmarginなどでズレ現象を起こしている要素に対してbox-sizing:border-boxを指定する必要があります。

body {width:100%;height:auto;box-sizing:border-box;}

フォントが大きくなる時の対処法

フマートフォンの画面サイズによってはフォントが大きくなってしまう事があるようです。
この場合は以下のように指定すると改善されると思います。

body {-webkit-text-size-adjust:100%;}

フォームの自動拡大機能を無効化する方法

フォームの自動拡大機能を無効化したい場合は、フォームのHTMLページにあるビューポートの最後に以下を追加してください。
メールフォームや検索フォームは入力する際に自動で拡大されますが、自動では元に戻らないブラウザもあるためこうした対策が必要なようです。
なお、「user-scalable=no」でも同様の設定が可能ですが、こちらはW3Cで非推奨となっています。

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

オンラインPC館
トップページテクニックウェブ制作テクニック → レスポンシブデザイン