HTML・CSSでホームページを作成する方法

HTML・CSSで作るホームページでは、ページの内容と構造をHTML、見た目をCSSで記述します。必要に応じてJavaScriptで動きや操作を追加し、画像などのファイルと一緒にサーバーへ置きます。

基本的な関係は次のとおりです。

要素	主な役割	例
HTML	内容と構造を示す	見出し、段落、画像、リンク、表、フォーム
CSS	表示とレイアウトを整える	色、文字、余白、幅、並び方、画面幅への対応
JavaScript	操作や動的な処理を追加する	メニュー開閉、タブ、入力確認、データ取得
画像・動画など	内容を視覚的に伝える	写真、ロゴ、図版、動画
サーバー	ファイルを保存して配信する	レンタルサーバー、静的サイトの公開サービス
ドメイン	公開サイトのURLになる	example.com

HTML・CSSのファイルだけで構成され、アクセス時に完成済みのファイルを配信するサイトは、一般に静的サイトと呼ばれます。ページごとにHTMLファイルを作成し、変更時は元ファイルを編集して再アップロードするのが基本です。

WordPressのようなCMSは、管理画面へ入力した文章や設定をデータベースへ保存し、ページを出力します。HTML・CSSでの作成は、管理画面を使わず、表示されるファイルを直接管理する点が大きな違いです。

コードで作る場合も、先に目的、必要ページ、文章、画像を決める必要があります。HTMLを入力し始めることは制作工程の一部であり、サイト構成や内容まで自動的に決まるわけではありません。

最小構成なら、パソコン、コードエディター、ブラウザーがあれば制作を始められます。インターネット上へ正式公開する段階で、サーバーと必要に応じて独自ドメインを用意します。

段階	必要なもの	用途
設計	ページ一覧、文章、画像	何を作るか決める
制作	パソコン、コードエディター	ファイルを作成・編集する
確認	複数のブラウザー、開発者ツール	表示、エラー、画面幅を確認する
公開	サーバー、アップロード方法	ファイルをインターネットへ置く
URL	独自ドメイン	長く使うサイトのURLにする
安全性	SSL、バックアップ	通信とデータを守る

最初は、HTML、CSS、画像を分けて管理します。必要になった段階でJavaScriptを追加します。

小規模サイトのファイル構成例は次のとおりです。

my-site/
├── index.html
├── about.html
├── service.html
├── css/
│   └── style.css
├── images/
│   ├── main-visual.jpg
│   └── logo.svg
└── js/
    └── script.js

index.htmlは、フォルダーの先頭ページとして表示されることが多いファイル名です。ほかのファイル名やフォルダー名は、半角英数字とハイフンなどで、内容が分かる短い名前にします。

HTML・CSSでホームページを作る基本手順は次のとおりです。

1. 目的、対象者、必要ページを決める
   誰に何を伝え、どの行動につなげるかを決めます。トップ、サービス、料金、運営者情報など必要なページを一覧にします。

2. 文章・画像・ページ構成を用意する
   コードを書く前に、各ページの見出し、本文、画像、メニューの順番を決めます。紙やデザインツールで簡単なワイヤーフレームを作っても構いません。

3. 制作フォルダーとファイルを作る
   HTML、CSS、画像、JavaScriptを分け、決めた命名規則で保存します。元画像や資料は公開フォルダーと別に管理します。

4. 共通するHTML構造を作る
   head内の基本情報、ヘッダー、ナビゲーション、メイン、フッターを作ります。ページごとにtitle、説明文、H1、本文を変更します。

5. CSSで基本デザインを整える
   文字、色、余白、幅、リンク、ボタンなどの共通ルールから作ります。装飾より先に、文章が読みやすく情報の順序が分かる状態を目指します。

6. 画面幅に合わせて調整する
   固定幅だけにせず、スマートフォンからパソコンまで内容が読めるようにします。画像、表、メニュー、複数列が画面からはみ出さないか確認します。

7. 必要な動作だけ追加する
   JavaScriptや外部サービスを使う場合は、動作しないときにも重要情報へアクセスできるか確認します。フォームは送信・通知・エラーまでテストします。

8. ローカル環境で確認する
   リンク、画像、見出し、誤字、ブラウザー差、キーボード操作、画面幅を確認します。開発者ツールのエラーも確認します。

9. サーバーとドメインを準備する
   公開環境を契約し、独自ドメインとSSLを設定します。正式URLと公開フォルダーを確認します。

