こんにちは、ニュースが出る前に花粉を察知して早くも憂鬱です。
#ホームページを作ろう
前回、重い腰を上げて無料サーバーから有料サーバーに切り替えました。
Xdomein(の無料サーバ)からXserverへ サーバー移転方法
ですがこれまで肝心の中身を一切作ってこなかったので、これを機に最低限の情報のみを掲載した自分のサイトを作ります。
以下ざっくりとしたマークアップ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<header class="header">
ここがファーストビュー
</header>
<section class="profile">
プロフィールとか
</section>
</body>
</html>
#ブラウザサイズに合わせてファーストビューを表示する
最近流行りのやつを作りたいと思います。
昨今デバイスが増えすぎて、それら全てになるべく対応できるよう柔軟性の高い組み方をしていきたいところ。。
横幅は
width: 100%;
これでなんとかなりますが、縦幅は？
結論からするとこういう時に使えるのが " vh " という単位でした。
1vh=1%になります。
画像を大きく使ったフルスクリーンにしたければ、
width: 100%; height: 100vh;
ファーストビューを半分におさえて、
メインコンテンツを見せる場合は
width: 100%; height: 50vh;
こんな具合に調整できます。簡単！
他にもjQueryを使う方法や事細かにCSSを設定する手もありますが、
難しいことを考えずにできるのが上記の方法になります。
私の場合、上記headerのCSSはこうなりました。
.header{
background: #fff url(../img/xxx.jpg) center center / cover no-repeat fixed;
background-size: cover;
width: 100vw;
height: 100vh;
text-align: center;
}
#vhとは
htmlの勉強を始めたばかりや、昔のテキストサイトで知識が止まってる人からすると「なんか新しい単位が出てきたな…」って感じですよね。
私も知識がHTML4.01とCSS2.1で止まってて、単位はpxや%くらいしか知らなかったのですがvhはCSS3から増えた単位のひとつです。
vh は viewport height の略で、
viewport（ビューポート）とは、日本語に訳すと「表示領域」という言葉がしっくりくると思います。
例えば、デスクトップ環境（PCなど）のブラウザなどでは、ブラウザウインドウの表示領域がviewportになります。
参照元 : 実践！スマホサイトのviewport設定 第1回 viewportとはなにか？
viewport(表示領域)のheight(高さ)という意味になります。
ではブラウザ幅に対して50%にしたいときは？
この場合は単位が " vw " になります。
もうわかりますよね、viewport widthの略です。
上記でフルスクリーンにしたい場合は
width: 100%; height: 100vh;
と書きましたが、
width: 100vw; height: 100vh;
でもOK。
大差ないですが単位に慣れるという意味では使ってみるのも良いかもしれません。
ちなみにこのvh,vwは Viewport Units の仲間で、
他にも " vmax " " vmin " というのがありますがそれはまた今度。。
それではまた