ホーム›初心者向けweb講座›HTMLページ制作の基礎と実践 ― Webサイト構成・meta要素・フォルダ管理・CSS初期設計
初心者向けweb講座

HTMLページ制作の基礎と実践 ― Webサイト構成・meta要素・フォルダ管理・CSS初期設計

更新日：2026-05-04 著者：unigram 読了目安：7分

この記事の要点

WebサイトはヘッダーCSSリセット・フォルダ構成・meta要素など、コーディング前の設計が完成度を左右します。実践的なHTML/CSSページ制作の基礎を体系的に解説します。

はじめに

ここでは、実際のWeb制作現場で必要となる「HTMLページ制作の基礎」を体系的に解説します。Webサイトの基本構成から、フォルダ管理・CSS初期設計・コーディング演習まで、実践的な知識を身につけましょう。

1. Webサイトの基本構成

Webサイトは一般的に以下の4つのパーツで構成されます。

パーツ名役割
ヘッダーロゴ・サイト名を配置。全ページ共通のトップ領域
グローバルナビゲーションサイト全体の主要ページへのリンクメニュー
コンテンツ各ページ固有の主要情報を表示するメイン領域
フッター著作権情報・サブナビ・連絡先などを配置する下部領域

その他、メインビジュアルの設定やファーストビュー（ページを開いてスクロールせず最初に見える領域）でサービス内容・コンセプト・メリットを端的に伝えることも重要です。サイトの目的・デザインコンセプトによってレイアウトは様々ですが、Web制作ではまずレイアウト構成を設計することが大切です。

2. meta要素などのページ情報

<meta>要素とは、そのWebページ自身の「情報（メタデータ）」をブラウザや検索エンジンに伝えるためのタグです。HTMLの<head>内に記述され、ユーザーの画面には直接表示されませんが、ページを正しく動かしたり検索結果での見栄えを向上させるために不可欠な設定です。

主なmeta要素一覧

タグ・要素役割・説明
<meta charset="utf-8">使用文字コードをブラウザに伝える（文字化け防止）
<meta name="keywords">ページの重要キーワードをカンマ区切りで設定
<meta name="description">検索結果に表示される説明文。SEOに強く影響する
<title>検索結果やタブに表示されるページタイトル。SEOに強く影響する
<link rel="icon">タブなどに表示されるファビコン（小アイコン）の指定
/* html ファイルの <head> 内の記述例 */
<meta charset="utf-8">
<meta name="keywords" content="キーワード,Key word" />
<meta name="description" content="このサイトの説明文が入ります。">

/* ページのタイトル */
<title>実践的なコーディング練習</title>

/* ページのファビコン設定 */
<link rel="icon" href="assets/images/favicon.ico">

その他、SNSでシェアされた際に表示される画像・タイトルを制御する「OGP（Open Graph Protocol）」というmeta要素もあります。昨今のサイト制作ではOGPの記述も必須級の設定項目となっています。

3. フォルダ構成

Webサイトを作成する前に、HTMLファイル・スタイルシート・画像などを管理しやすくするためにフォルダ分けを行います。制作現場では以下のような命名規則と構成が一般的です。

命名規則のポイント

  1. フォルダ・ファイル名は半角英数字＋ハイフン・アンダーバーのみ使用
    日本語ファイル名は文字化けの原因に、スペースはURLエラーの元になります。
    ✅ contact-form.html　❌ お問い合わせ.html　❌ Style Sheet.css
  2. 素材ファイルは assets/ フォルダにまとめる
    HTMLファイルと素材ファイルの区別が明確になります。common/ や static/ という名称も使われます。

標準的なフォルダ構成（ディレクトリマップ）

project-name/（ルートディレクトリ）
├── index.html             ← トップページ
├── about/
│   └── index.html         ← 会社概要など
├── contact/
│   └── index.html         ← お問い合わせなど
├── assets/
│   ├── css/
│   │   ├── reset.css      ← ブラウザリセット用CSS
│   │   └── style.css      ← メインスタイルシート
│   ├── js/
│   │   └── main.js
│   ├── images/
│   │   ├── common/        ← 共通パーツ（ロゴなど）
│   │   ├── top/           ← トップページ専用
│   │   └── about/         ← 下層ページ専用
│   └── fonts/             ← Webフォントファイル
└── favicon.ico

4. 相対パス・絶対パス

フォルダ構成に合わせて、ファイルを正しく参照するための「パス」の書き方を理解しましょう。

種類概要例
相対パス「今いる場所」を基準にして目的ファイルの場所を指定../../assets/css/style.css
絶対パス（フルパス）URLを基準に場所を固定して指定。どこから呼び出しても同じ場所を指すhttps://example.com/assets/css/style.css
絶対パス（ルートパス）ドメインルートを基準に指定/assets/css/style.css

