10 / 10

レッスン 10

30分

実践 - 1ページサイト完成

📝 最後に理解度チェック（3問）があります

▶

解説動画は無料登録で視聴できます

全26コース・260レッスンが完全無料。登録は1分、クレジットカードは不要です

無料登録して動画を見るアカウントをお持ちの方はログイン

実践1ページサイト — 設計・実装・デプロイまで完全攻略

これまでのレッスンで学んできたHTML・CSS・Flexbox・CSS Grid・レスポンシブデザイン・ヘッダー・カードグリッドを、すべて組み合わせて1本の1ページサイトとして仕上げます。1ページサイト（シングルページサイト）はポートフォリオ・個人事業主の紹介サイト・イベントLP・製品ランディングページとして広く使われている形式で、適切な構造設計・スムーズスクロール・モバイル対応・デプロイまでの一連の流れを習得することで、実務でそのまま通用するスキルが身につきます。

1ページサイト完成ロードマップ — 4フェーズ

サイト全体の設計

セクション構成の決定

1ページサイトを作る前に、どのセクションを配置するかを決めます。各セクションには一意のidを付与してアンカーリンクとナビゲーションを連動させます。

セクション	id属性	役割	推奨コンテンツ
ファーストビュー	`#hero`	訪問者を引き込むキャッチコピー	大見出し・サブコピー・CTAボタン
自己紹介 / About	`#about`	制作者・会社の紹介	プロフィール・スキル・強み
実績 / Works	`#works`	過去の制作物・サービス	カードグリッド
料金 / Services	`#services`	提供サービスと価格	テーブルまたはカード
連絡先 / Contact	`#contact`	お問い合わせ・SNSリンク	フォーム・メールアドレス

フォルダ・ファイル構成

portfolio/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── images/
    ├── hero-bg.jpg
    └── works/
        ├── work1.jpg
        └── work2.jpg

💡 ファイル名・フォルダ名はすべて英小文字とハイフンで統一してください（About.htmlやmyWork 1.jpgではなくabout.html・work-1.jpg）。サーバー環境によっては大文字・小文字が区別されてファイルが見つからないエラーになります。

HTMLの全体構造

index.html のひな型

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="フロントエンドエンジニアの山田太郎のポートフォリオです。">
  <title>山田太郎 | フロントエンドエンジニア</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <!-- ヘッダー -->
  <header class="site-header" id="top">
    <div class="header-inner">
      <a href="#top" class="logo">YT.dev</a>
      <nav aria-label="メインナビゲーション">
        <ul class="nav-list">
          <li><a href="#about">About</a></li>
          <li><a href="#works">Works</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
      <button class="hamburger" aria-expanded="false" aria-label="メニューを開く">
        <span></span><span></span><span></span>
      </button>
    </div>
  </header>

  <main>
    <!-- Hero セクション -->
    <section id="hero" class="hero">
      <div class="container">
        <h1>コードで想いを形にする<br>フロントエンドエンジニア</h1>
        <p>HTML / CSS / JavaScript を使ってユーザーが使いやすいWebを制作します。</p>
        <a href="#works" class="btn btn-primary">実績を見る</a>
      </div>
    </section>

    <!-- About セクション -->
    <section id="about" class="section">
      <div class="container">
        <h2 class="section-title">About</h2>
        <!-- コンテンツ -->
      </div>
    </section>

    <!-- Works セクション -->
    <section id="works" class="section section-alt">
      <div class="container">
        <h2 class="section-title">Works</h2>
        <div class="card-grid">
          <!-- カードコンポーネント -->
        </div>
      </div>
    </section>

    <!-- Contact セクション -->
    <section id="contact" class="section">
      <div class="container">
        <h2 class="section-title">Contact</h2>
        <!-- 連絡先フォーム -->
      </div>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 山田太郎</p>
  </footer>

  <script src="js/main.js"></script>
</body>
</html>

セクション設計のCSS

共通セクションスタイル

/* CSSカスタムプロパティで色・余白を一元管理 */
:root {
  --color-primary: #2563eb;
  --color-text: #1e293b;
  --color-bg-alt: #f8fafc;
  --section-padding: 80px 20px;
  --container-width: 1100px;
}

html {
  scroll-behavior: smooth;
}

