ジェフ・ベック

Blow by Blow

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

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

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

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

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

.wrapperのbackgroundに画像を配置して、その画像中央に複数行の文字列を配置する方法は次の通りである。

						
/* html */
<div class="wrapper">
  <div class="box">
    <h1 style="color: #008080">Place the horizontal direction and the vertical direction at the center</h1>
    <p>このボックスは .wrapper の中で幅70%、上下左右の中央に配置される。</p>
  </div>
</div>
/* css */
.wrapper {
  position:relative;
  display: block;
  height:50vh;
  border: solid #008080;
}
.box {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width: 70%;
  background-color: rgba(154, 188, 244,0.2);
}

画像は上記htmlに下記cssの類を充てる。いくつかのブレイクポイントの設定が必要で、PC用またはモバイル用画像の指定とheightを微調整する。

メモ："height: 100%" の要素が画面の高さ100%にならない場合の対応方法はhtml要素とbody要素に height: 100%; を指定する 

						
/* image css */
@media (min-width: 200px) and (max-width: 375px) {
.wrapper {
  max-width: 375px;
  height: 60vh;
  position: relative;
  background-image: url("images/background-photo_mobile.png");
  background-size:cover;
  background-repeat: no-repeat;
  color: white;
	}
}

SAMPLE

Place the horizontal direction and the vertical direction at the center

このボックスは .wrapper の中で幅70%、上下左右の中央に配置される。

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

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

CHROME　ディベロッパー　ツールで表示を確認する

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

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

現在、CSSで利用できるViewport Unit（ビューポートの単位）は、4種類。(P)

  • vw ビューポートの幅のパーセント
  • vh ビューポートの高さのパーセント
  • vmin vwかvhの最小値
  • vmax vwかvhの最大値

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

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

Back

Next