全画面カルーセルを作る方法
全画面カルーセルをHTML・CSS・JavaScriptで作る方法を紹介します。ブラウザ全体を使って大きな画像やメッセージを表示できるため、トップページのメインビジュアルやキャンペーン告知、サービス紹介などに適しています。画面いっぱいに表示されるため視認性が高く、訪問者へ伝えたい情報を印象的に見せられます。
このサンプルでは、画面いっぱいに表示されるカルーセルに加え、前へ・次へボタン、ドットナビ、自動再生を実装しています。JavaScriptでスライドの切り替えを行い、CSSで全画面レイアウトやアニメーションを設定しているため、さまざまなWebサイトへそのまま組み込みやすい構成です。
スライドの切り替え速度や自動再生の間隔はコード内の数値を変更するだけで簡単に調整できます。企業サイト、サービス紹介ページ、ポートフォリオ、ランディングページなど、ファーストビューを大きく見せたい場面で活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
このデモでは、ブラウザいっぱいに表示される全画面カルーセルを確認できます。スライドは3秒ごとに自動で切り替わり、前へ・次へボタンやドットナビからも自由に操作できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマホ表示に対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>全画面カルーセル</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 全画面カルーセル全体 -->
<div class="fullscreen_carousel_demo">
<!-- スライド一覧 -->
<div class="fullscreen_carousel_track" id="fullscreen-carousel-track">
<!-- スライド1 -->
<div class="fullscreen_carousel_slide">
<div class="fullscreen_carousel_content">
<div class="fullscreen_carousel_title">壮大な景色を全画面表示</div>
<p class="fullscreen_carousel_text">
ファーストビュー全体を使って印象的なビジュアルを表示できます。
</p>
<a href="#" class="fullscreen_carousel_link">詳しく見る</a>
</div>
</div>
<!-- スライド2 -->
<div class="fullscreen_carousel_slide">
<div class="fullscreen_carousel_content">
<div class="fullscreen_carousel_title">サービスを魅力的に紹介</div>
<p class="fullscreen_carousel_text">
大きな画像とメッセージで訪問者へ強くアピールできます。
</p>
<a href="#" class="fullscreen_carousel_link">詳細を見る</a>
</div>
</div>
<!-- スライド3 -->
<div class="fullscreen_carousel_slide">
<div class="fullscreen_carousel_content">
<div class="fullscreen_carousel_title">キャンペーンを告知</div>
<p class="fullscreen_carousel_text">
ランディングページや企業サイトにもおすすめです。
</p>
<a href="#" class="fullscreen_carousel_link">確認する</a>
</div>
</div>
</div>
<!-- 前へボタン -->
<button
class="fullscreen_carousel_arrow fullscreen_carousel_prev"
id="fullscreen-carousel-prev"
type="button"
aria-label="前へ">
前へ
</button>
<!-- 次へボタン -->
<button
class="fullscreen_carousel_arrow fullscreen_carousel_next"
id="fullscreen-carousel-next"
type="button"
aria-label="次へ">
次へ
</button>
<!-- ドットナビ -->
<div class="fullscreen_carousel_dots">
<button
class="fullscreen_carousel_dot is-active"
type="button"
data-index="0"
aria-label="スライド1">
</button>
<button
class="fullscreen_carousel_dot"
type="button"
data-index="1"
aria-label="スライド2">
</button>
<button
class="fullscreen_carousel_dot"
type="button"
data-index="2"
aria-label="スライド3">
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルは、HTML・CSS・JavaScriptを使用して、画像を画面いっぱいに表示するカルーセルを作成します。 HTMLで3枚のスライドや前へ・次へボタン、ドットナビを配置し、CSSで画面全体を使ったレイアウトや背景画像を設定します。 JavaScriptではボタンやドットによる切り替えに加えて、3秒ごとの自動再生を行います。
サンプルは index.html、style.css、script.jsの3ファイルと、背景に使用する3枚の画像で構成されています。
使用する画像は images フォルダへ配置し、CSSから読み込みます。
sample/
├── index.html
├── style.css
├── script.js
└── images/
├── image1.png
├── image2.png
└── image3.png
各ファイルの役割
index.htmlには、3枚のスライド、各スライドに表示するタイトル・説明文・リンク、前へ・次へボタン、ドットナビを記述します。
タイトルや説明文、リンクの文字を変更したい場合は、このファイルを編集します。
style.cssでは、カルーセルを画面いっぱいに表示するサイズ、背景画像、文字の大きさ、ボタンやドットのデザインなどを設定します。
各スライドの背景画像は background で指定しています。
script.jsでは、前へ・次へボタンやドットをクリックしたときのスライド切り替えと、一定時間ごとに次のスライドへ移動する自動再生を行います。
imagesフォルダには、カルーセルで使用する3枚の画像を配置します。
このサンプルでは image1.png、image2.png、image3.pngを使用します。
設置方法・使い方
sampleフォルダ内に index.html、style.css、script.jsを配置し、同じ階層に imagesフォルダを作成します。
imagesフォルダには、カルーセルで表示したい3枚の画像を image1.png、image2.png、image3.pngというファイル名で配置してください。
配置後に sample/index.htmlをブラウザで開くと、画像が画面いっぱいに表示されます。
左右のボタンをクリックすると前後のスライドへ移動でき、画面下部のドットをクリックすると指定したスライドへ直接切り替えられます。
操作しない場合も3秒ごとに自動で次のスライドへ切り替わります。
カスタマイズできる内容
スライド内のタイトル、説明文、リンクの文字は index.htmlで変更できます。
3枚の背景画像を変更する場合は、imagesフォルダ内の画像を差し替えるか、style.cssの各 background に指定しているファイル名を変更します。
style.cssでは、カルーセルの高さ、タイトルや説明文の文字サイズ、リンクボタンのサイズや色、前へ・次へボタンの大きさや位置、ドットの大きさや間隔などを変更できます。
背景画像には半透明の暗いグラデーションを重ねているため、rgba(15,23,42,.45)の値を変更すると画像に重なる暗さも調整できます。
自動再生の間隔やスライドが横方向へ移動する速度を変更することもできます。自動再生の時間は script.js、スライド移動のアニメーション時間は style.cssで調整します。
数値調整
style.cssの height:100vh;は、カルーセルを画面の高さいっぱいに表示する設定です。
min-height:520px;はカルーセルの最小高さで、値を大きくすると最低限確保される高さも大きくなります。
transition:transform .5s ease;の .5sはスライドが移動する時間です。
値を大きくするとゆっくり移動し、小さくすると速く移動します。
前へ・次へボタンの width:48px;と height:48px;を変更するとボタンの大きさを調整できます。
left:24px;と right:24px;を変更すると、それぞれ画面端からの位置を調整できます。
script.jsの fullscreenCarouselInterval = 3000;は自動再生の間隔です。
3000は3秒を表し、値を大きくすると切り替え間隔が長くなり、小さくすると短くなります。
レスポンシブ対応
カルーセルは style.cssの width:100%;と height:100vh;によって、表示する画面サイズに合わせて広がります。
背景画像には background-size:cover;と background-position:center;を使用しているため、画面全体を覆うサイズで中央を基準に表示されます。
また、画面幅768px以下ではメディアクエリによってタイトルを34px、説明文を16pxへ変更します。
PCだけでなく、タブレットやスマートフォンでも画面幅に合わせて表示できます。
コメント