Box modelについて（レスポンシブデザイン）
スマホサイト対応ができているかの確認を行う時は、
Google の公式ツールである「モバイルフレンドリーテスト」を使用。
レスポンシブ Web デザインの実施手順
- 幅広デザインでの Web ページを作成します。
- viewport 定義を指定します。
- 横幅変動時のコンテンツ幅を設定します。
- Media Querie を使用してデザインを整えます。
- 画面サイズに合わせた表示部品を導入します。
- 幅広デザインでの Web ページ作成
PCサイズを作成してから、タブレットサイズやスマホサイズを作成します。 - viewport 定義の指定 htmlのhead 要素内に指定
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,viewport-fit=cover”>
widthビューポートの横幅をピクセル数で指定。
device-width を指定するとビューポートの横幅はデバイスの描画領域の横幅になります。
heightビューポートの高さをピクセル数で指定。
device-height を指定するとビューポートの高さはデバイスの描画領域の高さになります。
initial-scaleズームの初期倍率を 0.0 ～ 10.0 で指定。
maximum-scaleズームの最大倍率を 0.0 ～ 10.0 で指定。
minimum-scaleズームの最小倍率を 0.0 ～ 10.0 で指定。
user-scalableyes はユーザーがズームできることを指定し、
no はユーザーがズームできないことを指定。
viewport-fit画面の表示領域が長方形で無い（カメラ部分などがある）デバイスの場合に左右に余白が取られますが viewport-fit=cover を指定することで左右の余白がなくなり画面全体に表示されるようになります。 - 横幅変動時のコンテンツ幅を設定
表示する横幅が変動しても表示領域を超えない（横スクロールが発生しない）ようにコンテンツ全体幅を設定します。
コンテンツ全体幅の設定は、「content + padding + border + margin」
コンテンツ全体幅を算出する時は、box-sizing プロパティの指定値によって width プロパティ値の扱いが異なります。
box-sizing プロパティに「content-box」が指定されている場合の width プロパティ値は、「content」部分の幅を指定。
また、box-sizing プロパティに「border-box」が指定されている場合の width プロパティ値は、「content + padding + border」部分の幅を指定。
max-width プロパティ（width プロパティの取ることができる最大値）を使用すると横幅の調整がしやすくなる。
width プロパティには、ピクセル値よりも百分率（親の幅に対する比率（%））で指定した方が横幅の変化に柔軟に対応できる。 - Media Querie でデザインを整える
Media Queries （メディアクエリ）は、CSS スタイルに適用できるシンプルなフィルタ。
メディアクエリを使用すると、画面の種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいて、スタイルを容易に変更できる。 - 画面サイズに合わせた表示部品の導入
画面サイズに合わせて異なる表示部品を導入することで操作性を向上させることできます。
例えば、幅狭時（スマホなど）にはメニューの表示型式をハンバーガーメニューにすることで狭い画面を有効に使用することが可能になります。
ハンバーガーメニューとは、主にスマートフォンやタブレット端末に対応したWebサイトにおけるナビゲーションメニューの表示形式の一つです。 アイコンは画面の左上隅か右上隅に配置されていることが多くアイコンをクリックまたはタップすることでメニューが表示されることから「折り畳みメニュー」と呼ばれることもあります。
現在はスマホで見る方がほとんどなので、レスポンシブ設定を行い、
見やすくわかりやすいホームページ制作が重要だと思いました。
コメント