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

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

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

環境

  • OS windows10 64bit
  • chrome 86.0.4240.198

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

サンプルコード

以下は全画面に画像とテキストを表示するサンプルコードです。ブラウザ上で表示した結果はデモページで確認してください。

デモページはこちら

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