12. 実務でよく作るパーツ

この章では、Web制作でよく作るパーツのHTMLとCSSを学びます。

実務では、ページ全体をいきなり作るより、ヘッダー、ボタン、カード、セクション、FAQなどの小さな部品を組み合わせて作ります。

パーツごとの考え方を知っておくと、サイト制作が進めやすくなります。

ボタン

ボタンは、ユーザーに行動してもらうための重要なパーツです。

別ページへ移動する場合はa、ページ内で操作する場合はbuttonを使います。

HTML
<a class="button" href="/contact/">お問い合わせする</a>
CSS
.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    padding: 12px 24px;
    border-radius: 4px;
    background-color: #005bac;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.button:hover {
    background-color: #003f7d;
}

.button:focus-visible {
    outline: 3px solid #ffbf47;
    outline-offset: 3px;
}

ボタンは、見た目だけでなく押しやすさも大切です。

スマホでもタップしやすい高さと余白を確保します。

カード

カードは、情報のまとまりを見せる時によく使います。

サービス一覧、実績一覧、記事一覧などで使いやすいパーツです。

HTML
<article class="card">
    <img class="card-image" src="./images/service.jpg" alt="">
    <div class="card-body">
        <h3 class="card-title">Webサイト制作</h3>
        <p class="card-text">目的に合わせたWebサイトを設計・制作します。</p>
    </div>
</article>
CSS
.card {
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
}

.card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.card-body {
    padding: 24px;
}

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

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

画像の比率をそろえたい時は、aspect-ratioとobject-fitが便利です。

セクション

ページは、複数のセクションで構成されます。

各セクションには、見出し、説明文、内容を置きます。

HTML
<section class="section">
    <div class="section-inner">
        <h2 class="section-title">サービス内容</h2>
        <p class="section-lead">課題に合わせて、Webサイト制作をサポートします。</p>
    </div>
</section>
CSS
.section {
    padding: 80px 0;
}

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

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

.section-lead {
    margin: 16px 0 0;
    line-height: 1.8;
}

width: min(100% - 48px, 960px);は、左右に24pxずつ余白を残しながら、最大幅を960pxにする書き方です。

ヘッダー

ヘッダーには、ロゴやナビゲーションを置きます。

HTML
<header class="site-header">
    <a class="site-logo" href="/">Sample Site</a>
    <nav class="site-nav" aria-label="メインメニュー">
        <a href="/service/">サービス</a>
        <a href="/about/">会社概要</a>
        <a href="/contact/">お問い合わせ</a>
    </nav>
</header>
CSS
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 24px;
}

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

ナビゲーションにはnavを使います。

複数のナビゲーションがある場合は、aria-labelで役割を補足するとわかりやすくなります。

FAQ

FAQのような開閉パーツは、HTMLのdetailsとsummaryで作れます。

HTML
<details class="faq-item">
    <summary class="faq-question">制作期間はどのくらいですか？</summary>
    <div class="faq-answer">
        <p>内容によりますが、小規模サイトで1〜2か月程度が目安です。</p>
    </div>
</details>
CSS
.faq-item {
    border-bottom: 1px solid #ddd;
    padding: 20px 0;
}

.faq-question {
    cursor: pointer;
    font-weight: 600;
}

.faq-answer {
    margin-top: 12px;
    line-height: 1.8;
}

JavaScriptを使わなくても、基本的な開閉を実現できます。

まずHTMLでできることを知っておくと、実装がシンプルになります。

パーツを作る時の順番

パーツを作る時は、次の順番で考えると整理しやすいです。

  1. 何の情報を表示するか決める
  2. HTMLで意味のある構造を書く
  3. クラス名を付ける
  4. CSSで余白、文字、色、配置を整える
  5. スマホ幅で崩れないか確認する
  6. hoverやfocusの状態を整える

見た目から入ると、HTMLが崩れやすくなります。

まず情報構造を決め、そのあとCSSで整えます。

よくある失敗

  • ボタンの見た目なのに、移動ではなく操作にもaを使う
  • クリックできる範囲が小さすぎる
  • カード内の画像比率がバラバラで一覧が崩れる
  • セクションごとに余白ルールが違いすぎる
  • FAQをJavaScriptで複雑に作りすぎる
  • hoverだけ指定してfocusを忘れる

実務パーツは、見た目が似ていても役割が違います。

HTMLの意味と操作性を確認しながら作ります。

この章のまとめ

  • 実務では、ボタン、カード、セクション、ヘッダー、FAQなどのパーツを組み合わせる
  • 移動はa、操作はbuttonを使う
  • カード画像はaspect-ratioとobject-fitで整えやすい
  • FAQはdetailsとsummaryで作れる
  • パーツは、HTMLの構造を決めてからCSSで見た目を整える