DesigntoCode01_03ワイヤーフレームのCSSを再現する

ここでは、STEP 2 で作成した HTML をもとに、ワイヤーフレームのレイアウトに合わせて CSSでスタイルを整えていく作業に挑戦します。HTML構造はすでに完成しているので、今回は「見た目を整える作業」に集中しましょう。ワイヤーフレームにあるレイアウトや装飾を CSS で再現していきます。

📁 作成ファイル・保存場所

フォルダ名：espresso_laneサイトの名前のフォルダがあるか？
ファイル名：index.htmlにマークアップが終わっているか？STEP 2で作成したHTML（そのまま使用）
style.css ファイルを作成・HTMLにリンクする

🔰 目的

レイアウト設計に基づいた CSS の書き方を身につける
ワイヤーフレームを見て、適切なスタイルを自分で考えて適用する力をつける
セレクタの使い方やプロパティの役割を実践的に学ぶ

チェックポイント

レイアウト：全体幅、セクションの余白、配置バランスを意識しよう
タイポグラフィ：見出しの大きさや本文の行間なども見比べて再現
ボタンや画像：装飾（背景色、角丸、影など）にも注目しよう
共通ルール：同じスタイルはクラス化して、再利用しよう

完成ページの確認

別ウィンドウで、完成ページのプレビュー確認を行ってください

01:ワイヤーフレームからのコーディングプレビュー

参考トレーニング

下記のcss-classの02から05までが今回のワイヤーフレームに沿ったHTML/CSSになっています。まずは、下記のトレーニングを行ってからワイヤーフレームのコーディングを行ってみましょう！

解答例（HTML）

※ 自分で書いたHTMLにclassをつけましょう。どうしてもわからない場合は下記の例を確認しましょう。
自分のコードと比べてみてください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Espresso Lane</title>
    <link rel="stylesheet" href="https://unpkg.com/css-remedy@0.1.0/css/remedy.css">
    <link rel="stylesheet" href="style.css">
</head>

<body id="top">
    <header class="header">
        <div class="header-container">
            <h1 class="header-title">Espresso Lane</h1>
            <nav class="header-nav">
                <ul class="header-list">
                    <li class="header-list-item"><a href="#about" class="header-link">About Us</a></li>
                    <li class="header-list-item"><a href="#menu" class="header-link">Menu</a></li>
                    <li class="header-list-item"><a href="#access" class="header-link">Access</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <figure class="keyvisual">
        <img src="https://dummy.kobeya.com/?width=1440&height=600&text=keyvisual" width="1440" height="600"
            alt="キービジュアルの説明文">
    </figure>


    <section id="about" class="about">
        <div class="container about-container">
            <h2 class="section-title">About Us</h2>
            <p class="about-text">
                Espresso
                Laneは、小倉駅から徒歩2分の都会の真ん中にありながら、まるで別世界のように静かでリラックスできるカフェです。「おいしいコーヒーと心地よい空間で、疲れた心と体を癒したい。」そんな想いを込めて、私たちは日々お客様をお迎えしています。
            </p>
        </div>
    </section>

    <section id="menu" class="menu">
        <div class="container menu-container">
            <h2 class="section-title">Menu</h2>
            <ul class="menu-list">
                <li class="menu-item">
                    <article class="menu-article">
                        <img src="https://placehold.jp/590x357.png?text=image" class="menu-image" width="590"
                            height="357" alt="coffee">
                        <h3 class="menu-name">Coffee</h3>
                        <p class="menu-description">
                            一日の始まりにも、ちょっとした休憩にも。厳選されたコーヒー豆を使用し、丁寧に抽出した一杯は、香りと深い味わいで心を満たします。リラックスした時間をお楽しみください。</p>
                    </article>
                </li>
                <li class="menu-item">
                    <article class="menu-article">
                        <img src="https://placehold.jp/590x357.png?text=image" class="menu-image" width="590"
                            height="357" alt="モーニングセット">
                        <h3 class="menu-name">Morning Set</h3>
                        <p class="menu-description">焼きたてのクロワッサン、新鮮なサラダ、そして淹れたてのコーヒーで始まる特別な朝。</p>
                    </article>
                </li>
                <li class="menu-item">
                    <article class="menu-article">
                        <img src="https://placehold.jp/590x357.png?text=image" class="menu-image" width="590"
                            height="357" alt="ランチメニュー">
                        <h3 class="menu-name">Lunch Menu</h3>
                        <p class="menu-description">
                            都会の喧騒を忘れ、静かな店内で楽しむランチタイム。選べるパニーニやリゾットに日替わりスープを添えて、心も体も満たされるひとときをお過ごしください。</p>
                    </article>
                </li>
                <li class="menu-item">
                    <article class="menu-article">
                        <img src="https://placehold.jp/590x357.png?text=image" class="menu-image" width="590"
                            height="357" alt="デザート">
                        <h3 class="menu-name">Desserts</h3>
                        <p class="menu-description">
                            一日頑張った自分への甘いご褒美。自家製のチーズケーキやエクレア、濃厚なチョコレートタルトが、疲れた心を癒してくれます。コーヒーとの相性も抜群です。</p>
                    </article>
                </li>
            </ul>
        </div>
    </section>

    <section id="access" class="access">
        <div class="container access-container">
            <h2 class="section-title">Access</h2>
            <div class="access-address">
                <address>
                    <p class="access-info">〒123-4567 福岡県北九州市小倉北区XX-XXXX</p>
                    <p class="access-info">TEL: <span class="mobile-only"><a
                                href="tel:0930001234">093-000-1234</a></span>
                        <span class="desktop-only">093-000-1234</span>
                    </p>
                </address>
                <p class="access-info">営業時間　平日: 7:30〜20:00　土日祝: 9:00〜18:00</p>
            </div>
            <iframe class="access-map"
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3312.104288212224!2d130.88000087553124!3d33.886967873219604!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3543bf4bf949501b%3A0x6918bbd9f307b06c!2z5bCP5YCJ6aeF!5e0!3m2!1sja!2sjp!4v1736306320341!5m2!1sja!2sjp"
                width="1200" height="400" style="border:0;width:100%;" allowfullscreen="" loading="lazy"
                referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
    </section>

    <footer class="footer">
        <div class="footer-container">
            <p class="footer-title"><a href="#top">Espresso Lane</a></p>

            <address class="footer-address">
                <p class="footer-info">〒123-4567 福岡県北九州市小倉北区XX-XXXX</p>
                <p class="access-info"></p>TEL: <span class="mobile-only"><a
                        href="tel:0930001234">093-000-1234</a></span>
                <span class="desktop-only">093-000-1234</span></p>
            </address>

            <p class="footer-copyright">&copy; 2025 Espresso Lane. All rights reserved.</p>
        </div>
    </footer>

