はじめてのWeb制作入門：HTMLとCSSで1ページ完成させる手順

Web制作は、文章や色、余白を少しずつ調整し、画面上の変化を楽しみたい人に向いている趣味です。すでにパソコンがあれば、最初の費用はほぼ0円。特別な資格も高性能な機材も必要ありません。

最初から本格的なサイトを目指す必要はありません。自己紹介を載せた1ページを作り、ブラウザーで表示できれば、最初の目標は達成です。

この記事で分かることは次のとおりです。

• Web制作が向いている人、向いていない人
• 最低限必要な道具と初期費用
• HTMLとCSSの役割
• 自己紹介ページを完成させる具体的な手順
• 初心者が止まりやすいポイントと解決方法
• 公開するときに確認したい安全面と権利関係

結論：パソコンとブラウザーがあれば、今日から無料で始められる

Web制作の最小構成は、パソコン、ブラウザー、コードエディターの3つです。コードエディターには無料のものがあり、作ったページはインターネットへ公開しなくても自分のパソコン内で確認できます。

最初の一歩は、次の流れで十分です。

1. 作業用フォルダーを1つ作る
2. index.htmlとstyle.cssを用意する
3. HTMLで見出しと文章を書く
4. CSSで色や余白を整える
5. index.htmlをブラウザーで開く

MDNの初心者向け入門モジュールも、前提知識のない人を対象に、環境設定から簡単なWebサイトの作成へ進む構成です。最初はHTMLとCSSに絞り、JavaScriptやサーバーの学習は後回しにすると迷いにくくなります。

向いている人

• 配色や文字の配置を試すのが好き
• 小さな修正を積み重ねる作業が苦にならない
• 作ったものを画面ですぐ確認したい
• 自分の紹介、作品、記録を載せるページを作りたい
• 分からないことを一つずつ調べる過程も楽しめる

始める前に知っておきたいこと

HTMLとCSSは役割が異なります。

• HTML：見出し、段落、画像、リンクなど、ページの内容と構造を作る
• CSS：文字色、背景色、余白、幅、配置など、見た目を整える

HTMLだけでもページは表示されます。先に内容を作り、その後でCSSを加える順番にすると、問題が起きた場所を見つけやすくなります。

Web制作は「書く・整える・確かめる」を楽しむ趣味

Web制作の面白さは、入力したコードの結果をブラウザーですぐ見られる点にあります。文章を一行変え、保存して再読み込みする。その短いサイクルだけでも作品が少しずつ育ちます。

趣味として始める段階では、一人で屋内作業をする形が中心です。ただし、完成したページを家族や友人に見せたり、学習コミュニティで質問したりする楽しみもあります。

最初の作品には自己紹介ページが向いている

自己紹介ページなら、必要な要素を小さくまとめられます。

• 名前やニックネームを示す見出し
• 好きなことを説明する短い文章
• 趣味や目標を並べたリスト
• 参考にしているサイトへのリンク

題材を考える負担が少なく、HTMLの見出し、段落、リスト、リンクを一度に練習できます。画像はファイル管理や権利確認が増えるため、最初の完成後に追加しても遅くありません。

初期費用は0円から。公開費用は後で考えればよい

手元にパソコンがあるなら、ローカル環境での制作と練習には基本的に追加費用がかかりません。スマートフォンだけでもオンライン編集環境は使えますが、複数ファイルの管理や細かな入力を考えると、パソコンのほうが続けやすいでしょう。

最初の1ページを作る段階では、ドメインや有料サーバーを契約する必要はありません。公開は「作品を人に見せたい」と思ってから検討すれば十分です。

最低限必要なものは3つだけ

最初は道具を増やさず、ファイルを作って表示できる環境を整えます。

必須のもの

• パソコン：Windows、macOS、Linuxのいずれでも始められる
• Webブラウザー：作ったページを表示し、動作を確認する
• コードエディター：HTMLとCSSを入力・保存する

エディター選びで迷うなら、無料でWindows、macOS、Linuxに対応するVisual Studio Codeが候補になります。ただし、最初から拡張機能を大量に追加する必要はありません。文字入力、保存、フォルダー表示ができれば足ります。

