HTML/CSSで初めてのWebサイトを作ろう｜ステップバイステップガイド

プログラミングに興味を持ったら、まずはWebサイトを作ってみるのが一番の近道です。HTMLでページの骨組みを作り、CSSで見た目を整える。この2つの技術さえあれば、自分だけのWebサイトを公開できます。この記事では、実際にコードを書きながら、シンプルなプロフィールページを一から完成させるまでの手順を解説します。HTMLやCSSの基本概念についてまだ知らない方は、先にHTML/CSSとは？を読んでおくとスムーズです。

HTML/CSS ではじめての Web サイト制作とは

メモ帳 1 つあれば書ける HTML と CSS だけで、最初の 1 ページを公開するまでの最短手順を解説します。Visual Studio Code と Netlify を使えば、サーバー知識ゼロでも今日中に世界に公開できます。

TL;DR 早わかりサマリー

HTML / CSS だけで、3-5 時間あれば動くポートフォリオ Web サイトを 1 つ作れます
VS Code + Chrome + Live Server の 3 点セットで環境構築完了
Flexbox と Grid を覚えれば、現代的なレイアウトの 9 割をカバーできます
完成後は Netlify / Vercel で 5 分でデプロイし、自分の URL を持てます

準備するもの

必要なものは2つだけです。

テキストエディタ - Visual Studio Code（VS Code）を推奨します。無料で使えて、HTMLやCSSの入力補完機能が充実しています。
Webブラウザ - Google ChromeやFirefoxなど、普段使っているブラウザで構いません。

特別なソフトウェアのインストールや、サーバーの契約は不要です。パソコン上でファイルを作成し、ブラウザで開くだけでWebサイトを表示できます。

ステップ1：HTMLファイルを作成する

まず、作業用のフォルダを作りましょう。デスクトップに「my-website」というフォルダを作成し、その中にindex.htmlというファイルを新規作成します。

VS Codeでindex.htmlを開き、以下のコードを入力してください。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自己紹介ページ</title>
</head>
<body>
  <h1>こんにちは、私のページへようこそ</h1>
  <p>これは私の初めてのWebサイトです。</p>
</body>
</html>

ファイルを保存したら、ブラウザで開いてみましょう。index.htmlをブラウザのウィンドウにドラッグ＆ドロップするか、ファイルをダブルクリックすれば表示されます。

画面に「こんにちは、私のページへようこそ」という見出しと、その下に説明文が表示されていれば成功です。

コードの意味を確認する

<!DOCTYPE html> - このファイルがHTML5であることをブラウザに伝える宣言
<html lang="ja"> - HTML文書の開始。lang="ja"は日本語のページであることを示す
<head> - ページの設定情報を記述する領域（画面には表示されない）
<meta charset="UTF-8"> - 文字コードをUTF-8に設定（日本語を正しく表示するため）
<body> - 画面に表示されるコンテンツを記述する領域
<h1> - 最も大きな見出し
<p> - 段落（パラグラフ）

ステップ2：プロフィールの内容を追加する

骨組みができたので、プロフィールページとしての内容を充実させましょう。<body>タグの中身を以下のように書き換えてください。

HTML

<body>
  <header>
    <h1>山田太郎のポートフォリオ</h1>
    <p>Web開発を学習中のエンジニア見習い</p>
  </header>

  <main>
    <section>
      <h2>自己紹介</h2>
      <p>はじめまして。現在、HTML/CSSを中心にWeb開発の基礎を学んでいます。将来はフロントエンドエンジニアとして、使いやすいWebサイトを作れるようになることが目標です。</p>
    </section>

    <section>
      <h2>学習中のスキル</h2>
      <ul>
        <li>HTML / CSS</li>
        <li>JavaScript</li>
        <li>React</li>
      </ul>
    </section>

    <section>
      <h2>制作物</h2>
      <p>現在、最初のWebサイトを制作中です。このページがその第一歩です。</p>
    </section>
  </main>

  <footer>
    <p>Copyright 2026 山田太郎</p>
  </footer>
</body>

ブラウザを更新すると、見出し、自己紹介文、スキルのリスト、フッターが表示されるはずです。まだ見た目は素朴ですが、Webページとしての構造は整っています。