</body>

</html>

解答例（CSS）

※ CSSを記述し、ワイヤーフレーム通りに再現しましょう。どうしてもわからない場合は下記の例を確認しましょう。自分のコードと比べてみてください。

:root {
    --base-color: var(--white)fff;
    --main-color: #441702;
    --accent-color: #ff5722;
    --text-color: #000000;
    --white: #fff;
    --gray: #ddd;
}

/* HTMLのデフォルト設定 */
html {
    font-size: 100%;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

body {
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-color);
    background-color: var(--base-color);
    word-break: break-word;
}

/* リンクの基本スタイル */
a:link {
    color: var(--main-color);
    text-decoration: none;
}

a:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

a:visited {
    color: var(--main-color);
}

a:active,
a:focus {
    color: var(--main-color);
}

/* スタイルリセット */
ul,
ol {
    list-style: none;
}

address {
    font-style: normal;
}



.container {
    width: calc(100% - 2rem);
    margin: 0 auto;
    max-width: 1200px;
}

/* header */
.header {
    padding: 20px 0;
    text-align: center;
    background-color: #ffe6a2;
}

.header-title {
    font-size: 2rem;
    margin-bottom: 20px;
}

.header-list {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

/* keyvisual */
.keyvisual {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0;
}

.keyvisual img {
    width: 100%;
    height: 80vh;
    object-fit: cover;
    vertical-align: bottom;
}

/* セクション */
section {
    padding: 30px 0;
}

/* 各セクション確認のため色をつけている */
.about {
    background-color: #ffd9d9;
}

.menu {
    background-color: #f9face;
}

.access {
    background-color: #aaf4ff;
}

/* タイトルスタイル */
.section-title {
    font-size: 1.5rem;
    text-align: center;
    color: var(--main-color);
    padding-bottom: 0.5rem;
    letter-spacing: 0.05em;
    margin-bottom: 2rem;
}

/* about */
.about-text {
    text-align: justify;
}

/* menu */
.menu-list {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 2rem;
}

.menu-list img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

.menu-item {
    border: 1px solid var(--gray);
    height: 100%;
}

.menu-article {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--white);
    padding-bottom: 20px;
}

.menu-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.menu-name {
    text-align: center;
    padding: 1rem 0 0.5rem;
}

.menu-description {
    padding: 0 2rem;
    margin-bottom: auto;
}

/* access */
.access-info {
    padding: 0 1rem;
}

.access-map {
    margin: 20px 0 0;
    display: block;
    max-width: 100%;
}



/* footer */
.footer {
    background-color: var(--main-color);
    padding: 1rem 0;
    color: var(--white);
    text-align: center;
}


.footer-title a {
    font-size: 1.5rem;
    color: var(--white);
}

.footer-title a:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.footer-info {
    font-size: 0.9rem;
}

.footer-copyright {
    font-size: 0.7rem;
    padding-top: 1rem;
}

/* モバイル専用表示 */
.mobile-only {
    display: inline;
}

.desktop-only {
    display: none;
}

/* デスクトップ向け拡張 */
@media (min-width: 768px) {
    body {
        font-size: 16px;
        line-height: 1.8;
    }


    section {
        padding: 100px 0;
    }

    .section-title {
        font-size: 2rem;
    }

    .about-container {
        width: 520px;
        margin: 0 auto;
    }

    .menu-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem 2rem;
    }

    .access-address {
        width: 540px;
        margin: 0 auto 30px;
        text-align: center;
    }

    .mobile-only {
        display: none;
    }

    .desktop-only {
        display: inline;
    }
}