*, *::before, *::after {
  box-sizing: border-box;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: var(--section-padding);
  scroll-margin-top: 64px;
}

.section-alt {
  background-color: var(--color-bg-alt);
}

.section-title {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 48px;
  text-align: center;
}

Heroセクションのスタイル

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #ffffff;
  scroll-margin-top: 0;
}

.hero h1 {
  font-size: clamp(1.8rem, 5vw, 3.5rem);
  line-height: 1.3;
  margin-bottom: 24px;
}

.hero p {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: #94a3b8;
  max-width: 560px;
  margin-bottom: 40px;
}

.btn-primary {
  display: inline-block;
  padding: 14px 36px;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: background-color 0.2s, transform 0.2s;
}

.btn-primary:hover {
  background-color: #1d4ed8;
  transform: translateY(-2px);
}

💡 clamp(最小値, 推奨値, 最大値)は画面幅に応じてフォントサイズを自動調整します。clamp(1.8rem, 5vw, 3.5rem)はスマートフォンでは1.8rem、PC幅では3.5remになり、その間は5vwで滑らかに変化します。メディアクエリなしでレスポンシブなタイポグラフィが実現できます。

スムーズスクロールの実装

CSSだけで完結する方法

html { scroll-behavior: smooth; } の1行を追加するだけで、すべてのアンカーリンクがスムーズスクロールになります。これが最も簡単で確実な方法です。

スティッキーヘッダー対応のスクロール調整

ヘッダー高さが64pxの場合は各セクションに以下を追加します。

section {
  scroll-margin-top: 64px;
}

JavaScriptによる高度なスクロール制御

アクティブなナビリンクをハイライトするにはIntersectionObserverを使います。

const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.nav-list a');

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        navLinks.forEach(link => link.classList.remove('active'));
        const activeLink = document.querySelector(
          `.nav-list a[href="#${entry.target.id}"]`
        );
        if (activeLink) activeLink.classList.add('active');
      }
    });
  },
  { rootMargin: '-50% 0px -50% 0px' }
);

sections.forEach(section => observer.observe(section));

機能	実装方法
スムーズスクロール	`html { scroll-behavior: smooth; }`
ヘッダー分ずれを防ぐ	`scroll-margin-top: 64px`
アクティブナビのハイライト	`IntersectionObserver`
トップへ戻るボタン	`scrollY > 400`で表示し`scrollTo({top:0})`で移動

完成サイトのデプロイ

Netlify Drop（最速・無料）

コマンドライン不要・GitHubアカウント不要で最短1分で公開できます。

◆https://app.netlify.com/drop にアクセス
◆portfolio/ フォルダごとブラウザのドロップゾーンにドラッグ&ドロップ
◆自動でビルドが走り、ランダムなURLが生成されて公開完了
◆「Domain settings」からカスタムドメインを設定できる

GitHub Pages（バージョン管理しながら公開）

◆GitHubで新規リポジトリを作成
◆ローカルでgitを初期化してgit push
◆リポジトリの「Settings → Pages → Source → Deploy from a branch」
◆ブランチmain・フォルダ/ (root)を選択して「Save」
◆https://ユーザー名.github.io/リポジトリ名/でアクセス可能

Vercel（GitHubと連携してCI/CDを自動化）

◆https://vercel.comでGitHubアカウントでサインイン
◆「New Project」→ GitHubのリポジトリを選択
◆フレームワークは「Other」・ビルドコマンドは空欄でOK
◆「Deploy」をクリックするだけで公開
◆以降はgit pushするたびに自動で再デプロイ

⚠️ 公開前に必ず確認すること: <meta name="viewport">の記述、全画像のalt属性、<html lang="ja">の設定、リンク先URLのtypo。特にalt属性の抜け漏れはアクセシビリティ違反になり、スクリーンリーダーが内容を読み上げられなくなります。

完成チェックリスト

デプロイ前にすべての項目を確認します。