ここで使った新しいタグの意味は以下の通りです。

<header> - ページの上部に表示するヘッダー領域
<main> - ページの主要コンテンツ
<section> - コンテンツのまとまり
<h2> - 2番目に大きな見出し
<ul>と<li> - 箇条書きリスト
<footer> - ページ下部のフッター領域

ステップ3：CSSファイルを作成して見た目を整える

HTMLだけではデザインが味気ないので、CSSで見た目を整えます。「my-website」フォルダの中にstyle.cssというファイルを新規作成してください。

まず、index.htmlの<head>内にCSSファイルへのリンクを追加します。

HTML

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自己紹介ページ</title>
  <link rel="stylesheet" href="style.css">
</head>

次に、style.cssに以下のコードを記述します。

CSS

/* 全体のリセットと基本設定 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.8;
  color: #333;
  background-color: #f9f9f9;
}

/* ヘッダー */
header {
  background-color: #007a5a;
  color: #fff;
  text-align: center;
  padding: 60px 20px;
}

header h1 {
  font-size: 28px;
  margin-bottom: 8px;
}

header p {
  font-size: 16px;
  opacity: 0.9;
}

/* メインコンテンツ */
main {
  max-width: 720px;
  margin: 40px auto;
  padding: 0 20px;
}

section {
  background-color: #fff;
  border-radius: 8px;
  padding: 32px;
  margin-bottom: 24px;
}

section h2 {
  font-size: 20px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #007a5a;
}

section p {
  color: #555;
}

section ul {
  list-style: none;
  padding: 0;
}

section ul li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

section ul li:last-child {
  border-bottom: none;
}

/* フッター */
footer {
  text-align: center;
  padding: 24px;
  color: #888;
  font-size: 14px;
}

ブラウザを更新してみてください。先ほどまで素朴だったページが、緑色のヘッダー、カード風のコンテンツセクション、整理されたレイアウトに変わっているはずです。

CSSで行っていることの解説

*（ユニバーサルセレクタ）で全要素の余白をリセットし、統一的なスタイリングの土台を作っています。bodyにはフォントや行間を指定し、ページ全体の読みやすさを確保しています。headerには背景色を設定し、ページの顔となる部分を目立たせています。mainにはmax-widthとmargin: autoを指定することで、コンテンツを画面中央に配置しています。

ステップ4：レスポンシブ対応を追加する

現代のWebサイトは、スマートフォンでも快適に閲覧できる必要があります。style.cssの末尾に以下のコードを追加しましょう。

CSS

/* レスポンシブ対応 */
@media (max-width: 600px) {
  header {
    padding: 40px 16px;
  }

  header h1 {
    font-size: 22px;
  }

  section {
    padding: 24px 16px;
  }
}

@mediaはメディアクエリと呼ばれる仕組みで、画面幅が600px以下のときだけ適用されるスタイルを定義できます。ここでは、余白やフォントサイズを小さくして、スマートフォンの狭い画面でも読みやすくしています。

ブラウザの開発者ツール（F12キー）を開き、画面幅を狭くしてみると、レイアウトが調整される様子を確認できます。

完成したファイルの全体像

最終的なindex.htmlの全コードは以下の通りです。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自己紹介ページ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>山田太郎のポートフォリオ</h1>
    <p>Web開発を学習中のエンジニア見習い</p>
  </header>

  <main>
    <section>
      <h2>自己紹介</h2>
      <p>はじめまして。現在、HTML/CSSを中心にWeb開発の基礎を学んでいます。将来はフロントエンドエンジニアとして、使いやすいWebサイトを作れるようになることが目標です。</p>
    </section>

    <section>
      <h2>学習中のスキル</h2>
      <ul>
        <li>HTML / CSS</li>
        <li>JavaScript</li>
        <li>React</li>
      </ul>
    </section>

    <section>
      <h2>制作物</h2>
      <p>現在、最初のWebサイトを制作中です。このページがその第一歩です。</p>
    </section>
  </main>

  <footer>
    <p>Copyright 2026 山田太郎</p>
  </footer>
</body>
</html>

完成サイトの構成 — 1 ページ LP の骨格

