はじめに
CSSを使って全画面表示を実現することで、ウェブページが一層魅力的になります。
この記事では、初心者の方でも分かりやすいように、CSSを使った全画面表示の作り方、使い方、対処法をサンプルコード付きで解説します。
さらに、応用例とそのサンプルコードもご紹介します。
●ステップ1:基本的なHTMLとCSSの設定
まずは、全画面表示を実現するための基本的なHTMLとCSSの設定を見ていきましょう。
【HTML】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>CSSで全画面表示</title>
</head>
<body>
<div class="fullscreen">
<h1>全画面表示のサンプル</h1>
</div>
</body>
</html>
【CSS】
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
上記のHTMLとCSSの設定で、全画面表示を実現するための基本的な環境が整いました。
●ステップ2:全画面表示を実現するCSSの設定
次に、全画面表示を実現するCSSの設定を行います。
【CSS】
.fullscreen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: skyblue;
display: flex;
justify-content: center;
align-items: center;
}
このCSSの設定により、.fullscreen
クラスが適用された要素が全画面表示されるようになります。
●ステップ3:応用例とサンプルコード
全画面表示を応用して、より魅力的なウェブページを作成する方法をいくつか紹介します。
背景画像を全画面表示する方法
全画面表示の背景に画像を設定することで、ウェブページがさらに魅力的になります。
次のサンプルコードで、背景画像を全画面表示する方法を実現できます。
【CSS】
.fullscreen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('background-image.jpg');
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
}
このCSSの設定により、.fullscreen
クラスが適用された要素の背景に画像が全画面表示されます。
background-size: cover;
と background-position: center;
の設定によって、画像が綺麗に表示されるようになります。
全画面表示のスライドショー
全画面表示の背景にスライドショーを設定することで、ウェブページに動きが出て、更に魅力的になります。
次のサンプルコードで、全画面表示のスライドショーを実現できます。
【HTML】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>CSSで全画面表示のスライドショー</title>
</head>
<body>
<div class="fullscreen-slideshow">
<div class="slide" style="background-image: url('slide1.jpg');"></div>
<div class="slide" style="background-image: url('slide2.jpg');"></div>
<div class="slide" style="background-image: url('slide3.jpg');"></div>
</div>
</body>
</html>
【CSS】
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.fullscreen-slideshow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
animation: slideshow 9s infinite;
}
.slide:nth-child(2) {
animation-delay: 3s;
}
.slide:nth-child(3) {
animation-delay: 6s;
}
@keyframes slideshow {
0% {
opacity: 0;
}
33% {
opacity: 1;
}
66% {
opacity: 1;
}
100% {
opacity: 0;
}
}
このHTMLとCSSの設定により、全画面表示のスライドショーが実現されます。
全画面表示のビデオバックグラウンド
全画面表示の背景に動画を設定することで、ウェブページがさらに印象的になります。
次のサンプルコードで、全画面表示のビデオバックグラウンドを実現できます。
【HTML】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>CSSで全画面表示のビデオバックグラウンド</title>
</head>
<body>
<div class="fullscreen-video">
<video autoplay muted loop>
<source src="background-video.mp4" type="video/mp4">
</video>
<div class="content">
<h1>全画面表示のビデオバックグラウンドサンプル</h1>
</div>
</div>
</body>
</html>
【CSS】
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.fullscreen-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.fullscreen-video video {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
このHTMLとCSSの設定により、全画面表示のビデオバックグラウンドが実現されます。
autoplay
, muted
, loop
属性を設定することで、動画が自動再生され、無音で繰り返し再生されます。
まとめ
今回の記事では、CSSを使った全画面表示の作り方、使い方、対処法を初心者向けに解説しました。
また、応用例として背景画像の全画面表示、全画面表示のスライドショー、全画面表示のビデオバックグラウンドを紹介しました。
これらのサンプルコードを活用して、魅力的なウェブページを作成してみてください。
全画面表示の知識と技術を身につけることで、ウェブページのデザインが大きく向上し、読者にとって魅力的なコンテンツを提供できるようになります。