【6日でできるHTML＆CSS入門】Webサイトを作る

　これまで学習してきたHTMLやCSS、Webデザインの知識を組み合わせて、実際にレスポンシブ対応のWebサイトを作成してみましょう。本記事では、ファイルやフォルダの構成から、トップページや問い合わせフォームなどの各ページの基本的な構造、共通CSSによるデザイン設計までを丁寧に解説します。この記事を通じて、シンプルながらも実用的なWebサイトを自分で構築できるようになることを目指します。

１．サイト全体の構成と設計

素材のダウンロード

以下のリンクから使用する素材をダウンロードできます。

「img」フォルダを作成して、その中に「top.png」を保存します。

create-websiteダウンロード
top.png

1.1. ページ構成とフォルダ設計

　Webサイトは複数のHTMLファイル・CSSファイル・画像などで構成されます。ここでは「Creative Studio Leaf」という架空のデザイン事務所サイトを例にします。

サイトを構成するファイル

ファイル名役割・内容
index.htmlトップページ
about.html事務所の紹介
works.html制作実績一覧
contact.htmlお問い合わせフォーム
css/style.css共通デザインのスタイル
img/top.jpgトップ画像

フォルダの配置例

creativestudio
    ├─ index.html
    ├─ about.html
    ├─ works.html
    ├─ contact.html
    ├─ css/
    │   └─ style.css
    └─ img/
        └─ top.png

1.2. 共通デザインの作成

　全ページで共通して使うデザイン（ヘッダ、ナビゲーション、フッタなど）は共通CSSで一括管理します。レスポンシブデザインにも対応し、スマートフォン・パソコンどちらでもレイアウトが崩れないよう工夫します。

２．トップページのサンプルと解説

2.1. サンプルHTML（index.html）

ファイル名： index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Creative Studio Leaf | トップページ</title>
  <meta name="description" content="東京のデザイン事務所 Creative Studio Leafの公式サイトです。">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/style.css" rel="stylesheet">
  <!-- OGP・Webフォント等の例も適宜追加可 -->
  <!-- Google Fontsからフォントを読み込み -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
</head>
<body>
  <header>
    <h1>Creative Studio Leaf</h1>
    <nav id="menu">
      <ul>
        <li><a href="index.html">ホーム</a></li>
        <li><a href="about.html">事務所紹介</a></li>
        <li><a href="works.html">制作実績</a></li>
        <li><a href="contact.html">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <div id="contents">
      <img src="img/top.png" alt="トップイメージ" class="topimg">
      <h2>お知らせ</h2>
      <article>
        <section>
          <h3>2025.06.01</h3>
          <p>新しいプロジェクト実績を公開しました。</p>
        </section>
        <section>
          <h3>2025.05.20</h3>
          <p>ホームページをリニューアルしました。</p>
        </section>
      </article>
    </div>
  </main>
  <footer>
    <small>© Creative Studio Leaf</small>
  </footer>
</body>
</html>

2.2. 共通CSS（css/style.css）

ファイル名： style.css

@charset "utf-8";

/* 共通設定 */
body {
  font-family: 'Noto Sans JP', sans-serif;
  margin: 0;
  background: #fff;
  color: #222;
}

header {
  background: #237874;
  color: #fff;
  text-align: center;
  padding: 1.5em 0 1em 0;
}

header h1 {
  margin: 0 0 0.6em;
  font-size: 2.2em;
  letter-spacing: 0.07em;
}

#menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#menu ul li {
  margin: 0 0.5em;
}

#menu ul li a {
  color: #fff;
  text-decoration: none;
  padding: 0.7em 1.2em;
  display: block;
  border-radius: 4px;
  font-weight: bold;
  transition: background 0.2s;
}

#menu ul li a:hover {
  background: #166b67;
}

/* メインイメージ */
.topimg {
  width: 100%;
  max-width: 800px;
  display: block;
  margin: 1em auto;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(30, 80, 80, 0.08);
}

#contents {
  max-width: 820px;
  margin: 0 auto;
  padding: 1.5em 1em;
  background: #f9fbf7;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(70,110,100,0.07);
}

h2 {
  font-size: 1.6em;
  color: #237874;
  margin-top: 0.5em;
  border-left: 7px solid #7accb2;
  padding-left: 0.5em;
  font-weight: bold;
}