最初の 1 サイトは、シンプルな自己紹介 LP がおすすめです。HTML の骨格は次のとおりです。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>山田太郎 - フロントエンドエンジニア</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="hero">
    <h1>山田太郎</h1>
    <p>フロントエンドエンジニアを目指して学習中</p>
  </header>

  <section class="about">
    <h2>About</h2>
    <p>自己紹介の文章</p>
  </section>

  <section class="skills">
    <h2>Skills</h2>
    <ul>
      <li>HTML / CSS</li>
      <li>JavaScript</li>
      <li>React (学習中)</li>
    </ul>
  </section>

  <section class="works">
    <h2>Works</h2>
    <article>作品 1</article>
    <article>作品 2</article>
  </section>

  <footer>
    <p>&copy; 2026 山田太郎</p>
  </footer>
</body>
</html>

この骨格を CSS で装飾していくのが最初の学習です。

レスポンシブ対応の基本 — モバイルファースト

スマホでも見られるサイトにするには、次のポイントを押さえます。

1. viewport meta タグ <meta name="viewport" content="width=device-width, initial-scale=1.0"> を必ず head に入れます。

2. メディアクエリ スマホ → タブレット → PC の順に CSS を書いていく「モバイルファースト」が現代的です。

CSS

/* デフォルト: モバイル */
.container { padding: 16px; }

/* タブレット以上 */
@media (min-width: 768px) {
  .container { padding: 32px; }
}

/* PC 以上 */
@media (min-width: 1024px) {
  .container { padding: 64px; max-width: 1200px; }
}

3. Flexbox / Grid 1 次元レイアウトは Flexbox、2 次元レイアウトは Grid を使い分けます。古い float レイアウトは捨てて構いません。

4. 画像の最適化 max-width: 100% で画像が親要素を超えないようにします。スマホで画像がはみ出すのを防ぎます。

ハンズオン Step-by-Step

VS Code とブラウザ (Chrome 推奨) があれば 30 分で公開できます。my-first-site フォルダを 1 つ作って試してください。

Step 1. index.html を作る

VS Code で index.html を作り、次の最小 HTML を貼り付けます。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>はじめてのサイト</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>こんにちは、Web の世界</h1>
    <p>これが最初のページです。</p>
  </body>
</html>

Step 2. style.css を作る

同じフォルダに style.css を作って次を貼ります。色と余白を CSS で指定します。

CSS

body {
  font-family: sans-serif;
  background: #f8f9fa;
  color: #222;
  padding: 2rem;
}
h1 {
  color: #0066cc;
}

Step 3. ブラウザで開く

index.html をダブルクリックするとブラウザで表示されます。h1 が青、背景がうすいグレーになっていれば成功です。

Step 4. Netlify Drop で公開

https://app.netlify.com/drop を開き、フォルダ全体をドラッグ&ドロップします。30 秒で世界からアクセスできる URL が発行されます。

Step 5. URL を共有

発行された *.netlify.app の URL を友人にシェアして、本当に世界からアクセスできるか確認してみてください。

次は flexbox / grid を覚えるとレイアウトの自由度が一気に上がります。

よくある質問

Q. HTML / CSS だけで仕事は取れますか

A. 静的 LP / コーポレートサイトの制作なら受注可能ですが、単価は低めです。WordPress カスタマイズ、JavaScript も含めると単価が上がります。本格的に副業 / 転職を目指すなら、JavaScript と React まで進むのが現実的です。

Q. Bootstrap / Tailwind CSS は最初から使うべき？

A. まず素の CSS で 1-2 サイト作ってから Tailwind に移行するのがおすすめです。CSS の基礎が分からないままフレームワークに入ると、応用が効かなくなります。

Q. デザインのセンスがありません

A. デザインは「ルール」と「お手本」で 8 割解決します。8pt グリッド、配色は 3 色まで、フォントは 2 種類まで、のような基本ルールを覚えるだけで一気に見栄えが変わります。Pinterest / Awwwards でお手本を集めるのが上達の早道です。

Q. 完成したサイトを公開する方法は