相対パスの記号

記号意味
./同じ階層（省略可能）
../1つ上の階層に上がる

5. CSSの初期設定・基本設計

コーディングを始める前に、サイト全体の土台となるCSS設定を整えることが重要です。以下の順番で設計するのが一般的です。

① ブラウザ固有のスタイルをリセットする

HTMLタグにはOS・ブラウザごとに初期値（margin・padding・フォントサイズなど）が設定されているため、そのままスタイルシートを制作すると意図しない余白やサイズ差が生じます。reset.cssを作成して読み込むことで、ブラウザ間の差異を統一します。

/* style.css */
/* 最初にリセット用CSSをインクルードする */
@import "reset.css";   /* ← 必ず一番上に記述する */

/* 自作スタイルシートここから */

② 基本フォント・カラー・行間を設定する

プロパティ推奨値・ポイント
font-size16px が標準。15〜18px 程度もよく使われる
color（文字色）真っ黒（#000）より少しグレーがかった #333 や #444 が目に優しく推奨
line-height（行間）1.5〜1.8 が「読みやすい」とされている

③ 背景色を決める

背景色印象・特徴
白（#fff）清潔感・信頼感。幅広いサイトで使われる
オフホワイト（淡いグレー）柔らかい雰囲気。長時間見ても疲れにくい
ダークモードモダン・高級感のある演出に向いている

④ コンテンツ幅を決める

モニターがどれだけ大きくても、文章が端から端まで伸びきると非常に読みにくくなります。PC向けのコンテンツ幅は 1000px〜1200px が一般的です。

⑤ フォントを指定する

OS間の表示差異を埋めるため、複数のフォント候補を記述するのが一般的です。

font-family: "Helvetica Neue", Arial,"Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,sans-serif;

デバイスにフォントがない場合に備えて予備フォントを複数指定します。またWebフォント（Google Fontsなど）を利用すれば、ユーザーのPCにフォントが入っていなくても制作者の意図した書体で表示できます。

6. 演習：実践的なコーディング練習

以下の手順でフォルダ構成とファイルを準備し、参考デザインをHTML/CSSでコーディングしてみましょう。

  1. ルートディレクトリ（public_html/）を作成する
  2. public_html/ 直下に index.html と assets/ ディレクトリを作成する
  3. assets/ の中に css/・images/ ディレクトリを作成する
  4. css/ の中にリセット用CSS（reset.css）とレイアウト用CSS（style.css）を作成する

index.html の <head> 記述例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="keywords" content="キーワード,Key word" />
  <meta name="description" content="このサイトの説明文が入ります。">
  <title>実践的なコーディング練習</title>
  <link rel="icon" href="assets/images/favicon.ico">
  <link rel="stylesheet" media="all" type="text/css" href="assets/css/style.css" />
</head>
<body>
  <!-- コンテンツをここに記述 -->
</body>
</html>

style.css の初期設定例

/* 最初にリセット用CSSをインクルードする */
@import "reset.css";

/* 基本スタイル */
body {
  font-size: 16px;
  font-family: Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               Meiryo, sans-serif;
  color: #333;
  line-height: 1.7;
  background-color: #fff;
}

/* コンテンツ幅の設定 */
.wrapper {
  max-width: 1200px;
  padding: 0 5%;
  margin: 0 auto;
}

このフォルダ構成とreset.cssは、Webサイト制作の際に必ず土台となります。

まとめ

この記事では、HTMLページ制作の基礎として以下の内容を解説しました。

テーマポイント
Webサイトの基本構成ヘッダー・ナビ・コンテンツ・フッターの4構成が基本
meta要素charset・description・titleはSEO・表示に必須。OGPも要対応
フォルダ構成半角英数字で命名し、素材はassets/にまとめる
パス指定相対パス（./・../）と絶対パスの違いを理解して使い分ける
CSS初期設計reset.css → フォント・色・行間 → 背景色 → コンテンツ幅の順で設計

Webサイト制作では、コーディングを始める前の「構成設計と初期設定」が完成度を大きく左右します。ここで紹介したフォルダ構成やCSS初期設計を土台にして、実践的なコーディングに取り組んでみてください。

#HTML・CSS

この記事を書いた人

unigram
web、印刷、映像などの制作をしています。@京都、フリーランス18年目。 大学で講師もしています。 自身の備忘録も兼ねて、Web制作・WordPress・SEO・GA4・生成AI活用をテーマに情報発信しています。わかりやすく優しい内容で記事作成を心がけています。

関連記事

あわせて読みたい記事