h3 {
  font-size: 1.2em;
  margin-top: 1.6em;
  color: #166b67;
}

/* テーブル */
.tbl {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1.8em;
  background: #fff;
  box-shadow: 0 2px 6px rgba(30,60,60,0.04);
}

.tbl caption {
  font-weight: bold;
  font-size: 1.07em;
  padding: 10px 5px;
  background: #237874;
  color: #fff;
  border-radius: 6px 6px 0 0;
}

.tbl th, .tbl td {
  border: 1px solid #d0dedb;
  padding: 10px 8px;
  text-align: left;
}

.tbl th {
  width: 28%;
  background: #ecf7f3;
  font-weight: bold;
  text-align: center;
}

.tbl ul {
  margin: 0;
  padding-left: 1.3em;
}

.tbl li {
  margin: 0.2em 0;
}

/* お問い合わせフォーム */
.ws, .wl {
  width: 98%;
  padding: 7px;
  font-size: 1em;
  box-sizing: border-box;
  border: 1px solid #b7d8cf;
  border-radius: 5px;
  background: #fafcfa;
  margin-bottom: 0.4em;
  outline: none;
  transition: border-color 0.2s;
}
.ws:focus, .wl:focus {
  border-color: #237874;
}

textarea.wl {
  min-height: 120px;
  resize: vertical;
}

.button_wrapper {
  text-align: center;
  margin-top: 1.4em;
}

.confirm, .confirm:visited {
  background: #237874;
  border: none;
  color: #fff;
  padding: 0.7em 2.3em;
  font-size: 1em;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.2s;
  cursor: pointer;
}

.confirm:hover {
  background: #166b67;
}

/* フッタ */
footer {
  background: #237874;
  color: #fff;
  text-align: center;
  padding: 1em 0;
  margin-top: 2em;
  font-size: 0.96em;
}

/* レスポンシブデザイン */
@media screen and (max-width: 700px) {
  #contents {
    padding: 0.8em 0.2em;
    border-radius: 0;
    box-shadow: none;
  }
  .topimg {
    max-width: 100%;
    border-radius: 0;
  }
  #menu ul {
    flex-direction: column;
  }
  #menu ul li {
    margin: 0.2em 0;
  }
}

2.3. about.html（事務所紹介）

ファイル名： about.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Creative Studio Leaf | 事務所紹介</title>
  <meta name="description" content="Creative Studio Leafの事務所紹介ページです。">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/style.css" rel="stylesheet">
</head>
<body>
  <header>
    <h1>Creative Studio Leaf</h1>
    <nav id="menu">
      <ul>
        <li><a href="index.html">ホーム</a></li>
        <li><a href="about.html">事務所紹介</a></li>
        <li><a href="works.html">制作実績</a></li>
        <li><a href="contact.html">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <div id="contents">
      <h2>事務所について</h2>
      <section>
        <p>
          Creative Studio Leafは、東京都内を拠点とするWebデザイン＆クリエイティブ事務所です。<br>
          クライアントとともに課題解決へ向けたデザイン提案やシステム構築を行っています。<br>
          小規模なホームページ制作からブランド戦略まで、お気軽にご相談ください。
        </p>
      </section>
      <h3>概要</h3>
      <table class="tbl">
        <caption>事務所情報</caption>
        <tr><th>名称</th><td>Creative Studio Leaf</td></tr>
        <tr><th>代表</th><td>高橋 葵</td></tr>
        <tr><th>所在地</th><td>東京都渋谷区青山1-2-3</td></tr>
        <tr><th>設立</th><td>2018年5月</td></tr>
        <tr><th>事業内容</th>
          <td>
            <ul>
              <li>Webサイト制作・運営</li>
              <li>グラフィックデザイン</li>
              <li>UI/UXコンサルティング</li>
              <li>写真撮影・動画編集</li>
            </ul>
          </td>
        </tr>
      </table>
    </div>
  </main>
  <footer>
    <small>© Creative Studio Leaf</small>
  </footer>
</body>
</html>

2.4. works.html（制作実績）

ファイル名： works.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Creative Studio Leaf | 制作実績</title>
  <meta name="description" content="Creative Studio Leafが手掛けた制作実績一覧です。">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/style.css" rel="stylesheet">