あると便利なもの

• 画面幅を変えて表示を確認できるブラウザーの開発者ツール
• 作るページの内容を書き出すメモ
• エラーや疑問を記録するノート
• 目に負担をかけない作業環境と休憩用タイマー

後から追加すればよいもの

• JavaScript
• GitやGitHub
• CSSフレームワーク
• Webフォント
• 独自ドメイン
• 有料サーバー
• デザインツール

これらは便利ですが、最初のページ完成には不要です。準備だけで疲れないよう、必要になった時点で一つずつ加えます。

HTMLとCSSで最初のページを作る方法

ここからは、自己紹介ページを実際に作ります。作業用フォルダーの中に2つのファイルを置き、ブラウザーで表示するところまで進めます。

1. 作業用フォルダーを作る

デスクトップや書類フォルダーなど、見つけやすい場所にmy-first-pageというフォルダーを作ります。その中に次の2ファイルを作成してください。

my-first-page/
├── index.html
└── style.css

ファイル名は半角英数字にします。Windowsでは拡張子が非表示になり、index.html.txtになってしまうことがあるため、エディター上でも名前を確認しましょう。

2. HTMLでページの骨組みを作る

index.htmlに次のコードを入力します。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>わたしのプロフィール</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="profile">
    <h1>わたしのプロフィール</h1>

    <p>Web制作を始めました。少しずつ作れるものを増やしていきます。</p>

    <h2>好きなこと</h2>
    <ul>
      <li>音楽を聴くこと</li>
      <li>散歩をすること</li>
      <li>写真を見ること</li>
    </ul>

    <p><a href="https://developer.mozilla.org/ja/">Web制作の参考資料を見る</a></p>
  </main>
</body>
</html>

<h1>はページの主見出し、<p>は段落、<ul>と<li>は箇条書き、<a>はリンクです。HTMLは見た目を直接指定するものではなく、「これは見出し」「これは段落」という役割を示します。

MDNのHTML入門では、charset、viewport、title、bodyなど、最初の文書を構成する要素の役割も確認できます。コードを暗記するより、分からない要素を調べて使う習慣をつけるほうが実践的です。

3. CSSで見た目を整える

次に、style.cssへ以下を入力します。

body {
  margin: 0;
  padding: 24px;
  background: #f3f6f8;
  color: #263238;
  font-family: system-ui, sans-serif;
  line-height: 1.7;
}

.profile {
  max-width: 680px;
  margin: 40px auto;
  padding: 32px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

h1 {
  color: #176b87;
}

a {
  color: #176b87;
}

@media (max-width: 600px) {
  body {
    padding: 12px;
  }

  .profile {
    margin: 16px auto;
    padding: 20px;
  }
}

このCSSは、背景色、文字色、余白、本文の最大幅などを指定しています。最後の@media部分では、画面幅が狭いときに余白を小さくしています。

4. ブラウザーで表示する

両方のファイルを保存し、index.htmlをダブルクリックします。ブラウザーに自己紹介ページが表示されれば成功です。

表示後は、次の小さな変更を一つずつ試してみましょう。

• h1のcolorを別の色にする
• 自己紹介文を書き換える
• 好きなことを1項目追加する
• .profileのmax-widthを変える
• ウィンドウを狭くし、スマートフォンに近い幅で確認する

一度に複数箇所を変えないことが大切です。一つ変更して保存し、ブラウザーを再読み込みすると、どのコードが何を変えたのか理解しやすくなります。

5. 完成の基準を決める

最初の作品は、次の条件を満たせば完成とします。

• 見出し、文章、リスト、リンクが表示される
• CSSが反映され、背景色や余白が変わる
• ウィンドウを狭くしても横にはみ出さない
• リンクをクリックし、意図したページへ移動できる
• 誤字を直し、最後にもう一度保存した

機能を増やし続けると、完成する前に難しい問題へ入り込んでしまいます。「小さく完成させる」「次のページで一つ新しい要素を試す」と区切るほうが、成果を積み重ねられます。

初心者が挫折しやすい5つのポイント

Web制作では、コードの難しさよりも、問題の場所が分からないことが負担になりがちです。よくある原因を先に知っておけば、止まっても戻れます。

画面が変わらない

まず、ファイルを保存したか、ブラウザーを再読み込みしたかを確認します。それでも変わらなければ、HTML内のhref="style.css"とCSSのファイル名が一致しているかを見ます。

確認する順番を固定すると、慌てずに済みます。

1. 保存したか
2. 再読み込みしたか
3. ファイル名と保存場所は正しいか
4. 記号やスペルが抜けていないか
5. 直前の変更を元に戻すと直るか

タグや波括弧を閉じ忘れる

HTMLの終了タグ、CSSの波括弧}、行末のセミコロン;などが欠けると、意図しない表示になります。入力ミスは誰にでも起こるので、能力の問題ではありません。

