この講座で作るもの＆
制作環境を整えよう
これから全10回をかけて、架空のカフェサイトをゼロから作っていきます。今回はまず完成形を確認し、コードを書くための環境を整えるところから始めましょう。この1回が終わるころには、あなたの画面にはじめてのWebページが表示されているはずです。
はじめに — この講座について
- この講座で最終的に作るカフェサイトの完成形を確認する
- コードエディター（VS Code）をインストールし、拡張機能を導入する
- プロジェクト用のフォルダを作り、画像素材をダウンロードする
- はじめてのHTMLファイルを作り、ブラウザに「Hello World」を表示する
はじめまして、成宮カノンです。DE:ZIGNでクリエイティブ・ディレクションを担当しています。
この講座は「Webサイトを作ってみたいけれど、何から始めればいいかわからない」という方のために書きました。HTMLもCSSも触ったことがなくて大丈夫です。全10回を通して、実際に手を動かしながら1つのWebサイトを完成させることをゴールにしています。
私自身、美大の在学中に独学でWeb制作を学びました。最初はエディターの選び方すらわからなくて、検索しては迷って、また検索して……の繰り返し。だからこそ、「最初の一歩」でつまずく不安はよくわかります。この講座では、そのつまずきをできるだけなくせるように、一つひとつ丁寧に進めていきます。
コードを書くのに特別な才能は要りません。必要なのは、テキストを打てるパソコンと、「作ってみたい」という気持ちだけ。
完成形を見てみよう
まず、この講座で最終的にどんなサイトを作るのかを見てみましょう。
作るのは café SOEL（カフェ ソエル） という架空のカフェのWebサイトです。1ページ完結のシングルページサイトで、トップのメインビジュアルから始まり、コンセプト、メニュー、ギャラリー、店舗情報と続く構成になっています。
「自分にこんなサイトが作れるの？」と思うかもしれません。でも安心してください。このサイトはHTMLとCSSだけで作られています。特別なプログラムや難しいフレームワークは使いません。1回ずつコードを積み重ねていけば、必ずここにたどり着けます。
講座の全体像
全10回の流れを簡単に紹介します。
第1回（今回）で制作環境を整えたあと、第2回・第3回でHTMLを使ってサイトの「骨組み」を作ります。第4回〜第7回でCSSを使って見た目を整え、レイアウトを組み、デザインを仕上げます。第8回でSEO（検索エンジン対策）、第9回でアクセシビリティとパフォーマンスの最終チェック、第10回でサーバーにアップロードして公開、という流れです。
さらに番外編として、CSSアニメーション、JavaScriptによるインタラクション、デザインカスタマイズの3回を用意しています。本編を終えたあとに、もう一歩踏み込みたい方向けの内容です。
コードエディターを準備しよう
Webサイトを作るには、コードを書くためのアプリケーション（コードエディター）が必要です。この講座では Visual Studio Code（通称 VS Code）を使います。
VS Codeをインストールする
公式サイトにアクセスする
ブラウザで https://code.visualstudio.com/ を開いてください。青い大きなダウンロードボタンが表示されます。
ダウンロードしてインストールする
お使いのOSに合ったインストーラーが自動で選ばれるので、ボタンをクリックしてダウンロードしてください。ダウンロードが終わったら、ファイルを開いて画面の指示に従ってインストールします。Macの場合は、ダウンロードした .dmg ファイルを開き、VS Codeアイコンをアプリケーションフォルダにドラッグするだけです。
VS Codeを起動する
インストールが終わったらVS Codeを起動しましょう。Welcome（ようこそ）タブが表示されたら成功です。初回起動時に表示言語の設定が求められることがありますが、ここでは日本語・英語どちらでもかまいません。
おすすめの拡張機能を入れよう
VS Codeは拡張機能（Extensions）を追加することで、コーディングがぐっと快適になります。この講座で特に役立つものを3つ紹介します。
拡張機能のインストール方法は簡単です。VS Codeの左サイドバーにある四角いアイコン（拡張機能アイコン）をクリックし、検索バーに名前を入力して、表示された拡張機能の「Install」ボタンを押すだけです。
Japanese Language Pack for VS Code
VS Codeのメニューを日本語にする拡張機能です。英語のままでも問題なく使えますが、はじめてのうちは日本語のほうが安心かもしれません。インストール後、VS Codeを再起動すると反映されます。
Live Server
HTMLファイルをブラウザでリアルタイムにプレビューできる拡張機能です。ファイルを保存するたびに、ブラウザが自動的に更新されます。いちいち手動でリロードしなくてよくなるので、コーディングのテンポがよくなります。この講座を通してずっと使います。
Prettier - Code formatter
コードの見た目（インデントや改行）を自動で整えてくれる拡張機能です。読みやすいコードを書く習慣づけに役立ちます。インストール後、VS Codeの設定で「Format On Save」を有効にしておくと、保存のたびに自動整形されて便利です。
プロジェクトフォルダを作ろう
エディターの準備ができたので、次はサイトのファイルを入れるフォルダを作ります。Web制作では、HTML・CSS・画像などのファイルを1つのフォルダにまとめて管理します。このフォルダのことを「プロジェクトフォルダ」と呼びます。
フォルダを作成する
デスクトップでも、ドキュメントフォルダの中でも、お好きな場所に cafe-soel という名前のフォルダを新規作成してください。フォルダ名は半角英数字にするのがルールです。日本語のフォルダ名は、あとでサーバーにアップロードするときにトラブルの原因になることがあります。
サブフォルダを作る
cafe-soel フォルダの中に、css、img、js の3つのフォルダを作成してください。それぞれ、CSSファイル、画像ファイル、JavaScriptファイルを入れる場所です。
cafe-soel/
├── index.html ← これから作成
├── css/
│ └── style.css ← 第4回で作成
├── img/
│ ├── hero.jpg
│ ├── concept.jpg
│ ├── menu-coffee.jpg
│ ├── menu-latte.jpg
│ ├── menu-cake.jpg
│ ├── menu-sandwich.jpg
│ ├── interior-01.jpg
│ ├── interior-02.jpg
│ ├── exterior.jpg
│ ├── logo.png
│ ├── ogp.jpg
│ └── favicon.svg
└── js/
└── main.js ← 番外編で作成
最終的にはこのような構成になりますが、今の段階ではフォルダだけ作っておけば大丈夫です。ファイルはこのあと順番に作っていきます。
VS Codeでフォルダを開く
VS Codeのメニューから「ファイル」→「フォルダーを開く」を選び、先ほど作った cafe-soel フォルダを選択してください。左サイドバーの「エクスプローラー」に、フォルダの中身が表示されるはずです。これで、このフォルダの中で作業する準備が整いました。
画像素材をダウンロードしよう
この講座で使う画像素材を、ZIPファイルにまとめて用意しています。第3回以降のHTMLで実際に使いますが、先にダウンロードしてプロジェクトフォルダに入れておきましょう。
画像素材をダウンロードする →
ZIPファイルの中には、ヒーロー画像、メニュー写真、店内や外観の写真、ロゴ、OGP画像、ファビコン用のSVGファイルが入っています。全部で12ファイルです。
今の段階ではまだ使いませんが、講座が進むにつれて「今回は hero.jpg を使います」のように都度お伝えしていきます。とりあえず img フォルダの中に全部入っていればOKです。
はじめてのHTMLファイルを作ろう
いよいよ、はじめてのHTMLファイルを作ります。まだ本格的なコードは書きません。まずは「ファイルを作って、ブラウザに文字を表示する」という一番シンプルな体験をしましょう。
index.html を作成する
VS Codeの左サイドバー（エクスプローラー）で cafe-soel フォルダを右クリックし、「新しいファイル」を選択します。ファイル名は index.html と入力してください。
コードを書く
作成した index.html が自動的に開くので、以下のコードをそのまま入力してください。コピー＆ペーストでもかまいませんが、余裕があればぜひ手で打ってみてください。手で打つと、タグの形やルールが自然と身体に馴染んできます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>café SOEL</title>
</head>
<body>
<h1>Hello World!</h1>
<p>café SOELのWebサイトを作っていきます。</p>
</body>
</html>まだ意味がわからなくても大丈夫です。次回の第2回で、このコードの一行一行を丁寧に読み解いていきます。今は「こう書くとWebページになるんだな」くらいの感覚で進めてください。
ただ、1つだけ先にお伝えしておくと、1行目の <!DOCTYPE html> は「このファイルはHTMLで書かれていますよ」とブラウザに教えるための宣言です。おまじないのようなものですが、これがないとブラウザが正しく表示してくれないことがあるので、必ず1行目に書いてくださいね。
ブラウザで表示してみよう
書いたコードをブラウザで確認しましょう。ここで、先ほどインストールした Live Server が活躍します。
Live Server で起動する
VS Codeで index.html を開いた状態で、画面右下にある「Go Live」というボタンをクリックしてください。ブラウザが自動的に開いて、ページが表示されます。
表示を確認する
ブラウザに大きな太字で「Hello World!」と表示され、その下に「café SOELのWebサイトを作っていきます。」というテキストが表示されていれば成功です。
Hello World!
café SOELのWebサイトを作っていきます。
おめでとうございます！ これがあなたのはじめてのWebページです。見た目はとてもシンプルですが、これは立派なHTMLファイルがブラウザ上で動作している状態です。ここからCSSで色やレイアウトを整えていくと、あの完成形のデモサイトに少しずつ近づいていきます。
試しに編集してみよう
Live Serverの便利さを体感するために、少しだけ編集してみましょう。VS Codeに戻って、<h1>Hello World!</h1> の「Hello World!」を「ようこそ、café SOELへ」に変えてみてください。変更したら Ctrl + S（Macは Cmd + S）で保存します。
ブラウザを見ると、リロードしていないのに表示が更新されているはずです。これがLive Serverの自動リロード機能です。この講座では何度もコードを書いてはブラウザで確認する、を繰り返します。そのたびに手動でリロードしなくていいので、とても快適です。
ここまでの確認
今回の作業がすべてうまくいっていれば、あなたの環境はこの状態になっているはずです。
・拡張機能（Japanese Language Pack、Live Server、Prettier）が入っている
・cafe-soel フォルダの中に css・img・js フォルダがある
・img フォルダの中に画像素材（12ファイル）が入っている
・index.html を作成し、ブラウザで表示できた
もしどこかでうまくいかないところがあっても、焦らなくて大丈夫です。エラーの多くはタイプミスやファイルの場所の問題です。一度ファイル名やフォルダの場所を見直してみてください。
制作環境を整える作業は地味に感じるかもしれません。でも、きちんと整った環境は、このあとのすべての作業を快適にしてくれます。
今回のまとめ
- この講座では全10回をかけて、café SOEL（カフェ ソエル）のWebサイトをHTMLとCSSで作り上げる
- コードエディターにはVS Codeを使用する。無料で高機能、Web制作の現場で最も広く使われている
- 拡張機能として Japanese Language Pack、Live Server、Prettier を導入した
- プロジェクトフォルダ cafe-soel を作り、中に css・img・js のサブフォルダを用意した
- 講座で使う画像素材12ファイルをダウンロードし、img フォルダに配置した
- はじめてのHTMLファイル index.html を作成し、ブラウザで「Hello World」を表示できた
- Live Server の自動リロード機能で、保存するたびにブラウザの表示が更新されることを確認した