ジェフ・ベック

Blow by Blow

画像を横100%でフルに表示して文字を載せる、これが難しい

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

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

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

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

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

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

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

reveal.jsのスワイプを使ったプレゼン進行遷移を考えてみる。

Swiperを使って上下左右にスワイプしてページ遷移を考える。

ウェブサイトからUWPアプリを作るためのリファレンス本。

一見して馬鹿げていないアイデアは、見込みがないものである。

愚者と天才の違いといえば、天才には限度があるということだ。

同じことを繰り返しながら、違う結果を望むこと、それが狂気。

一見して馬鹿げていないアイデアは、見込みがないものである。

愚者と天才の違いといえば、天才には限度があるということだ。

同じことを繰り返しながら、違う結果を望むこと、それが狂気。

メディアクエリー / 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になるコンポーネントを簡単に作成することができる。

Back

Next