リキッドレイアウト
リキッドレイアウト
タブレットやスマートフォンは機種によって画面サイズが異なります。
このため横幅を固定すると全て表示されなくなりますが、100％に指定すれば自動的に端末の画面サイズに設定されます。
また、縦幅にはautoを指定する事で、行をまたぐような場合に自動的に調節してくれます。
さらにカラムやメニューの一部だけを可変にする場合は、自動計算が可能なcalcを使用すると便利です。
このようにできるだけサイズの指定をパーセントで行って可変できるようにしておくと、画面サイズごとの調整が少なくて済みます。
リキッドレイアウトとは
- 縦横のサイズ指定：要素 {width:100%; height:auto;}
- 特殊なカルクやメニューのサイズ指定：自動計算（calc）
リキッドレイアウトの対象
PHPでページを表示しているような場合は、HTMLページと共にPHPページもリキッドレイアウトの調節が必要です。
また、動的コンテンツや画像ファイルなどは自動縮小されると見えなくなる事もあるので、そのあたりの調整も必要です。
ビューポートとメディアクエリー
ビューポート
viewportはHTMLのヘッダ内に記述する事で、表示領域を変更する事ができるものです。
現在では以下のコードが無難とされており、これはGoogleも推奨しています。
ビューポートを設定する
表示領域を設定する
<meta name=" viewport" content=" width=device-width, initial-scale=1">
メディアクエリー
メディアクエリーは端末や表示領域の横幅に合わせてスタイルを指定する事ができます。
メディアクエリーはあくまでも補足的なもので、基本的にはリキッドレイアウトでできる限り対応してください。
メディアクエリー
レスポンシブデザインの修正
レスポンシブデザインによる主な修正点
レスポンシブ化によって変更や修正が必要と思われる主な内容は以下になります。
- デバイスタイプ：PC、タブレット、スマートフォン
- メニュータイプ：サイドメニュー→ヘッダメニュー
- フォントサイズ：端末に合わせて個別に調節する（読みやすいフォント サイズを使用する）
- PHPページ：端末に合わせて調節する
- Web広告：レスポンシブ広告に変更して縦に配置する（レスポンシブ広告ユニットについて）
- 地図データ：CSSで調整する（レスポンシブなイメージマップの作成）
メニュータイプとフォントサイズの変更
メニューをサイドに表示している場合は、レスポンシブ時にヘッダ表示に変更してください。
サイドのまま利用するとコンテンツ部分が狭くなり、非常に見づらくなります。
また、フォントサイズも端末や画面のサイズに合わせて再調節が必要になります。
レスポンシブ広告の配置
レスポンシブ広告は自動でサイズ調節が行われますが、ページのサイドに配置するとコンテンツ部分が狭くなるなど弊害が出る可能性があります。
レスポンシブを考慮する場合は、広告を上下など縦に配置した方が効果的です。
また、広告のレイアウトがはみ出るような場合は、以下のように記述すると改善できると思います。
- 広告の要素 {width:100%;}
- 広告の親要素 {box-sizing:border-box;}
ポジションプロパティの修正
レスポンシブでpositionを多用すると、場合によってはサイズ別に調整が必要となって非常に不利です。
レスポンシブ化する際にCSSのコードが増えるようなら、positionを解除して別のプロパティを使用してください。