第1回 WEB制作の全体像とHTMLの基礎

この講座のゴール

コーポレートサイト を1人でコーディングできるようになる

• コーポレートサイト（4〜5ページ想定）を一人で制作できる

  

• デザインを見てhtmlを組み立てられる
  デザイン例 ① デザイン例 ②
• コピペではなく、自分で考えて理由を持ってコードをかける
• 軽めの修正、追加依頼なら対応できる

WEBサイトの制作フロー

一般的な制作の流れ

要件定義

webサイトの仕様を決定する作業のこと

【カフェのWebサイトを作る場合（例）】

設計

デザイン前の設計図＝ワイヤーフレームを作成する作業のこと

ワイヤーフレーム：デザインをつけずに、モノクロの状態で情報を整理した設計図のこと

整理する項目の例

• 情報の順番はどうするか
• 必要なコンテンツは何か
• ページ構成はどうするか

デザイン

フォント・カラー・写真などを含めた完成イメージ＝デザインカンプを作る作業のこと

デザインをつける際のポイント

• ターゲットに合わせた「トーン＆マナー」
  デザイナーの好みじゃなくて、「ターゲットが好む世界観か？」で判断する
• 視線誘導と優先順位
  ユーザーに一番見てほしい情報を、真っ先に目に入る場所に置く
• 使い心地と体験
  ボタンの押しやすさ、可読性、一貫性を意識する
• レスポンシブ
  スマホでどう見えるかを確認する
• 白白（余白）の使い方
  適切な余白があることで、どこまでが一つのグループなのかが直感的に伝わる

コーディング

HTML・CSS・JavaScriptなどのコードを使ってWebページとして形にする作業のこと

デザインという「設計図」を、ブラウザが理解できる言葉に「翻訳」していく

• これはタイトル、これは文章などパーツを決める（HTML）
• 文字は白色、背景は黒色など見た目を整える（CSS）
• スクロールしたら文字が出てくる（JavaScript）

今回の講座では、このコーディングをメインに学習していきます！

公開

サーバーにデータをアップロードし、インターネット上からアクセスできる状態にする作業のこと

コーディングとは何か？

デザインカンプをもとに
HTML / CSS / JavaScript などの言語で
Webページに翻訳する作業

• HTML
  情報や構造を配置する（これはタイトル、これは文章など骨組みを決める）
• CSS
  見た目を整える（文字は白色、背景は黒色など見た目を整える）
• JavaScript
  動きや反応をつける（スクロールしたら文字が出てくる）

第1回では「HTML」だけに集中して学習していきます

フォルダ構成と拡張子

HTML / CSS / JavaScript はそれぞれ決まった場所にファイルを作成するのが基本

project/
├── index.html
├── css/
│      └── style.css
├── js/
│      └── script.js
└── img/
       └── sample.jpg

• .html：フォルダ直下に置く（「project」の名前は任意）
• .css：cssフォルダの中に置く
• .js：jsフォルダの中に置く

ファイルごとに役割を分けるのが基本

HTMLの基本構造

Webページの基本的な構成

• ヘッダー
  ロゴやメニューを配置して、ユーザーが迷わずに他のページへ移動できるようにする場所
• メインビジュアル
  パッと見て「何のサイトか」「どんな雰囲気か」を伝え、ユーザーの心を一瞬で掴むエリア
• コンテンツ
  サービスの強み、メニュー、お知らせ、お客様の声など、ユーザーが知りたい具体的な中身
• CTA
  「予約する」「お問い合わせ」といった行動を促すためのボタンやエリア
• フッター
  住所、SNSリンク、コピーライトなどを載せ、ページの一番下で情報を締めくくる場所

HTMLではこの「構造」を表現する

<header>
  <h1>カフェ・サンプルの公式サイト</h1>
  <nav>メニュー（ホーム、サービス、アクセスなど）</nav>
</header>

<main>
  <div class="container">
    <section>
      <h2>サービス紹介</h2>
      <p>私たちはこんなサービスを提供しています。</p>
    </section>
    
    <section>
      <h2>お客様の声</h2>
      <p>お客様の声を紹介します。</p>
    </section>
  </div>
</main>

<footer>
  <small>Copyright © 2026 Cafe Sample All Rights Reserved.</small>
