16. 小さなサイト制作演習

この章では、これまで学んだHTML/CSSを使って、小さなWebサイトを作る流れを確認します。

HTMLとCSSは、個別のタグやプロパティを覚えるだけでは身につきにくいです。

実際にページを組み立てることで、構造、余白、レイアウト、レスポンシブ対応のつながりが見えてきます。

作るもの

演習では、架空のサービスサイトのトップページを想定します。

作るセクションは次の通りです。

  1. ヘッダー
  2. ヒーロー
  3. サービス紹介
  4. 特徴
  5. よくある質問
  6. お問い合わせ導線
  7. フッター

すべてを完璧に作る必要はありません。

これまで学んだ基本を使って、ページの形にすることが目的です。

ファイルを用意する

まず、HTMLファイルとCSSファイルを用意します。

ファイル構成
practice-site/
  index.html
  style.css
  images/
    hero.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">
        <title>Sample Service</title>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <header class="site-header">
            <a class="site-logo" href="/">Sample Service</a>
            <nav class="site-nav" aria-label="メインメニュー">
                <a href="#service">サービス</a>
                <a href="#feature">特徴</a>
                <a href="#faq">FAQ</a>
                <a href="#contact">お問い合わせ</a>
            </nav>
        </header>

        <main>
            <section class="hero">
                <div class="hero-inner">
                    <h1 class="hero-title">Web制作を、わかりやすく。</h1>
                    <p class="hero-text">小さな事業者向けに、Webサイト制作と公開後の更新をサポートします。</p>
                    <a class="button" href="#contact">相談する</a>
                </div>
            </section>

            <section id="service" class="section">
                <div class="section-inner">
                    <h2 class="section-title">サービス</h2>
                    <div class="card-grid">
                        <article class="card">
                            <h3 class="card-title">サイト制作</h3>
                            <p class="card-text">目的に合わせたWebサイトを制作します。</p>
                        </article>
                        <article class="card">
                            <h3 class="card-title">更新サポート</h3>
                            <p class="card-text">公開後の文章や画像の更新をサポートします。</p>
                        </article>
                        <article class="card">
                            <h3 class="card-title">改善提案</h3>
                            <p class="card-text">アクセス状況や目的に合わせて改善を提案します。</p>
                        </article>
                    </div>
                </div>
            </section>
        </main>
    </body>
</html>

最初に、すべての装飾を入れようとしなくて大丈夫です。

まずは、HTMLで意味のある構造を作ります。

ベースCSSを書く

次に、全体の基本スタイルを書きます。

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

body {
    margin: 0;
    color: #333;
    font-family: sans-serif;
    line-height: 1.8;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
}

最初にbox-sizing、body、imgなどの基本を整えておくと、その後のCSSが書きやすくなります。

レイアウトを整える

ページ全体の幅や余白を整えます。

レイアウト
.section {
    padding: 72px 0;
}

.section-inner,
.hero-inner {
    width: min(100% - 48px, 960px);
    margin: 0 auto;
}

.section-title {
    margin: 0 0 32px;
    font-size: 32px;
}

まずは、セクションの上下余白と、コンテンツ幅を決めます。

ページ全体の余白ルールが決まると、見た目が整いやすくなります。

ヘッダーを作る

ヘッダーはFlexboxで横並びにします。

ヘッダー
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e5e5;
}

.site-logo {
    font-weight: 700;
    text-decoration: none;
}

.site-nav {
    display: flex;
    gap: 20px;
}

.site-nav a {
    text-decoration: none;
}

スマホでは、ナビゲーションが横にはみ出す可能性があります。

後でメディアクエリを使って調整します。

ヒーローを作る

ヒーローは、ページの最初にある大きな導入部分です。

ヒーロー
.hero {
    padding: 96px 0;
    background-color: #f4f8fb;
}

.hero-title {
    max-width: 720px;
    margin: 0;
    font-size: 40px;
    line-height: 1.4;
}

.hero-text {
    max-width: 640px;
    margin: 24px 0 0;
    font-size: 18px;
}

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    margin-top: 32px;
    padding: 12px 24px;
    border-radius: 4px;
    background-color: #005bac;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

ヒーローでは、文字サイズ、余白、ボタンの見やすさを意識します。

カード一覧を作る

サービス一覧はGridで作ります。

カード一覧
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.card {
    padding: 24px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
}

.card-title {
    margin: 0;
    font-size: 20px;
}

.card-text {
    margin: 12px 0 0;
}

auto-fitとminmaxを使うと、画面幅に応じて列数が変わります。

スマホでは1列、PCでは複数列になりやすいです。

レスポンシブ調整

最後に、スマホ表示を確認しながら調整します。

レスポンシブ調整
@media (max-width: 767px) {
    .site-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-nav {
        flex-wrap: wrap;
        gap: 12px;
    }

    .hero {
        padding: 72px 0;
    }

    .hero-title {
        font-size: 32px;
    }
}

この例では、スマホ幅でヘッダーを縦並びにしています。

実務では、ハンバーガーメニューにすることもありますが、まずはHTML/CSSだけで崩れない形を作ることを優先します。

確認すること

ページを作ったら、次の項目を確認します。

  • HTMLの階層が自然か
  • 見出しの順番が自然か
  • CSSが読み込まれているか
  • PCとスマホで横スクロールが出ないか
  • ボタンが押しやすいか
  • カード一覧が自然に折り返すか
  • 余白に統一感があるか
  • リンク先が仮のまま残っていないか

見た目が完成に近づいてからも、HTML構造と操作性を確認します。

練習課題

  1. 架空の店舗やサービスを1つ決めて、トップページの構成を考えてください。
  2. ヘッダー、ヒーロー、サービス一覧、お問い合わせ導線をHTMLで作ってください。
  3. CSSで余白、文字サイズ、色、レイアウトを整えてください。
  4. スマホ幅で横スクロールが出ないか確認してください。
  5. 開発者ツールで、カードの余白と幅を確認してください。

最初はシンプルで構いません。

自分で構造を考えて、画面に表示し、崩れたら直す流れを経験することが大切です。

次の学習へ

HTML/CSSの基礎が身につくと、次の学習につながります。

  • JavaScriptでUIに動きを付ける
  • WordPressで更新できるサイトを作る
  • Webの仕組みを理解して公開する
  • ポートフォリオサイトを作る
  • クライアントワークで制作範囲を整理する

HTML/CSSは、どの方向に進む場合でも土台になります。

一度学んで終わりではなく、サイトを作るたびに少しずつ理解を深めていきます。

この章のまとめ

  • 小さなサイト制作では、まずHTMLで構造を作る
  • ベースCSS、レイアウト、パーツの順に整えると進めやすい
  • FlexboxやGridを使うと、実務でよくあるレイアウトを作りやすい
  • スマホ表示は、最後ではなく作りながら確認する
  • HTML/CSSの基礎は、JavaScript、WordPress、公開作業、実務制作につながる