はじめてのHTML & CSS — カフェサイト「Cafe Mocha」を一緒に作ろう
はじめに
この本を手に取ってくださって、ありがとうございます。
この教材では、架空のカフェ 「Cafe Mocha(カフェ モカ)」 のWebサイトを、まっさらな状態から一緒に作っていきます。
完成するのは、次の5ページで構成された本格的なサイトです。
🏠 トップページ|index.html お店の顔。ヒーロー画像・コンセプト・メニュー・店舗情報・お問い合わせへの導線
コンセプト|concept.html お店のこだわりを伝える文章ページ
🍰 メニュー|menu.html 写真つきのメニュー紹介ページ
🗺 アクセス|access.html 店舗情報と地図(Googleマップ埋め込み)
✉️ お問い合わせ|contact.html 入力フォームのあるページ
🌐 まずは「完成形」を見てみてください
言葉で説明するより、実際に見ていただくのがいちばん早いですね。
この教材で作るサイトを、そのままWeb上に公開しています。
▼ 完成版デモサイト(実際に動きます)
https://mitsuru53.github.io/Cafe-Mocha/
ぜひ、次のポイントを試してみてください。
ナビゲーションをクリック して、5つのページを行き来してみる
メニューやボタンにマウスを乗せる と、ふわっと色が変わる演出
ブラウザの幅を狭めてみる と、余白が保たれたまま表示が保たれる
アクセスページの地図 や、お問い合わせページのフォーム の作り込み
「こんなの、自分に作れるだろうか…」と思いましたか?
大丈夫です。このサイトを、まっさらなフォルダから1行ずつ、一緒に組み立てていきます。
最終章を読み終える頃には、このデモとまったく同じものが、あなたのパソコンの中で動いているはずです。
この本の読み方 — 「ペアプログラミング」のように
この教材は、隣の席に座った先輩と一緒にコードを書く「ペアプログラミング」をイメージして書いています。
ですから、コードは必ず自分の手で打ち込んでください。
コピー&ペーストで済ませると、確かに速く「完成」はします。
でも、手を動かして「あれ、表示が崩れた…どこを間違えたんだろう?」と悩む時間こそが、いちばんの学びになります。タイプミスも立派な教材です。
進め方のリズム
各章は、だいたいこのリズムで進みます。
これから作るものを確認する
コードを書く(少しずつ!)
保存してブラウザで確認する
なぜそう書くのかを理解する
「書く → 見る → 理解する」を小さく回すのがコツです。
一気に書いて一気に確認すると、間違えたときにどこが原因か分からなくなってしまいます。
必要な前提知識
ほぼゼロでOKです。
「フォルダを作る」「ファイルを保存する」といったパソコンの基本操作ができれば大丈夫。
HTMLもCSSも、この本の中で一つずつ説明していきます。
それでは、始めましょう。
Chapter 0:準備運動 — 道具とフォルダを整えよう
コードを書き始める前に、作業環境を整えます。料理でいう「まな板と包丁を出して、材料を並べる」工程です。ここを丁寧にやっておくと、後がぐっと楽になります。
0-1. エディタを用意する
HTMLやCSSはただのテキストファイルなので、メモ帳でも書けます。ただ、せっかくなのでプロも使う無料エディタ Visual Studio Code(VS Code) を使いましょう。
公式サイト(https://code.visualstudio.com/)からダウンロードしてインストール
起動したら、拡張機能 「Japanese Language Pack」 を入れると日本語化できます
もうひとつ、拡張機能 「Live Server」 も入れておきましょう。ファイルを保存するたびにブラウザが自動で更新されるようになり、「書く → 見る」のリズムがとても快適になります
ちょっと一言 エディタは他にも色々ありますが、迷ったらVS Codeで間違いありません。世界中のWeb制作者が使っている定番です。
0-2. フォルダ構成を作る
デスクトップなど好きな場所に、サイト全体を入れるフォルダを作ります。名前は cafe-mocha としましょう。
その中に、画像を入れるための img フォルダも作っておきます。
cafe-mocha/
└── img/
最終的には、こんな構成になります。今は「ふーん、最後はこうなるのか」と眺めるだけでOKです。
cafe-mocha/
├── index.html ← トップページ
├── concept.html ← コンセプトページ
├── menu.html ← メニューページ
├── access.html ← アクセスページ
├── contact.html ← お問い合わせページ
├── style.css ← 全ページ共通のCSS
├── concept.css ← コンセプトページ専用のCSS
├── menu.css ← メニューページ専用のCSS
├── access.css ← アクセスページ専用のCSS
├── contact.css ← お問い合わせページ専用のCSS
└── img/ ← 画像フォルダ
├── hero.png (ヒーロー画像:店内の写真)
├── latte.png (ラテの写真)
├── scone.png (スコーンの写真)
└── gateau.png (ガトーショコラの写真)
0-3. 画像を用意する
4枚の画像を img フォルダに入れてください。
hero.png … あたたかい雰囲気の店内写真 → トップページの大きな背景に使います
latte.png … ラテアートの写真 → メニュー(自家焙煎ラテ)に使います
scone.png … スコーンの写真 → メニュー(手作りスコーン)に使います
gateau.png … ケーキの写真 → メニュー(ガトーショコラ)に使います
ファイル名について
素材サイトからダウンロードした画像は、YrnxtRXG.png のような意味のないランダムな名前になっていることがよくあります。
そのまま使うこともできますが、本書では 「中身がひと目で分かる名前」に変えてから使う ことをおすすめします。
ヒーロー画像なら hero.png、ラテの写真なら latte.png という具合です。
ファイルが4枚のうちは困りませんが、実際のサイトでは画像が何十枚にもなります。
そのとき IMG_4523.png だらけのフォルダと、hero.png latte.png と並んだフォルダ、どちらが作業しやすいかは明らかですよね。
「未来の自分が読んで分かる名前を付ける」 —— これはファイル名に限らず、classの命名にも通じる、プログラミング全体の大切な習慣です。
なお、ファイル名は 半角英数字の小文字 で付けるのが安全です。
日本語やスペース入りの名前は、Webサーバーにアップしたときにトラブルの原因になることがあります。
0-4. VS Codeでフォルダを開く
VS Codeのメニューから 「ファイル」→「フォルダーを開く」 で、さきほど作った cafe-mocha フォルダを開きます。左側のエクスプローラーに img フォルダが見えていれば準備完了です。
準備運動はここまで。次の章から、いよいよコードを書いていきます!
はじめてのHTML & CSS — カフェサイト「Cafe Mocha」を一緒に作ろう
はじめに
この本を手に取ってくださって、ありがとうございます。
この教材では、架空のカフェ 「Cafe Mocha(カフェ モカ)」 のWebサイトを、まっさらな状態から一緒に作っていきます。
完成するのは、次の5ページで構成された本格的なサイトです。
🏠 トップページ|index.html お店の顔。ヒーロー画像・コンセプト・メニュー・店舗情報・お問い合わせへの導線
コンセプト|concept.html お店のこだわりを伝える文章ページ
🍰 メニュー|menu.html 写真つきのメニュー紹介ページ
🗺 アクセス|access.html 店舗情報と地図(Googleマップ埋め込み)
✉️ お問い合わせ|contact.html 入力フォームのあるページ
🌐 まずは「完成形」を見てみてください
言葉で説明するより、実際に見ていただくのがいちばん早いですね。
この教材で作るサイトを、そのままWeb上に公開しています。
▼ 完成版デモサイト(実際に動きます)
https://mitsuru53.github.io/Cafe-Mocha/
ぜひ、次のポイントを試してみてください。
ナビゲーションをクリック して、5つのページを行き来してみる
メニューやボタンにマウスを乗せる と、ふわっと色が変わる演出
ブラウザの幅を狭めてみる と、余白が保たれたまま表示が保たれる
アクセスページの地図 や、お問い合わせページのフォーム の作り込み
「こんなの、自分に作れるだろうか…」と思いましたか?
大丈夫です。このサイトを、まっさらなフォルダから1行ずつ、一緒に組み立てていきます。
最終章を読み終える頃には、このデモとまったく同じものが、あなたのパソコンの中で動いているはずです。
この本の読み方 — 「ペアプログラミング」のように
この教材は、隣の席に座った先輩と一緒にコードを書く「ペアプログラミング」をイメージして書いています。
私(本書)がナビゲーター:「次はここを書きましょう」「ここで一度ブラウザを見てみましょう」と道案内をします。
あなたがドライバー:実際にキーボードを叩いてコードを書くのは、あなたです。
ですから、コードは必ず自分の手で打ち込んでください。
コピー&ペーストで済ませると、確かに速く「完成」はします。
でも、手を動かして「あれ、表示が崩れた…どこを間違えたんだろう?」と悩む時間こそが、いちばんの学びになります。タイプミスも立派な教材です。
進め方のリズム
各章は、だいたいこのリズムで進みます。
これから作るものを確認する
コードを書く(少しずつ!)
保存してブラウザで確認する
なぜそう書くのかを理解する
「書く → 見る → 理解する」を小さく回すのがコツです。
一気に書いて一気に確認すると、間違えたときにどこが原因か分からなくなってしまいます。
必要な前提知識
ほぼゼロでOKです。
「フォルダを作る」「ファイルを保存する」といったパソコンの基本操作ができれば大丈夫。
HTMLもCSSも、この本の中で一つずつ説明していきます。
それでは、始めましょう。
Chapter 0:準備運動 — 道具とフォルダを整えよう
コードを書き始める前に、作業環境を整えます。料理でいう「まな板と包丁を出して、材料を並べる」工程です。ここを丁寧にやっておくと、後がぐっと楽になります。
0-1. エディタを用意する
HTMLやCSSはただのテキストファイルなので、メモ帳でも書けます。ただ、せっかくなのでプロも使う無料エディタ Visual Studio Code(VS Code) を使いましょう。
公式サイト(https://code.visualstudio.com/)からダウンロードしてインストール
起動したら、拡張機能 「Japanese Language Pack」 を入れると日本語化できます
もうひとつ、拡張機能 「Live Server」 も入れておきましょう。ファイルを保存するたびにブラウザが自動で更新されるようになり、「書く → 見る」のリズムがとても快適になります
0-2. フォルダ構成を作る
デスクトップなど好きな場所に、サイト全体を入れるフォルダを作ります。名前は cafe-mocha としましょう。
その中に、画像を入れるための img フォルダも作っておきます。
最終的には、こんな構成になります。今は「ふーん、最後はこうなるのか」と眺めるだけでOKです。
0-3. 画像を用意する
4枚の画像を img フォルダに入れてください。
hero.png … あたたかい雰囲気の店内写真 → トップページの大きな背景に使います
latte.png … ラテアートの写真 → メニュー(自家焙煎ラテ)に使います
scone.png … スコーンの写真 → メニュー(手作りスコーン)に使います
gateau.png … ケーキの写真 → メニュー(ガトーショコラ)に使います
0-4. VS Codeでフォルダを開く
VS Codeのメニューから 「ファイル」→「フォルダーを開く」 で、さきほど作った cafe-mocha フォルダを開きます。左側のエクスプローラーに img フォルダが見えていれば準備完了です。
準備運動はここまで。次の章から、いよいよコードを書いていきます!