STEP 0: 準備

このステップの目的

これからコーディングを始める人のために、パソコンの中の準備・ツールの設定・素材の整理を行うステップです。ここをしっかり整えることで、後の作業がスムーズになります。

checklistやることチェックリスト

  • フォルダ構成を作る（HTML/CSSを保存する場所を分ける）
  • コーディングエディタをインストールする（VS Code など）
  • 必要な素材をそろえる（画像・テキスト・ワイヤーフレームなど）
  • HTML/CSSのテンプレートをダウンロードする

folder_managedフォルダ構成の見本

初心者でも迷わないように、まずは以下のようなフォルダ構成を作ってください：

Coding-Compass/
├─ index.html                ← トップページ
├─ step-guide.html          ← 8ステップガイド
│
├─ css/
│   └─ style.css            ← スタイルシート
├─ images/
│   └─ logo.png など        ← 画像素材
├─ js/
│   └─ script.js            ← JavaScriptファイル（任意）
└─ assets/
    └─ wireframes/          ← ワイヤーフレーム画像など（任意）

ポイント：

  • ファイル名は 半角英数字＋小文字 で。
  • 拡張子（.html, .css）を忘れずに！
  • フォルダ名やファイル名にスペースを入れない

terminalエディタの準備（おすすめ：VS Code）

Web制作では「コードを書くためのソフト」が必要です。
初心者にも使いやすい無料ソフト【VS Code】をおすすめします。

インストール手順（Windowsの場合）

  1. VS Code公式サイトにアクセス
  2. 「Download for Windows」をクリック
  3. ダウンロードした .exe ファイルを実行してインストール

最低限の設定

  • 日本語化：「Japanese Language Pack for Visual Studio Code」をインストール
  • Live Server：リアルタイムでブラウザ確認ができる拡張機能
  • ファイルは「UTF-8（BOMなし）」で保存（設定推奨）

inventory_2素材を集める

サイト制作では「画像」「テキスト」などの素材も必要です。このタイミングで、準備しておきましょう。

素材の例：

  • ロゴ画像・バナー
  • 各ページに掲載するテキスト
  • ワイヤーフレーム画像（またはスキャンした手書き図）

file_downloadテンプレートを使ってみよう

「一から全部書くのが不安…」という人のために、基本のHTML＋CSSテンプレートを配布します。

download基本テンプレートをダウンロード（ZIP） ※リンクは仮

テンプレートの中身：

テンプレート/
├─ index.html
├─ css/
│   └─ style.css
└─ images/
    └─ logo.png

warning注意点（よくあるミス）

  • CSSの読み込みパスを間違えるとデザインが反映されません
    正しくは：<link rel="stylesheet" href="css/style.css">
  • ファイル名にスペースや日本語を入れない
    （例：My Page.html → NG）
  • 拡張子やスペルミスに注意
    （例：.htm, .ccs はNG）

このステップのゴール

✅ フォルダ構成がきれいに整っている
✅ エディタ（VS Code）がインストール済み
✅ 素材がそろっている
✅ HTML/CSSのテンプレートが使える状態

→ これで、コーディングのスタートラインに立てます！

extensionおまけ①：VS Codeの便利な拡張機能

VS Codeは、拡張機能（エクステンション）を追加することで、もっと便利に使えます。

拡張機能の入れ方（超カンタン！）

  1. VS Code 左側のメニューにある「□が4つ並んだアイコン（拡張機能）」をクリック
  2. 上部の検索窓にキーワードで検索（例：「Live Server」など）
  3. 目的の拡張機能の「インストール」ボタンを押すだけ！

extension入れておきたいおすすめ拡張機能

Japanese Language Pack
VS Codeを日本語表示にする
Live Server
HTMLをリアルタイムでブラウザに表示。保存したら即反映！
Auto Rename Tag
HTMLの開始タグと終了タグを同時に書き換えられる
Prettier – Code formatter
コードのインデントやスペースを自動で整えてくれる
Color Highlight
CSS内のカラーコードに色を表示してくれる
Path Intellisense
ファイル名やパスを自動で補完してくれる。ミス防止に◎

→ 最初は「Live Server」「Japanese Language Pack」だけでもOK！

→ 最初は「Live Server」「Japanese Language Pack」だけでもOK！

collectionsおまけ②：おすすめの素材集リンク集

サイト制作に役立つ無料素材サイトをまとめました。
※商用利用OK／クレジット不要なものを中心に掲載していますが、ご利用の際は各サイトのライセンスを必ずご確認ください。

写真素材

  • Unsplash（高品質な海外写真）
  • O-DAN（複数サイトを一括検索）
  • ぱくたそ（日本人モデル多数）

イラスト素材

アイコン素材

Webフォント

注意点：必ず注意してください

  • 「商用利用OKかどうか」は必ず確認
  • ダウンロードした画像はimages/フォルダ内に整理
  • ファイル名は英数字・小文字・スペースなし
rocket_launch

準備が整ったら、いよいよコーディング開始！

フォルダ構成、エディタ、素材の準備ができたら、次はいよいよ「HTMLの骨組み」を作っていきましょう。ワイヤーフレームをもとに、ページ全体の構造を組み立てていく工程です。

最初の一歩として、ページの中に「どんな情報を、どんな順番で、どう配置するか」を形にしていきます。

STEP 1を見る arrow_forward