カフェのWebサイトをもっとアレンジしよう

今回はこれまでの3日間で学んだことを活かして、カフェページをもっとアレンジしていきます。

今日やることは大きく2つです。

CSSでデザインを自由に変えてみる
「アクセス」という新しいページを追加する

どちらも3日間で体験した内容の延長です。難しく考えなくて大丈夫ですよ！

目次開く閉じる

STEP1 CSSでデザインを自由に変えてみよう
STEP2 アクセスページを新しく作ろう
STEP3 トップページにリンクを追加しよう
まとめ

STEP1 CSSでデザインを自由に変えてみよう

3日目にCSSを使って背景色やボタンの色などを変えましたね。今日はそこからさらに一歩進んで、自分の好きなデザインに自由に変えてみましょう。

まずはVisualStudio Codeエディターを開いて style.css を開きます。

3日目で学んだ次のプロパティを使って、ページの背景色を変えたり文字の大きさを変えたりと好きなようにアレンジしてみてください。

プロパティ	変わるもの
`background`	背景色
`color`	文字の色
`font-size`	文字の大きさ
`border-radius`	角の丸み

カラーコード辞典も色の参考になります。
https://www.colordic.org/

変更したら保存（Ctrl + S）してブラウザで確認、を繰り返してみましょう。

うまくいかないことやわからないところがあれば質問してくださいね。

デザインサンプル

もしどんなデザインに変えればいいかイメージしにくい場合は、次のサンプルを参考にしてみてください。

サンプル① シンプルな白ベースのテーマカラー

body {
    background: #ffffff;
    color: #333;
}

header {
    background: #222222;
    color: white;
}

サンプル② さわやかなグリーン系のテーマカラー

body {
    background: #f0fff4;
    color: #1a3a2a;
}

header {
    background: #2c6e49;
    color: white;
}

サンプル③ 線だけのボタン（アウトラインボタン）

通常のボタンは背景色がついていますが、背景色をなくして枠線だけにすることもできます。このようなデザインもよく見かけますよね。

.button {
    background: transparent;
    color: #6b4f3b;
    border: 2px solid #6b4f3b;　←新しく追加する
}

transparent（トランスパレント）は「透明」という意味です。背景を透明にすることで、枠線だけのすっきりしたボタンになります。

CSSは気軽に実験しよう

CSSは値を変えて保存 → ブラウザで確認、を繰り返すことでデザインの感覚が身につきます。間違えても Ctrl + Z で元に戻せますので、いろいろ試してみましょう！

STEP2 アクセスページを新しく作ろう

次に、新しいページを作る体験をします。

実際のWebサイトでは複数のページが連携して一つのサイトになっています。今日は「アクセス」というページを新しく作って、お店の場所をGoogleマップで紹介してみましょう。

STEP 2-1 新しいHTMLファイルを作る

VSCodeの左側に表示されているファイル一覧を見てください。index.html や menu.html が並んでいますね。

同じ場所に、新しく access.html というファイルを作ります。

エディターのファイル一覧の上にある「新しいファイル」アイコンをクリックします
ファイル名の入力欄が出てきたら、access.htmlと入力してEnterキーを押します

これで新しいファイルが作成されました。

STEP 2-2 HTMLの基本構造を書く

新しく作ったファイルは中身が何もない状態です。まずはHTMLの基本的な構造を書きますが、今回は menu.html をコピーして同じ構造で中身だけ書き換えて作りましょう。

2日目に開いた index.html や menu.html とほとんど同じ構造です。違うのは <title> の内容と <main> の中身だけです。このように、Webサイトはページが変わっても基本的な骨組みは共通したレイアウトとして使います。

menu.htmlのコードを全て選択してaccess.htmlに貼り付ける
<title>タグに書かれているページタイトルを「メニュー」から「アクセス」に変更
<main>タグの中にあるメニューリスト<ul class="menu-list">〜</ul>までを削除
<h2>タグのテキストを「メニュー」から「アクセス」に変更