</footer>

タグの考え方

HTMLは基本的に「開始タグ」「終了タグ」をセットで書く必要があり、タグで囲まれた部分が「意味」を持つ

• <タグ>：開始タグ（<>で囲む）
• </タグ>：終了タグ（</>で囲む）

ネスト構造

HTMLは箱が入れ子になった構造＝ネスト構造でできている

<main>
  <section>
    <h2>私たちについて</h2>
    <p>サンプル株式会社は〇〇を提供しています。</p>
  </section>
</main>

• mainの中にsection
• sectionの中にh2,p

親要素と子要素

外側の箱が「親」で、その中に入っている箱が「子」になる

• 親要素： 他のタグを包んでいる外側のタグ
• 子要素： 他のタグに包まれている内側のタグ

自分で書いてみよう

「架空の会社のトップページ」

次のコードをVSCodeに書いてブラウザで表示してみよう

• 会社名を考えて表示してみよう
• ヘッダーメニューを3つ表示してみよう
• 「会社案内」セクションを作って説明文を書いてみよう
• フッターを考えて表示してみよう

<header>
  <h1>＿＿＿＿＿＿＿＿＿＿</h1>
  <nav>
    <ul>
      <li><a href="#">＿＿＿＿</a></li>
      <li><a href="#">＿＿＿＿</a></li>
      <li><a href="#">＿＿＿＿</a></li>
    </ul>
  </nav>
</header>

<main>
  <section>
    <h2>＿＿＿＿＿＿＿＿＿＿</h2>
    <p>＿＿＿＿＿＿＿＿＿＿</p>
  </section>
</main>

<footer>
  <p>© ＿＿＿＿＿＿＿＿＿＿</p>
</footer>

テンプレートファイル配布

ダウンロード

書く内容のヒント

画像やリンクについて

画像を表示したり、他ページへのリンクをつけたりするためには「ファイルパス」が必要となる

ファイルパスとは？

ファイルやフォルダの場所を示す「住所」のような情報のこと

ファイルパスの種類

• 絶対パス
  URLを省略せずに全部書く方法（https://school.coding-lab.jp/）
• 相対パス
  今編集しているファイルから見た位置を書く方法（./img/sample.jpg）

絶対パス

URLを省略せずに全部書く方法を「絶対パス」と言う

例： https://school.coding-lab.jp/

外部サイトへのリンクを貼る際はこちらを使う

リンクをつけるときの例

リンクをつけたい場合はaタグを使う

href属性にパスを書き、開始タグと終了タグの間にリンクとして表示するテキストを書く

<a href="https://school.coding-lab.jp/">コーディングラボ</a>

コーディングラボ

target属性に「_blank」を指定すると、別タブでページを開くことができる

<a href="https://school.coding-lab.jp/" target="_blank">コーディングラボ</a>

相対パス

今編集しているファイルから見た位置を書く方法を「相対パス」と言う

例： ./img/sample.jpg

Web制作では基本的に相対パスを使用する

画像を表示するときの例

• 画像を表示する場合はimgタグを使ってsrc属性にパスを書く
• altには画像の説明文を書く（空でも画像は表示される）
• imgタグには、終了タグがない

<img src="./img/sample.jpg" alt="サンプル画像">

書き方のルール

• ./ ：「同じ階層（同じフォルダ内）」という意味
• ../ ：「一つ上の階層（外側のフォルダ）」に出るという意味
• フォルダ名/ ：「そのフォルダの中に入る」という意味

書き方の例

project/
├── index.html
├── css/
│      └── style.css
├── js/
│      └── script.js
└── img/
       └── sample.jpg

画像を表示してみよう

配布フォルダの中にある「img」フォルダの中の画像を表示してみよう

ヒント

• imgタグを使う
• 「相対パス」を使って書く
• altには画像の説明を書く

まとめ

今回のまとめ

• WEB制作は「要件定義（目的）・設計（図解）・デザイン（見た目）・実装（翻訳）・公開（アップロード）」の5ステップ
• コーディングは「HTML/CSS/JS」を使ってブラウザが動かせる言葉に書き換える作業
• HTMLは、タグを使って「ここは見出し」「ここは文章」という「構造」を作る言語

次回の予定

CSSを使って見た目を整えていく方法を学びます