10. ファイルをアップロードして公開する
    ファイルマネージャー、SFTP、FTPSなどで、フォルダー構造を保ったままアップロードします。公開URLで表示と機能を再確認します。

11. バックアップと更新方法を決める
    制作元ファイル、公開版、画像、接続情報を安全に管理します。更新前後の版を残し、誰がどのファイルを変更するか決めます。

最初は1ページを完成させ、共通部分と命名ルールを確認してからページを増やすと、同じ修正を繰り返しにくくなります。

レスポンシブWebデザインは、同じHTMLを基本に、画面の幅や端末の特性に合わせてレイアウトを調整する考え方です。スマートフォン専用ページを別に作ることと同じではありません。

初心者は次の基本から確認します。

1. viewportを設定する
   HTMLのheadにviewportのmeta要素を入れ、端末幅に合う表示の基準を作ります。

2. 固定幅だけにしない
   横幅を常に1,000pxなどへ固定すると、小さな画面からはみ出します。%、max-width、min()などを用途に応じて使います。

3. 画像を親要素より大きくしない
   max-width: 100%とheight: autoを基本にし、縦横比を保ちます。

4. Flexbox・Gridで並びを調整する
   横並びの要素を、画面幅に応じて折り返す、または縦並びへ変更します。

5. メディアクエリーを必要な箇所で使う
   デザインが崩れる幅を基準に、列数、余白、文字サイズ、メニューなどを調整します。特定機種の画面幅だけを基準にしません。

6. タップとキーボード操作を確認する
   ボタンを十分な大きさにし、リンク同士を近づけすぎず、キーボードでも操作できるようにします。

開発者ツールの端末表示は便利ですが、実機と完全に同じではありません。iPhone、Android、パソコンなど、可能な範囲で実際の端末とブラウザーを確認します。

ここでは制作時の概要にとどめ、設計と確認方法はホームページのスマホ・レスポンシブ対応で詳しく扱います。

HTML・CSSで作る方法は、表示内容を直接管理できる一方、制作と更新をコードで行う知識が必要です。

メリット	デメリット・注意点
必要な構造とデザインを細かく指定できる	HTML・CSSとファイル管理の学習が必要
不要な機能を減らし、構成を小さくできる	ページ追加や共通部分の変更に手作業が増える
特定CMSのテーマや管理画面に依存しにくい	管理画面がなく、更新担当者がコードを扱う必要がある
静的ページは構成が単純で表示を軽くしやすい	軽さは画像・外部スクリプト・コード品質にも左右される
データベースやCMSを使わない構成も選べる	フォーム、検索、予約などは別の仕組みが必要
制作元ファイルを手元で管理できる	アップロードや上書きのミスで公開版を壊すことがある
Web制作の仕組みを理解しやすい	ブラウザー差、アクセシビリティ、安全性まで確認が必要

数ページのサイトで更新頻度が低く、必要機能が明確なら、静的なHTML・CSSは管理しやすい方法です。反対に、ページが多く、複数人が頻繁に更新するサイトでは、共通部分の修正や公開管理が負担になります。

「コードで作れば必ずSEOに強い」「WordPressより必ず速い」とは限りません。検索意図に合う内容、HTML構造、内部リンク、表示速度、スマートフォン対応などを適切に整える必要があります。

HTML・CSSの初期トラブルは、難しいプログラムより、ファイル名や読み込み先の違いで起きることが多くあります。

症状	主な確認点
ページが表示されない	index.htmlがあるかどうか、公開フォルダー、URL、アップロード先
CSSが反映されない	linkのパス、ファイル名、拡張子、キャッシュ、記述エラー
画像が出ない	srcのパス、大文字・小文字、ファイル名、アップロード漏れ
リンク先が404になる	href、相対パス、階層、URL末尾、ファイルの場所
日本語が文字化けする	UTF-8保存、meta charset、サーバー設定
スマホで横にはみ出す	固定幅、画像、表、長い文字列、viewport
パソコンでは動くが公開先で動かない	大文字・小文字、絶対・相対パス、サーバー仕様
修正したのに変わらない	ブラウザーや配信側のキャッシュ、別ファイルの編集

WindowsやmacOSのローカル環境では同じものとして扱われたファイル名でも、公開サーバーでは大文字・小文字を区別する場合があります。Main.jpgとmain.jpgを混在させないよう、命名規則を統一します。

