フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)

公開日: : CSS

フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)

ビューポートの単位 vw, vh, vmin, vmax

CSS で大きさを指定する時、px や % を使っていました。
CSS3 から vw, vh, vmin, vmax という単位もあるので、試してみようと思います。

Viewport Uints(ビューポート単位)

共通についている頭文字の v は、Viewport の略です。

vw 幅に対する割合
vh 高さに対する割合
vmin 幅と高さの小さい方に対する割合
vmax 幅と高さの大きい方に対する割合

Viewport はヘッダーの meta タグで見た事ありましたね。

<meta name="viewport" content="width=device-width,initial-scale=1">

レスポンシブのときに入れていました、表示領域のことです。

Viewport はスクロールバーを含む

「新しい単位?もしやこれは、スクロールバーも入らないのでは!?」

って最初は勝手に期待しましたが、残念ながらスクロールは含みます。
CSSのビューポートとは
単位は % と一緒で1vwは、ビューポートの1/100になります。

width: 100vw;
height: 100vh;

これで、縦横フルになります。(でも、スクロールバーは出ます。)

フルスクリーンにして、スクロールバーを消したい

width: 100vw;で横スクロールが出る

試しに画像(main.jpg)を用意して、横いっぱいにしてみました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>full screen</title>
<style>
body {
margin:0;
padding:0;
}
img{
width: 100vw;
}
</style>
</head>
<body>
<img src="main.jpg" />
</body>
</html>

縦スクロールが出たせいで、横スクロールも出てしまいました。
画像のフルスクリーンでスクロールバーが出てしまう
ググってみますと、横フルスクリーンには、やはり % のが向いているようです。

img{
width: 100%;
}

height:100vh; で縦スクロールが出る

では縦だけ 100vh にすれば、スクロールバーが消えると思いましたが、謎の縦スクロールが出てしまいました。

img{
width: 100%;
height: 100vh;
}

こさくな手を使って測ったりすると、縦 7px の余白でした。
100vh で スクロールバー
よくわかりませんが、body を fixed にしたらスクロールバーがなくなりました。

body {
margin:0;
padding:0;
position: fixed;
}

DEMO を見る
ここからは、100vhは一度やめて、縦長のレスポンシブページっぽいものを試してみようと思います。

文字を縦横中央に置いてみる

よく見る、真ん中にタイトルなどの文字を配置して、vwとか使ってみようと思います。

<img src="main.jpg" />
<h2>full screen</h2>
<p>full screen full screen full screen full screen full screen full screen</p>

h2 をビューポートの半分サイズで、絶対値左25%にしてみます。

h2{
width:50vw;
position:absolute;
left:25vw;
text-align:center;
top:30vh;
font-size:100px;
}

小さい文字は横幅90%で、絶対値左5%にしてみます。

p{
width:90vw;
position:absolute;
left:5vw;
text-align:center;
top:60vh;
font-size:30px;
}

DEMO を見る
ウィンドウサイズを小さくすると、文字が重なったり、配置が下すぎたりいろいろよくないです。

文字にビューポート使ってみる

文字サイズにも試しに vw を使ってみました。

font-size:7vw;

ウィンドウサイズを変えると、文字サイズも一緒に変更するので、少しよくなりました。
DEMO を見る
まだ、縦の文字バランスがよくないです。

縦幅にも vw を使ってみる

縦幅にも、vw を使ってみたり、他も少し調整してみました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>full screen</title>

<style>
body {
margin:0;
padding:0;
}
img{
width: 100%;
}
header{
position:fixed;
top:0;
left:15px;
}
h1{
font-size:2vw;
}
header a{
text-decoration:none;
color: #333;
}
header li a{
text-decoration:none;
color: #333;
font-size:1.5vw;
}
h2{
width:50vw;
position:absolute;
top:15vw;
left:25vw;
text-align:center;
font-size:7vw;
border:1px solid green;
color:green;
}
p{
width:90vw;
position:absolute;
top:30vw;
left:5vw;
text-align:center;
font-size:2vw;
color:green;
}
</style>
</head>
<body>
<header>
<h1><a href="#">full screen</a></h1>
</header>
<img src="main.jpg" />
<h2>full screen</h2>
<p>full screen full screen full screen full screen full screen full screen</p>
</body>
</html>

最終的にまあまあなレスポンスが、CSSだけで簡単に出来ました。
DEMO を見る

関連記事

日本語対応の オープンソースの美しい フォント Noto Sans CJK が出来たらしい

日本語対応の オープンソースの美しい フォント Noto Sans CJK が出来たらしい

Google Earth が出来た時も、Google ストリートビューが出来た時も、 Google

記事を読む

繰り返し背景を全面表示してアニメーションする

繰り返し背景を全面表示してアニメーションする

前回の「背景を SVG で全面表示し、パターン化をアニメーションさせる」がSVGの要素を全て対応して

記事を読む

CSS三角を利用したメニューを作る(レスポンシブ)

CSS 三角 を利用したメニューを作る(レスポンシブ)

前回の吹き出しを利用して、段階を見せるような三角メニューを作っておきます。 なるべくレスポンシブ対

記事を読む

WordPress カレンダー カスタマイズ

WordPress カレンダー カスタマイズ

WordPressでカレンダーの表示部分をいじってみようかと思います。 どうやら、カレンダー関

記事を読む

WordPress カレンダー カスタマイズ

WordPress カレンダー カスタマイズ(add_filter版)

前回、「WordPress の PHP をちょっと見てみよう Ⅲ」でフックをやったので、カレンダーで

記事を読む

CSS セレクタ

【CSS セレクタ】その1:アスタリスクや属性セレクタとか

CSS3も浸透してきて、細かい所が危うくなってきたので、セレクタを中心に少しおさらいしようかと思いま

記事を読む

CSS セレクタ

【CSS セレクタ】その2:擬似クラスセレクタやラジオボタンチェックでフォームの有効無効や枠の色変えたいとか

<今回のピックアップ項目> :link :visited :hover :active :t

記事を読む

Web フォント とは?

WEBフォントとは? 意図するフォントを表示する技術 Webブラウザは端末にインストールされ

記事を読む

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript でマウスドラッグのテストをしていきます。 分かりやすいように、ボールを投げる

記事を読む

CSS 吹き出し

CSS 三角で吹き出しを作る

吹き出しとか三角とかよく使うのに、いちいち調べてどれ使おうかといつもやっていたので、まとめて作ってお

記事を読む

CSS

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js
WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js

WordPress エラーの状態 WordPress 管理画面のテキ

wordpress タイトルの変更
WordPress タイトルの変更

テンプレートタグ the_title(); get_the_title

All-in-One WP Migration で サーバ移動
「All-in-One WP Migration」プラグインで 簡単に WordPress のサーバー移行する手順メモ

1.移行元サイトでのデータエクスポート 「All-in-One WP

DNSサーバーとは
ドメインとは?DNSサーバーとは?

ドメインとは? ドメインとは? ドメインとは、インターネット上のネ

javascriptで複数同じ名前のformの値を取得する
javascriptで複数同じ名前のformの値を取得するとエラー Cannot read property ‘value’ of undefined

Javascript で value の値を取得する このようなHT

→もっと見る

    • 202403
      Mon Tue Wed Thu Fri Sat Sun
      123
      45678910
      11121314151617
      18192021222324
      25262728293031
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