CSS3でコンテンツを全画面表示

CSSの単位Viewport(vw・vh)を使ってコンテンツをフルスクリーン(全画面)で表示しています。画像を背景に設定し、background-size: cover;に指定して、全画面に画像とテキストを表示するサンプルコードを記述しています。
デモページはこちら
環境
- OS windows10 64bit
- chrome 86.0.4240.198
Viewport(vw・vh)は「ブラウザの幅と高さ」を基準にした単位なので、width: 100vw; height: 100vh;を指定するだけで、開いたブラウザの幅と高さに合わせてくれます。そのため、この記述だけでフルスクリーン・レスポンシブになります。
1 2 3 4 5 6 |
/*フルスクリーン(全画面)で表示*/ { width: 100vw; height: 100vh; } |
サンプルコード
以下は全画面に画像とテキストを表示するサンプルコードです。ブラウザ上で表示した結果はデモページで確認してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
<section> <style> body{ margin: 0; padding: 0; } .hero { width: 100vw; /* 全画面表示 */ height: 100vh; /* 全画面表示 */ background-repeat: no-repeat; background-size: cover; background-position: center center; position: relative; } .hero0 { background: #ffffff; } .hero1 { background-image: url(https://mebee.info/wp-content/uploads/2021/01/yamanashi-Arakurayama.jpg); } .hero2 { background-image: url(https://mebee.info/wp-content/uploads/2021/01/saga-_Okusu.jpg); } .hero3 { background-image: url(https://mebee.info/wp-content/uploads/2021/01/ehime-Kurushima.jpg); } .hero4 { background-image: url(https://mebee.info/wp-content/uploads/2021/01/yamagata-_Snow.jpg); } /* テキスト */ .text-box { position: absolute; top: 50%; left: 50%; width: 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 100; letter-spacing: 0.05em; text-align: center; color: #fff; text-shadow: 1px 2px 3px rgb(0 0 0 / 70%); } .title { font-size: 4em; font-weight: bold; line-height: 1.2; padding: 0 50px; } .hero0 .text-box { color: #191919; text-shadow: none; } .hero0 .title { font-size: 2em; } .description:before, .description:after { content: "_"; position: relative; bottom: 0.5em; margin: 0.5em; } .hero0 .description:before, .hero0 .description:after { content:none; } </style> <div class="hero hero0"> <div class="text-box"> <img src="https://mebee.info/wp-content/uploads/2020/06/mebee_logo.png" alt="mebee" width="" height=""> <p class="title">CSS3だけでコンテンツを全画面表示 デモページ</p> <p class="description">説明ページに戻る</p> </div> </div> <div class="hero hero1"> <div class="text-box"> <p class="title">spring</p> <p class="description">山梨県 新倉山浅間公園(忠霊塔)</p> </div> </div> <div class="hero hero2"> <div class="text-box"> <p class="title">summer</p> <p class="description">佐賀県 武雄の大楠</p> </div> </div> <div class="hero hero3"> <div class="text-box"> <p class="title">autumn</p> <p class="description">愛媛県 亀老山から望む来島海峡大橋</p> </div> </div> <div class="hero hero4"> <div class="text-box"> <p class="title">winter</p> <p class="description">山形県 蔵王温泉スキー場 樹氷</p> </div> </div> </section> |
ブラウザ上で表示した結果はこちらのデモページで確認してください。
-
前の記事
php 複数の連想配列のキーのみの差分を取得する 2021.01.20
-
次の記事
PostgreSQL カラム名を変更する 2021.01.21
コメントを書く