完成後は、無料のW3C Markup Validation ServiceでHTMLを検査できます。ただし、検査でエラーがなくても、読みやすさや使いやすさまで保証されるわけではありません。ブラウザーでの確認も必要です。

教材を読むだけで手が止まる

読む時間と作る時間を分けます。例えば、20分学んだら10分だけ自分のページを書き換える方法です。

練習課題も小さくします。

• 今日は見出しを作る
• 次はリストを追加する
• その次に色を変える

知識を網羅してから制作を始める必要はありません。必要になった要素を調べ、ページへ加える流れそのものが学習になります。

最初から理想のデザインを目指す

頭の中の完成像と、最初に作れるものには差があります。そこで、完成度を段階に分けます。

• 第1段階：文章が表示される
• 第2段階：色と余白を整える
• 第3段階：狭い画面でも読めるようにする
• 第4段階：画像や別ページを加える

最初の3段階だけでも、立派な作品です。

次に何を学べばよいか迷う

最初のページができたら、現在の作品に必要な順で学びます。画像を載せたいならimg要素、横並びにしたいならFlexbox、動くボタンを作りたい段階でJavaScriptへ進みます。

「有名だから」ではなく、「いま作りたいものに必要だから」という基準で選ぶと、本筋を見失いません。

始め方を比較すると、ローカル制作が最も基礎をつかみやすい

環境の選択肢は複数あります。手軽さだけならブラウザー上の編集環境が優れますが、ファイル同士の関係まで覚えるなら、自分のパソコンにフォルダーを作る方法が向いています。

迷った場合は、この記事のようにローカルで1ページ完成させてから、公開方法を学ぶ順番がおすすめです。制作上の問題と公開設定の問題を分けて考えられます。

続けるコツは「週1作品」より「週1変更」

毎週新しいサイトを完成させようとすると、内容を考えるだけで負担になります。同じページを少しずつ育てるほうが続けやすく、以前のコードとの違いも見えます。

15〜30分で終わる課題を作る

例えば、1回の作業を次のどれか一つに限定します。

• 配色を1組変える
• リストを追加する
• 文字と背景の見やすさを確認する
• スマートフォン幅の余白を調整する
• 新しいページを1枚作り、リンクでつなぐ

時間切れになったら、次に試す内容を1行メモして終了します。再開地点が明確なら、間が空いても戻りやすくなります。

完成画像より変更履歴を残す

作業日ごとにフォルダーを複製したり、変更内容をメモしたりすると、上達を具体的に確認できます。Gitは履歴管理に便利ですが、操作を覚える負担もあるため、最初のページ完成後に学べば十分です。

独学で止まったら質問できる形にする

質問するときは、「動きません」だけでなく、次の情報を整理します。

• 何を表示したかったか
• 実際に何が起きたか
• 関係するHTMLとCSS
• すでに試したこと
• エラーメッセージがあれば、その正確な内容

問題を小さく切り出す作業は、そのまま原因を見つける練習になります。

安全・公開・アクセシビリティで確認すること

ローカルで自作ページを表示するだけならリスクは限定的です。ただし、外部のコードや画像を使うとき、ページを公開するときには確認事項が増えます。

外部から入手したコードを無条件で実行しない

見知らぬサイトからダウンロードしたプログラムや、意味の分からないコマンドをそのまま実行しないでください。エディターの拡張機能も、提供元、権限、更新状況を確認し、必要なものだけ導入します。