A. Netlify / Vercel / GitHub Pages で 5 分で公開できます。独自ドメインを取れば年間 1000-2000 円で「自分の URL」が持てます。Netlify Drop に Drag & Drop するだけのもっとも簡単な方法もあります。

Q. AI でコードを書かせれば学ばなくていいですか

A. AI 出力の良し悪しを判断するには、HTML / CSS の基礎理解が必須です。素人発想で AI に頼むと、まず動かない or デザインが破綻したサイトが返ってきます。基礎は自分で書ける状態を目指すのが最短です。

Q. 次に何を学ぶべきですか

A. JavaScript で動きを付ける → DOM 操作 → フレームワーク (React) の順がおすすめです。詳しくは JavaScript で Web ページを動かすを参照してください。

次のステップ

HTML/CSSで静的なWebサイトを作る基本を体験できました。ここからさらにステップアップするには、以下の方向に進むことができます。

JavaScriptを学ぶ - ボタンのクリックやフォームの送信など、ページに動きを加えられます。詳しくはJavaScriptでWebページを動かすを参照してください。
Flexbox・Gridを習得する - より複雑なレイアウトを効率的に組めるようになります。
実際にWebサイトを公開する - GitHub PagesやNetlifyを使えば、無料でWebサイトを公開できます。

HTMLとCSSは、すべてのWeb開発の土台となる技術です。今回作ったプロフィールページを自分なりにカスタマイズしながら、理解を深めていってください。色を変える、セクションを増やす、画像を追加するなど、小さな変更を重ねることが上達への近道です。

チョットデキルの「HTML・CSS」コースでは、今回のようなハンズオン形式で基礎から応用まで段階的に学習を進められます。ブラウザ上でコードを書いて即座に結果を確認できる環境が整っているため、環境構築に悩むことなく学習に集中できます。Webサイト制作のスキルを本格的に身につけたい方は、ぜひ取り組んでみてください。

次に読むべきリソース

学習を始めたい方 — HTML/CSS 入門コース
深く理解したい方 — HTML と CSS とは？
無料相談したい方 — LuaGate 無料相談

出典・参考リンク

本記事の主張・数値・仕様に関する根拠は、以下の一次情報・公式ドキュメントを参照しています。リンク先の更新により内容が変わる場合があるため、最新情報は各公式サイトで確認してください。

この記事について

監修: 生田陸人 (LuaGate エンジニア / 大手 IT 企業現役エンジニア)
公開: 2026-05-28
最終更新: 2026-05-28
カテゴリ: フロントエンド
検証環境: Chrome 124 / VS Code 1.90 / Live Server 拡張
編集ポリシー: 公式ドキュメント・公的統計を一次情報として優先し、社内エンジニアが実機検証した内容のみを掲載しています。修正提案や事実誤認の指摘はチョットデキル運営までお寄せください。

HTML/CSSで初めてのWebサイトを作ろう｜ステップバイステップガイド

TL;DR 早わかりサマリー

準備するもの

ステップ1：HTMLファイルを作成する

コードの意味を確認する

ステップ2：プロフィールの内容を追加する

ステップ3：CSSファイルを作成して見た目を整える

CSSで行っていることの解説

ステップ4：レスポンシブ対応を追加する

完成したファイルの全体像

完成サイトの構成 — 1 ページ LP の骨格

レスポンシブ対応の基本 — モバイルファースト

ハンズオン Step-by-Step

Step 1. index.html を作る

Step 2. style.css を作る

Step 3. ブラウザで開く

Step 4. Netlify Drop で公開

Step 5. URL を共有

関連リソース

よくある質問

Q. HTML / CSS だけで仕事は取れますか

Q. Bootstrap / Tailwind CSS は最初から使うべき？

Q. デザインのセンスがありません

Q. 完成したサイトを公開する方法は

Q. AI でコードを書かせれば学ばなくていいですか

Q. 次に何を学ぶべきですか

次のステップ

次に読むべきリソース

出典・参考リンク

この記事について

似ている記事

HTML/CSSとは？Webページの仕組みを初心者向けに図解で解説

Pythonで始めるデータ分析入門｜pandasの基本操作を実践で学ぶ

JavaScriptでWebページを動かす｜DOM操作の基本を実践で学ぶ