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

CSSの単位Viewport(vw・vh)を使ってコンテンツをフルスクリーン(全画面)で表示しています。画像を背景に設定し、background-size: cover;に指定して、全画面に画像とテキストを表示するサンプルコードを記述しています。
デモページはこちら
環境
- OS windows10 64bit
- chrome 86.0.4240.198
Viewport(vw・vh)は「ブラウザの幅と高さ」を基準にした単位なので、width: 100vw; height: 100vh;を指定するだけで、開いたブラウザの幅と高さに合わせてくれます。そのため、この記述だけでフルスクリーン・レスポンシブになります。
/*フルスクリーン(全画面)で表示*/
{
width: 100vw;
height: 100vh;
}
サンプルコード
以下は全画面に画像とテキストを表示するサンプルコードです。ブラウザ上で表示した結果はデモページで確認してください。
<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
コメントを書く