公開用のファイルには、次の情報を書かないようにします。

• 本名と住所、電話番号
• 学校や勤務先を特定できる詳細
• パスワードやAPIキー
• 非公開サービスへのログイン情報
• 写真に含まれる位置情報や個人情報

公開サービスでは、リポジトリーやページが誰から見えるのかも確認します。無料枠、容量、公開範囲、利用規約は変更されることがあるため、利用時点の公式案内を参照してください。MDNの公開ガイドでは、ホスティング、ドメイン、オンライン編集環境などの基本的な選択肢を確認できます。

画像・文章・フォントの権利を確認する

インターネット上で見つけた画像や文章を、自由に自分のサイトへ掲載できるとは限りません。自作素材を使うか、利用条件が明記された素材を選び、必要なクレジット表示や利用範囲を確認します。

フォント、アイコン、テンプレートにもライセンスがあります。「無料」という表示だけで判断せず、Webサイトでの使用や再配布が認められているかを確認しましょう。

誰かが読めるページにする

見た目だけでなく、内容の役割に合ったHTMLを使います。W3Cのページ構造チュートリアルでは、論理的な見出しや意味のある要素で構造化すると、スクリーンリーダー利用者やキーボード利用者を含む多くの人がページ内を移動しやすくなると説明しています。

最初の作品では、次の点から確認できます。

• 見出しの順序を飛ばさない
• 本文の文字と背景に十分な差をつける
• リンク先が分かる文言にする
• 画像を追加するときは内容に合った代替テキストを検討する
• キーボードでもリンクへ移動できるか試す
• 画面を狭くしても横スクロールが発生しないか確認する

アクセシビリティは完成後だけの特別な作業ではありません。HTMLで内容の役割を正しく示すという、最初の練習から始まっています。

よくある質問

プログラミング経験がなくても始められますか？

始められます。HTMLはページの内容と構造を示し、CSSは見た目を指定します。まずはサンプルを入力し、一部分を書き換えて結果を確認する方法なら、複雑な計算やアルゴリズムの知識は不要です。

タブレットやスマートフォンだけでも作れますか？

オンライン編集環境を使えば試せます。ただし、長いコードの入力、複数ファイルの管理、画面幅の比較にはパソコンが便利です。趣味として継続するなら、手持ちのパソコンを使う方法が現実的です。

HTMLとCSSは暗記する必要がありますか？

すべてを暗記する必要はありません。頻繁に使うものは制作中に自然と覚えます。要素やプロパティの意味を調べ、公式資料へ戻れることのほうが重要です。

JavaScriptはいつ始めればよいですか？

HTMLで内容を作り、CSSで基本的な見た目を整えられた後で構いません。ボタンによる表示の切り替えなど、ページに動きを加えたくなった時点が一つの目安です。

作ったページはすぐ公開したほうがよいですか？

公開は必須ではありません。まずローカルで完成させ、個人情報、素材の権利、公開範囲を確認してから判断しましょう。URLを他の人へ送りたいという目的が生まれたときに、公開方法を学べば十分です。

まとめ：最初の目標は「2ファイルで1ページ完成」

Web制作は、手持ちのパソコンがあれば追加費用をかけずに始められます。向いているのは、色や配置を試すこと、小さな修正を積み重ねること、その結果をすぐ画面で確かめることに楽しさを感じる人です。

最初にやることを絞ると、次の5つになります。

1. my-first-pageフォルダーを作る
2. index.htmlで自己紹介を書く
3. style.cssで色と余白を整える
4. ブラウザーで表示し、狭い画面でも確認する
5. 見出し、文章、リスト、リンクが表示できたら完成にする

次の課題は新しい技術を大量に覚えることではありません。完成したページの文章を自分の言葉へ置き換え、色を一つ変え、もう一度保存することです。その小さな変更ができれば、Web制作を趣味として続ける土台はすでにできています。

参照リンク

• MDN「入門モジュール」
• Visual Studio Code「Get started with Visual Studio Code」
• MDN「HTML: コンテンツの作成」
• W3C Markup Validation Service
• MDN「Publishing your website」
• W3C Web Accessibility Initiative「Page Structure Tutorial」