上の4つの手順が終わったら次のコードになっているはずです。見比べて確認してみましょう。なお、例ではカフェの名前が「サンプルカフェ」ですが、皆さんは2日目の内容で名前を変えていますので、自分のカフェの名前に置き換えてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>アクセス | サンプルカフェ</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <h1>サンプルカフェ</h1>
        <nav>
            <a href="index.html">ホーム</a>
            <a href="menu.html">メニュー</a>
        </nav>
    </header>

    <main>

        <h2>アクセス</h2>


        <p>
            <a class="button" href="index.html">トップに戻る</a>
        </p>

    </main>

    <footer>
        <p>サンプルカフェ</p>
    </footer>

</body>
</html>

できたら保存（Ctrl + S）して、access.htmlのファイルをエクスプローラーからダブルクリックして、ブラウザで開いてみましょう。

STEP 2-3 お店の情報を書く

次に、お店の基本情報をHTMLで書いてみましょう。

Webサイトでは、住所・営業時間・定休日などをまとめて表示することがよくあります。こういった情報は表（テーブル）を使って整理すると見やすくなります。

<h2> の下に、次のコードを追加してみてください。タイピングに慣れていれば自力でタグの入力にチャレンジしてみましょう。書き写すのが大変であればコードをコピーして貼り付けしてもOKです。

    <h2>アクセス</h2>

    ↓ここから下を追加↓

    <table>
        <tr>
            <th>住所</th>
            <td>大阪府和泉市はつが野3丁目37-5</td>
        </tr>
        <tr>
            <th>営業時間</th>
            <td>10:00〜18:00</td>
        </tr>
        <tr>
            <th>定休日</th>
            <td>火曜日・水曜日</td>
        </tr>
    </table>

保存してブラウザで確認すると、表が表示されます。

tableタグの使い方

表は次の4つのタグを組み合わせて作ります。

タグ	意味
`<table>`	表全体を囲む
`<tr>`	表の1行（table rowの略）
`<th>`	表の見出しのセル（太字で表示される）
`<td>`	表の内容のセル

<tr> の中に <th> と <td> を入れることで、1行分の内容を作ることができます。2日目に学んだ入れ子構造と同じ考え方ですね。

複雑なのでよくわからなくても大丈夫です。表を作るためのHTMLのコードがある、ということだけ覚えておいてください。

STEP 2-4 Googleマップを埋め込もう

お店の情報が書けたら、地図も追加してみましょう。3日目の応用STEPで行ったのと同じ手順です。手順を思い出しながらやってみてください。

Googleマップ（https://www.google.co.jp/maps）を開く
大阪府和泉市はつが野3丁目37-5 を検索する
「共有」→「地図を埋め込む」→「HTMLをコピー」をクリック
コピーしたコードを、さきほど作った表の下に貼り付ける

    <h2>アクセス</h2>

    <table>
        （省略）
    </table>

    <iframe src="https://www.google.com/maps/embed?..."></iframe>

貼り付けたら保存してブラウザで確認してみましょう。表と地図が縦に並んで表示されていれば成功です。

STEP3 トップページにリンクを追加しよう

アクセスページが完成したら、最後にトップページからも移動できるようにリンクを追加しましょう。

エディターで index.html を開きます。ヘッダー部分（<header>〜</header>）のナビゲーション部分を見てください。現在は次のようになっています。

<nav>
    <a href="index.html">ホーム</a>
    <a href="menu.html">メニュー</a>
</nav>

ここに「アクセス」へのリンクを1行追加します。

<nav>
    <a href="index.html">ホーム</a>
    <a href="menu.html">メニュー</a>
    <a href="access.html">アクセス</a>
</nav>

保存してブラウザで確認してみましょう。ヘッダーのメニューに「アクセス」が追加されて、クリックするとアクセスページに移動できれば完成です！

menu.html と access.html のヘッダー部分にも同じ <nav> が書かれています。同じようにリンクを追加しておくと、どのページからでもアクセスページに移動できるようになります。

まとめ

今回はCSSでデザインをアレンジすることと、新しいページを一から作る体験をしました。

CSSでデザインを自由にアレンジした
tableタグを使ってお店の情報をまとめた
Googleマップをページに埋め込んだ
トップページとメニューページにアクセスへのリンクを追加した

HTMLは「内容」を作る言語、CSSは「見た目」を作る言語です。この2つを組み合わせてWebサイトは作られています。