この記事では、フルスクリーンデザインのWebページ作成について、基本的な概念から実践的なコード例まで包括的に解説します。フルスクリーンデザインの定義、特徴、目的、注意点を理解し、実際のHTML・CSSコードの構造と役割を学ぶことができます。
はじめに
この記事のコードをコピペして出力してみよう。
VSCodeのインストールがまだの方はこちら
フルスクリーンデザインのWEBページ作成
フルスクリーンデザインとは？
フルスクリーンデザインのウェブページとは、画面全体を使って視覚的なインパクトを与えるデザイン手法です。
以下のケースでよく使用されます。
ブランディングサイト:
- 企業や製品のイメージを強く印象付けたい場合
- 大きな画像や動画を使って、ブランドの世界観を即座に伝えることができます
ポートフォリオサイト:
- クリエイティブな作品を目立たせたい場合
- 写真家やデザイナーの作品を大きく表示し、インパクトを与えられます
製品紹介ページ:
- 新製品やフラッグシップ製品を印象的に紹介したい場合
- 製品の詳細な画像や動画を全画面で表示し、魅力を最大限に伝えられます
ランディングページ:
- 特定のアクションを促したい場合（例：会員登録、商品購入など）
- シンプルで大きなビジュアルと、明確なコールトゥアクションボタンを組み合わせることで、ユーザーの行動を促しやすくなります
基本的な特徴
- ファーストビュー（最初に表示される部分）が画面いっぱいに広がります
- 大きな画像や動画を背景に使用することが多いです
- テキストやナビゲーション（多くの場合、ハンバーガーメニュー）は最小限に抑えられます
- コールトゥアクション（行動を促すボタンなど）
目的
- ユーザーの注目を集め、強い印象を与えます
- サイトの雰囲気や世界観を即座に伝えることができます
注意点
- 画像や動画の品質が重要です。低品質だとサイトの印象を損ねます
- 読み込み速度に注意が必要です。大きな画像や動画は読み込みに時間がかかる可能性があります
- テキストと背景のコントラストを適切に保つ必要があります
- スマートフォンなど異なるデバイスでの表示にも配慮が必要です
フルスクリーンデザインは、適切に使用すれば強力な視覚的ツールとなりますが、ユーザビリティとのバランスを取ることが重要です。
以下のページを作成します。
コードの例
index.html
※クリックするとコードが表示されます。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modern Fullscreen Design</title>
<link rel="stylesheet" href="styles.css" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<!-- ヘッダー部分（ナビゲーションを含む） -->
<header>
<nav>
<ul>
<!-- ナビゲーションリンク -->
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>
</header>
<!-- メインコンテンツ -->
<main>
<!-- セクション1：フルスクリーンセクション -->
<section id="section1" class="fullscreen-section">
<div class="content">
<h1>Welcome to Section 1</h1>
<p>Discover the future of innovation</p>
<!-- コールトゥアクションボタン -->
<a href="#section2" class="cta-button">Learn More</a>
</div>
</section>
<!-- セクション2：フルスクリーンセクション -->
<section id="section2" class="fullscreen-section">
<div class="content">
<h1>Explore Section 2</h1>
<p>Unleash your creativity</p>
<a href="#section3" class="cta-button">Next Section</a>
</div>
</section>
<!-- セクション3：フルスクリーンセクション -->
<section id="section3" class="fullscreen-section">
<div class="content">
<h1>Discover Section 3</h1>
<p>Embrace the possibilities</p>
<a href="#section1" class="cta-button">Back to Top</a>
</div>
</section>
</main>
</body>
</html>styles.css
※クリックするとコードが表示されます。
CSS
/* グローバル変数の定義 */
:root {
--primary-color: #3a86ff;
--secondary-color: #8338ec;
--text-color: #ffffff;
--background-color: #1a1a2e;
--accent-color: #ff006e;
--font-main: "Poppins", sans-serif;
}
/* リセットスタイル */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 基本的なボディスタイル */
body {
font-family: var(--font-main);
background-color: var(--background-color);
color: var(--text-color);
line-height: 1.6;
}
/* ヘッダースタイル */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background-color: rgba(26, 26, 46, 0.8);
padding: 1rem 0;
}
/* ナビゲーションスタイル */
nav ul {
display: flex;
justify-content: center;
list-style: none;
}
nav li {
margin: 0 1rem;
}
nav a {
color: var(--text-color);
text-decoration: none;
font-weight: 300;
transition: all 0.3s ease;
}
nav a:hover {
color: var(--accent-color);
}
/* フルスクリーンセクションスタイル */
.fullscreen-section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
/* 各セクションの背景グラデーション */
#section1 {
background: linear-gradient(
45deg,
var(--primary-color),
var(--secondary-color)
);
}
#section2 {
background: linear-gradient(
45deg,
var(--secondary-color),
var(--accent-color)
);
}
#section3 {
background: linear-gradient(
45deg,
var(--accent-color),
var(--primary-color));
}
/* コンテンツスタイル */
.content {
max-width: 800px;
padding: 2rem;
}
h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
/* ボタンスタイル */
.cta-button {
display: inline-block;
padding: 12px 24px;
background-color: var(--text-color);
color: var(--background-color);
text-decoration: none;
border-radius: 30px;
font-weight: bold;
transition: all 0.3s ease;
}
.cta-button:hover {
background-color: var(--accent-color);
color: var(--text-color);
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}index.htmlの解説
- ドキュメントタイプと言語設定:
HTML
<!DOCTYPE html>
<html lang="ja">これはHTML5文書であることを宣言し、言語を日本語に設定しています。
- ヘッド部分:
HTML
<head>
<!-- 文字エンコーディングの指定 -->
<meta charset="UTF-8" />
<!-- レスポンシブデザイン用のビューポート設定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- ページのタイトル -->
<title>Modern Fullscreen Design</title>
<!-- CSSファイルのリンク -->
<link rel="stylesheet" href="styles.css" />
<!-- Google Fontsの読み込み（Poppinsフォント） -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap"
rel="stylesheet"
/>
</head>ここでは以下の重要な要素を定義しています：
- 文字エンコーディング（UTF-8）
- ビューポート設定（レスポンシブデザイン用）
- ページタイトル
- CSSファイルのリンク
- Googleフォント（Poppins）の読み込み
- ボディ部分:
HTML
<body>
<!-- コンテンツがここに入ります -->
</body>ページの実際のコンテンツがここに含まれます。
- ヘッダーとナビゲーション:
HTML
<!-- ヘッダー部分（ナビゲーションを含む） -->
<header>
<nav>
<ul>
<!-- ナビゲーションリンク -->
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>
</header>これはページ上部のナビゲーションメニューを作成します。各リンクは対応するセクションにジャンプします。
- メインコンテンツ:
HTML
<main>
<!-- セクションがここに入ります -->
</main>ページの主要なコンテンツを含むmain要素です。
- フルスクリーンセクション:
HTML
<!-- セクション1：フルスクリーンセクション -->
<section id="section1" class="fullscreen-section">
<div class="content">
<h1>Welcome to Section 1</h1>
<p>Discover the future of innovation</p>
<!-- コールトゥアクションボタン -->
<a href="#section2" class="cta-button">Learn More</a>
</div>
</section>これはフルスクリーンで表示されるセクションの例です。各セクションには：
- ユニークなID（#section1など）
- 共通のクラス（fullscreen-section）
- 見出し（h1）
- 段落（p）
- コールトゥアクションボタン（a要素にcta-buttonクラスを適用） が含まれています。
このHTMLは、シンプルで効果的な構造を持ち、CSSと組み合わせることで、モダンでインタラクティブなフルスクリーンデザインを実現します。各セクションは画面全体を占め、ナビゲーションを通じて簡単に移動できるようになっています。
styles.cssの解説
- グローバル変数の定義:
CSS
/* グローバル変数の定義 */
:root {
--primary-color: #3a86ff; /* 主要な色 */
--secondary-color: #8338ec; /* 二次的な色 */
--text-color: #ffffff; /* テキストの色 */
--background-color: #1a1a2e; /* 背景色 */
--accent-color: #ff006e; /* アクセントカラー */
--font-main: "Poppins", sans-serif; /* メインのフォント */
}これらはCSS変数で、サイト全体で使用される色やフォントを定義しています。後で簡単に変更できるようになります。
- リセットスタイル:
CSS
/* リセットスタイル - すべての要素に適用 */
* {
margin: 0; /* 外側の余白をゼロに */
padding: 0; /* 内側の余白をゼロに */
box-sizing: border-box; /* パディングとボーダーを幅と高さに含める */
}すべての要素のマージンとパディングをゼロにし、ボックスサイズの計算方法を統一します。これにより、ブラウザ間の差異を減らします。
- 基本的なボディスタイル:
CSS
/* 基本的なボディスタイル */
body {
font-family: var(--font-main); /* メインのフォントを適用 */
background-color: var(--background-color); /* 背景色を設定 */
color: var(--text-color); /* テキスト色を設定 */
line-height: 1.6; /* 行の高さを設定 */
}ページ全体のフォント、背景色、テキスト色を設定します。var()関数を使ってCSS変数を参照しています。
- ヘッダースタイル:
CSS
/* ヘッダースタイル */
header {
position: fixed; /* 画面上部に固定 */
top: 0;
left: 0;
width: 100%; /* 幅を画面全体に */
z-index: 1000; /* 他の要素の上に表示 */
background-color: rgba(26, 26, 46, 0.8); /* 半透明の背景 */
padding: 1rem 0; /* 上下のパディング */
}ヘッダーを画面上部に固定し、半透明の背景を設定しています。
- ナビゲーションスタイル:
CSS
/* ナビゲーションスタイル */
nav ul {
display: flex; /* フレックスボックスを使用 */
justify-content: center; /* 中央揃え */
list-style: none; /* リストマーカーを削除 */
}
nav li {
margin: 0 1rem; /* 左右のマージン */
}
nav a {
color: var(--text-color); /* リンクの色 */
text-decoration: none; /* 下線を削除 */
font-weight: 300; /* フォントの太さ */
transition: all 0.3s ease; /* スムーズな遷移効果 */
}
nav a:hover {
color: var(--accent-color); /* ホバー時の色 */
}ナビゲーションメニューを水平に中央揃えで配置します。
- フルスクリーンセクションスタイル:
CSS
/* フルスクリーンセクションスタイル */
.fullscreen-section {
height: 100vh; /* ビューポートの高さいっぱいに */
display: flex; /* フレックスボックスを使用 */
justify-content: center; /* 水平方向の中央揃え */
align-items: center; /* 垂直方向の中央揃え */
text-align: center; /* テキストを中央揃え */
}各セクションを画面全体に表示し、内容を中央に配置します。
- 各セクションの背景グラデーション:
CSS
/* 各セクションの背景グラデーション */
#section1 {
background: linear-gradient(
45deg,
var(--primary-color),
var(--secondary-color)
); /* 45度の斜めグラデーション */
}各セクションに異なる斜めのグラデーション背景を設定しています。
- コンテンツスタイル:
CSS
/* コンテンツスタイル */
.content {
max-width: 800px; /* 最大幅を設定 */
padding: 2rem; /* 内側の余白 */
}
h1 {
font-size: 3.5rem; /* 大きな文字サイズ */
margin-bottom: 1rem; /* 下部のマージン */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* テキストに影をつける */
}
p {
font-size: 1.2rem; /* 段落の文字サイズ */
margin-bottom: 2rem; /* 下部のマージン */
}コンテンツの最大幅と内側の余白を設定します。
- ボタンスタイル:
CSS
/* ボタンスタイル */
.cta-button {
display: inline-block; /* インラインブロック要素として表示 */
padding: 12px 24px; /* 内側の余白 */
background-color: var(--text-color); /* 背景色 */
color: var(--background-color); /* テキスト色 */
text-decoration: none; /* 下線を削除 */
border-radius: 30px; /* 角を丸くする */
font-weight: bold; /* 太字 */
transition: all 0.3s ease; /* スムーズな遷移効果 */
}
.cta-button:hover {
background-color: var(--accent-color); /* ホバー時の背景色 */
color: var(--text-color); /* ホバー時のテキスト色 */
transform: translateY(-3px); /* 上に少し移動 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 影をつける */
}コールトゥアクションボタンのスタイルを定義します。丸みを帯びた形状と、ホバー時のスムーズな変化効果を設定しています。
このCSSは、モダンで視覚的に魅力的なフルスクリーンデザインを作成するための基本的な構造を提供しています。CSS変数を使用することで、全体的なデザインの一貫性を保ちながら、簡単にカスタマイズできるようになっています。
まとめ
フルスクリーンデザインは、視覚的なインパクトと没入感を重視するWebデザイン手法です。適切に実装することで、ユーザーの注目を集め、強力なブランドイメージを伝えることができます。ただし、画像の品質、テキストの可読性、レスポンシブ対応など、いくつかの重要な注意点に留意する必要があります。
フルスクリーンデザインの実装には、HTMLとCSSの適切な組み合わせが不可欠です。背景画像の設定、テキストの配置、レスポンシブデザインの実現など、各要素を慎重に設計することで、効果的なフルスクリーンWebページを作成できます。この手法を活用することで、印象的でユーザーを引き付けるWebサイトを構築することが可能となります。
コメント