</head>
<body>
  <header>
    <h1>Creative Studio Leaf</h1>
    <nav id="menu">
      <ul>
        <li><a href="index.html">ホーム</a></li>
        <li><a href="about.html">事務所紹介</a></li>
        <li><a href="works.html">制作実績</a></li>
        <li><a href="contact.html">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <div id="contents">
      <h2>制作実績</h2>
      <section>
        <h3>Webサイト制作</h3>
        <ul>
          <li>カフェ「Leaf Cafe」公式サイト（2024年）</li>
          <li>建築設計事務所「AO Studio」コーポレートサイト（2023年）</li>
          <li>アパレルブランド「Sunny Wear」オンラインショップ（2022年）</li>
        </ul>
      </section>
      <section>
        <h3>グラフィック・写真・動画</h3>
        <ul>
          <li>雑誌広告「Monthly Design」表紙デザイン（2024年）</li>
          <li>イベントプロモーション動画制作（2023年）</li>
          <li>飲食店向けメニュー写真撮影（2022年）</li>
        </ul>
      </section>
      <p>その他の実績についてはお問い合わせください。</p>
    </div>
  </main>
  <footer>
    <small>© Creative Studio Leaf</small>
  </footer>
</body>
</html>

2.5 contact.html（お問い合わせ）

ファイル名：contact.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Creative Studio Leaf | お問い合わせ</title>
  <meta name="description" content="Creative Studio Leafへのお問い合わせページです。">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/style.css" rel="stylesheet">
</head>
<body>
  <header>
    <h1>Creative Studio Leaf</h1>
    <nav id="menu">
      <ul>
        <li><a href="index.html">ホーム</a></li>
        <li><a href="about.html">事務所紹介</a></li>
        <li><a href="works.html">制作実績</a></li>
        <li><a href="contact.html">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <div id="contents">
      <h2>お問い合わせ</h2>
      <form action="#" method="post">
        <table class="tbl">
          <caption>ご相談・ご依頼はこちらのフォームよりご連絡ください</caption>
          <tr>
            <th>お名前</th>
            <td><input type="text" name="name" class="ws" placeholder="例）佐藤花子"></td>
          </tr>
          <tr>
            <th>メールアドレス</th>
            <td><input type="email" name="email" class="ws" placeholder="例）hanako@example.com"></td>
          </tr>
          <tr>
            <th>ご相談内容</th>
            <td><textarea name="message" cols="30" rows="7" class="wl" placeholder="ご相談内容をご記入ください"></textarea></td>
          </tr>
        </table>
        <div class="button_wrapper">
          <button type="submit" class="confirm">送信する</button>
        </div>
      </form>
    </div>
  </main>
  <footer>
    <small>© Creative Studio Leaf</small>
  </footer>
</body>
</html>

表示結果

補足

  • どのファイルもレスポンシブ対応CSS（css/style.css）を使用して統一デザインとなるようになっています。
  • 画像やURL、事務所名・代表名などは例として自由に修正・拡張してお使いください。
  • お問い合わせフォームのaction="#"は実際の運用時にメール送信プログラムなどに変更します。

ご要望に合わせて他ページやデザインの追加例もご案内できます。お気軽にどうぞ！

３．主要タグ・CSS解説

タグ・属性説明・ポイント
<header>, <footer>ヘッダ・フッタのブロック要素
<nav>, <ul>, <li>, <a>ナビゲーションメニュー、リンク構造
<main>, <section>, <article>コンテンツの意味的グループ化
<img>画像挿入（alt属性で説明も必須）
<link rel="stylesheet">外部CSSの読み込み
@media（CSS）レスポンシブ対応のメディアクエリ
font-familyWebフォント指定
max-width, margin: autoレイアウト中央寄せや幅制限

まとめ

　レスポンシブ対応Webサイトの作成は、HTMLとCSSの組み合わせ、そしてディレクトリ構成の整理が基本です。
　本記事の例ではトップページのみを紹介しましたが、各ページも同じ構成・デザインルールで統一することで、運用しやすく・見た目も美しいサイトが完成します。
サイト全体の設計を意識し、共通パーツの再利用やスタイルの一元管理を心がけましょう。