相対パスは、現在のHTMLファイルから見たCSSや画像の場所を示します。ページの階層を変更すると読み込み先も変わるため、フォルダー構成とパスの関係を理解する必要があります。

また、サンプルコードを継ぎ足し続けると、同じ要素に異なるCSSが重なり、どこを直すべきか分からなくなります。問題が起きたら、直前の変更を戻し、小さな範囲へ分けて確認します。

ローカルで完成した後、公開前チェックを行い、サーバーへアップロードします。

内容とHTML

• ページごとにtitle、meta description、H1が内容と一致している
• H1、H2、H3の階層が意味に沿っている
• 会社名、住所、料金、営業時間などの事実が正しい
• 仮の文章、サンプル画像、空リンクが残っていない
• 画像の代替テキストと使用権を確認した
• 言語、文字コード、viewportを設定した

表示と操作

• Chrome、Safari、Firefox、Edgeなどで主要ページを確認した
• スマートフォン、タブレット、パソコンで崩れない
• キーボードでメニュー、リンク、フォームを操作できる
• 文字と背景のコントラストが読みやすい
• 画像、動画、外部フォントが重すぎない
• JavaScriptが動かない場合も重要情報へアクセスできる

リンクと機能

• メニュー、内部リンク、外部リンクが正しい
• 電話、地図、メール、SNSのリンクを実際に試した
• 404ページと存在しないURLの動作を確認した
• フォームの入力、送信、通知、完了画面を確認した
• APIキーやパスワードを公開ファイルへ書いていない

公開環境

• 正式な公開フォルダーを確認した
• 独自ドメインが正しいサーバーへ接続されている
• SSLを設定し、https://で警告なく表示できる
• http://や別URLから正式URLへ必要な転送がある
• 検索させないテストファイルやバックアップを公開していない
• アクセス解析とSearch Consoleの確認方法を決めた

アップロード前に、公開中ファイルをバックアップします。フォルダー全体を無条件に上書きせず、追加・変更・削除するファイルを確認します。

アップロード後は、パソコン内のファイルではなく、https://で始まる公開URLを開いて確認します。シークレットウィンドウや別端末を使い、ログイン情報やキャッシュがない状態でも表示できるか確認しておきましょう。

静的サイトはWordPressのような管理画面を持たないため攻撃対象を減らせる場合がありますが、自動的に安全になるわけではありません。サーバーアカウント、転送用認証情報、フォーム、JavaScript、外部サービス、公開ファイルを管理する必要があります。ホームページのセキュリティ・SSL対策もあわせてご覧ください。

HTML・CSSで作り始めても、運用条件が変わればCMSやノーコードへ切り替えて構いません。次の項目が増えたときは、管理方法を再検討します。

• 更新担当者がHTMLを編集できない
• お知らせや事例を頻繁に追加する
• ページ数が増え、ヘッダー・フッターの共通修正が負担になる
• 複数人で下書き、確認、公開を分担したい
• 画像やファイルを管理画面から整理したい
• フォーム、予約、商品、会員などを管理したい
• 公開履歴、権限、予約公開、復元が必要
• コードの保守担当者を確保できない

判断の目安は、初期制作の簡単さだけではなく、公開後に誰がどの頻度で変更するかです。

状況	検討しやすい方法
数ページで更新が少なく、コードを管理できる	HTML・CSSの静的サイト
お知らせ・事例・固定ページを自分で増やす	WordPressなどのCMS
サーバー保守を減らし、用意された範囲で作る	クラウド型ノーコード
見本・試作品を短時間で共有する	ノーコードやデザインツール
独自機能や複雑な連携がある	要件に合うシステム開発・専門家への相談

既存のHTMLサイトをCMSへ移す場合、デザインだけでなく、URL、title、本文、画像、内部リンク、転送、フォーム、解析設定を引き継ぎます。URLが変わるページには適切なリダイレクトが必要です。

自作方法全体の比較は自分でホームページを作成する方法、CMSとの違いはCMS・ノーコードでホームページを作る方法で解説します。

HTMLとCSSだけでホームページは作れますか

文章、画像、リンクを中心とする案内サイトなら作れます。メニューの開閉などにJavaScriptを使う場合があります。問い合わせ送信、予約、会員、検索などには、サーバー側の処理や外部サービス、CMSなどが必要です。