本ページトップのような画像と文字をレイアウトする、というのがこのページの内容である。

まず、画像は二種類用意する

ひとつはPC用の画像、PC用は横長の画像にしなければ、画像だけでPCのディスプレイを埋め尽くしてしまう。横長の中にイメージ全体が入るようにしてあげる。

もうひとつはモバイル用の画像、モバイル用はやや縦長の画像にするとバランスが良い。

Swiperを段落に差し込んでみる

さて、本題のページとは内容が異なってしまうが、Swiperをこのページの段落の中へ差し込んでみよう。

Swiperは起動が軽くて使い勝手が良い。Swiperのみでページを構成するプレゼンテーション型だとレイアウトの細かな部分に手こずるが、以下のようにページに差し込む場合はとても簡単だ。

メディアクエリー / Media query を使う

画像と文字がオーバーラップするという環境では、メディアクエリーを使ったバランスの微調整が必要だ。デバイス別での表示を確認して、画像と文字のバランスの調整を行う。ブレイクポイントを適切に区切り、topプロパティで、上からの画像の配置位置を調整したり、文字サイズを調整する。現時点でデバイスで確認したいサイズは→ 320px～540pxがモバイル、541px～1279pxがタブレット、1280px～がPCの3グループ。

CHROME　ディベロッパー・ツールで確認する

実機が手元にないので、Chromeのディベロッパー・ツールにて表示を確認する。cssの設定通りにサイズが効いてくれない場面に出くわす時は「!important」（スタイルを優先させる）を捻じこむと殆どが上手くいく。

Viewport Unit（ビューポートの単位）とは？(H5)

vminがIE9で、vmaxがIE10-Edgeで利用できないが、ここでは「vw」のみを利用するので、ほとんどのブラウザで使用できる。ビューポートとは、ブラウザの幅と高さのサイズに依存する。 1vwはブラウザの幅の1%、100vwはブラウザの幅の100%を意味する。

ビューポートの利点は、ビューポートが変化した時はいつでもその値が自動的に再計算されることで、ページをロードした時、リサイズした時、向きを変えた時、すべてで自動的に再計算される。例えば幅と高さを1/2にして、面積を全体の1/4に指定した場合、どんな時でも必ず1/4になるコンポーネントを簡単に作成することができる。