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

2021.01.20
CSS
CSS3

CSSの単位Viewport(vw・vh)を使ってコンテンツをフルスクリーン（全画面）で表示しています。画像を背景に設定し、background-size: cover;に指定して、全画面に画像とテキストを表示するサンプルコードを記述しています。
デモページはこちら

1. 環境
2. サンプルコード

環境

OS windows10 64bit
chrome 86.0.4240.198

Viewport(vw・vh)は「ブラウザの幅と高さ」を基準にした単位なので、width: 100vw; height: 100vh;を指定するだけで、開いたブラウザの幅と高さに合わせてくれます。そのため、この記述だけでフルスクリーン・レスポンシブになります。

/*フルスクリーン（全画面）で表示*/

 {
  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>

100

101

<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>

<p class="title">CSS3だけでコンテンツを全画面表示デモページ</p>

<p class="description">説明ページに戻る</p>

</div>

<p class="title">spring</p>

<p class="description">山梨県新倉山浅間公園（忠霊塔）</p>

</div>

<p class="title">summer</p>

<p class="description">佐賀県武雄の大楠</p>

</div>

<p class="title">autumn</p>

<p class="description">愛媛県亀老山から望む来島海峡大橋</p>

</div>

<p class="title">winter</p>

<p class="description">山形県蔵王温泉スキー場樹氷</p>

</div>

</section>

ブラウザ上で表示した結果はこちらのデモページで確認してください。

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

環境

サンプルコード

php 複数の連想配列のキーのみの差分を取得する 2021.01.20

PostgreSQL カラム名を変更する 2021.01.21