カテゴリ	チェック項目
HTML	`<!DOCTYPE html>`・`lang="ja"`・`viewport`・`description`メタタグが記述されている
アクセシビリティ	全画像に`alt`・見出しが`h1`→`h2`→`h3`の順で使われている
レスポンシブ	スマートフォン幅(375px)・タブレット(768px)・PC(1280px)で崩れがない
スクロール	ナビリンクをクリックするとスムーズに各セクションに移動する
パフォーマンス	画像は幅の2倍以上の解像度で書き出し、WebP形式を使用している
デプロイ後	本番URLで全リンク・画像が正しく表示される（ファイルパスの確認）

🏋️実践ワーク

◆portfolio/フォルダを作成し、index.html・css/style.css・js/main.jsのファイル構成を用意してください。
◆index.htmlに#hero・#about・#works・#contactの4セクションをセマンティックHTMLで実装してください。ヘッダーはスティッキー、ナビはハンバーガー対応にします。
◆#worksセクションに前レッスンで作ったカードグリッドを組み込み、3件以上の実績（架空でOK）を表示してください。
◆html { scroll-behavior: smooth; }とすべてのセクションへのscroll-margin-top: 64pxを設定し、ナビリンクから各セクションへのスムーズスクロールを動作確認してください。
◆Netlify Dropを使ってportfolio/フォルダをデプロイし、発行されたURLをスマートフォンで開いてレスポンシブを確認してください。

📝まとめ

1ページサイトはセクション設計（#hero・#about・#works・#contact）→HTMLひな型作成→共通CSSとセクションスタイル設計→スムーズスクロール実装→デプロイの5フェーズで完成します。clamp()によるレスポンシブタイポグラフィ・CSSカスタムプロパティによる色管理・IntersectionObserverによるアクティブナビ・scroll-margin-topによるヘッダーずれ解消が実務品質のポイントです。Netlify DropやGitHub Pagesを使えば無料でHTTPS付きのURLを取得してポートフォリオを即公開できます。このコースで学んだHTML・CSS・JavaScriptの技術がひとつの完成形として結実するレッスンです。

理解度チェック

3問

全問正解でこのレッスンが「完了」になり、コースの全レッスンを完了すると修了証が発行されます。解説つき・何度でも挑戦できます。

Q1.ローカルでは表示される画像が、サーバーに公開すると表示されません。ファイル名はWork 1.JPGです。本文に沿った対策はどれですか。
Q2.ナビのアンカーリンクで、各セクションへなめらかにスクロールさせたい。本文で最も簡単で確実とされる方法はどれですか。
Q3.GitHubアカウントもコマンド操作も使わずに、完成したフォルダを最短で公開したい。本文に沿った方法はどれですか。

すべての問題に答えると押せます

「HTML/CSSコーディング入門」全10レッスンを無料で修了しよう

✓ 理解度チェックの採点と、合格レッスンの記録
✓ 全レッスン合格で修了証を発行（URLでシェア・LinkedInに追加できます）
✓ 全レッスンの解説動画と、続きから再開できる学習ダッシュボード

無料で受講をはじめる（1分）

完全無料・クレジットカード不要

実践 - 1ページサイト完成

解説動画は無料登録で視聴できます

実践1ページサイト — 設計・実装・デプロイまで完全攻略

サイト全体の設計

セクション構成の決定

フォルダ・ファイル構成

HTMLの全体構造

index.html のひな型

セクション設計のCSS

共通セクションスタイル

Heroセクションのスタイル

スムーズスクロールの実装

CSSだけで完結する方法

スティッキーヘッダー対応のスクロール調整

JavaScriptによる高度なスクロール制御

完成サイトのデプロイ

Netlify Drop（最速・無料）

GitHub Pages（バージョン管理しながら公開）

Vercel（GitHubと連携してCI/CDを自動化）

完成チェックリスト

🏋️実践ワーク

📝まとめ

理解度チェック

「HTML/CSSコーディング入門」全10レッスンを無料で修了しよう

関連するブログ記事

WordPressセキュリティ対策ガイド｜ハッキング・不正ログインを防ぐ方法

Flexboxレイアウト完全ガイド｜CSS初心者でもわかる実践テクニック

WordPress入門｜初心者がホームページを自作する完全ロードマップ

関連レッスン（他のコースから）

ホームページの役割と企画

サーバー・ドメインの選び方

WordPressインストールと初期設定

テーマ選びとカスタマイズ

固定ページ作成

ブロックエディタ完全活用

レッスン一覧