HTML初心者向け｜実際にHTMLとCSSを書いてWebページを作ってみよう

学習ロードマップ
2026.06.21

HTMLとCSSを勉強しようと思っても、最初は何から始めればいいのか分かりにくいです。

「HTMLは構造を作る」
「CSSは見た目を整える」

と説明されても、実際に手を動かしてみないと、なかなかイメージしにくいと思います。

私も最初は、HTMLファイルを作るところからよく分かっていませんでした。

どこにファイルを作るのか。

どうやってブラウザで見るのか。

CSSはどうやって読み込むのか。

そのあたりで普通に止まっていました。

なのでこの記事では、実際に作業用フォルダを作るところから、HTMLとCSSを書いてブラウザで表示するところまで進めます。

難しいことはしません。

まずは、見出し、文章、リスト、ボタン風のリンクを作って、CSSで見た目を整えるところまでやります。

この記事には広告が含まれます。

今回作るもの

今回は、HTML/CSSの練習として、簡単な自己紹介ページを作ります。

完成すると、白いカードの中に見出し、文章、学習内容のリスト、ボタン風のリンクが表示されるページになります。

作業の流れは、以下のようになります。

  1. 作業用フォルダを作る
  2. index.htmlを作る
  3. style.cssを作る
  4. HTMLを書く
  5. CSSを書く
  6. ブラウザで表示を確認する
  7. うまく表示されない場合は、ファイル名や読み込み設定を確認する

最初からおしゃれなサイトを作ろうとすると、だいたい手が止まります。

まずは、地味でもいいので「自分で書いたコードがブラウザに表示される」ことを確認するのが大事です。

今回作るページの中身は、以下のようなものです。

  • ページのタイトル
  • 自己紹介文
  • 学習中の内容リスト
  • ボタン風のリンク
  • CSSで背景色や余白をつける

かなりシンプルですが、HTML/CSSの基本練習としては十分です。

ファイルを2つ用意する

まず、作業用のフォルダを作ります。

デスクトップでも、ドキュメントフォルダでも構いません。

自分が分かりやすい場所に、練習用のフォルダを作ってください。

今回は、フォルダ名を以下のようにします。

html-css-practice

Windowsなら、作りたい場所で右クリックして「新規作成」から「フォルダー」を選びます。

Macなら、Finderで作りたい場所を開いて、新規フォルダを作ります。

フォルダを作ったら、その中に以下の2つのファイルを作ります。

index.html
style.css

HTMLを書くファイルがindex.htmlです。

CSSを書くファイルがstyle.cssです。

ファイル名は、半角英数字で書きます。

index.html.txtのようになっていると、HTMLファイルとして扱われないことがあります。

Windowsで拡張子が見えない場合は、ファイル名が本当にindex.htmlになっているか確認してください。

VS Codeを使う場合は、以下の流れです。

  1. VS Codeを開く
  2. 「ファイル」から「フォルダーを開く」を選ぶ
  3. さきほど作ったhtml-css-practiceフォルダを開く
  4. 左側のファイル一覧で新しいファイルを作る
  5. index.htmlとstyle.cssを作る

最初はこの2つだけで大丈夫です。

HTMLとCSSの練習では、まず「HTMLファイル」と「CSSファイル」を分けて作ることに慣れると分かりやすいです。

まずはHTMLを書いてみる

index.htmlに、以下のコードを書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのHTML/CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="profile-card">
    <h1>はじめてのWebページ</h1>

    <p>
      HTMLとCSSを勉強中です。
      まずは簡単なページを作って、少しずつ慣れていきます。
    </p>

    <h2>今勉強していること</h2>

    <ul>
      <li>HTMLの基本タグ</li>
      <li>CSSでの装飾</li>
      <li>Webページの作り方</li>
    </ul>

    <a href="#" class="button">詳しく見る</a>
  </div>
</body>
</html>

書けたら、index.htmlを保存します。

保存したら、index.htmlをブラウザで開いてみます。

方法はいくつかあります。

ファイルをダブルクリックすると、ブラウザで開けることがあります。

または、ファイルをブラウザの画面にドラッグしても開けます。

VS Codeの拡張機能であるLive Serverを使っている場合は、右クリックして「Open with Live Server」を選ぶ方法もあります。

この時点では、まだ文字だけのシンプルなページです。

背景色もありません。

ボタンも普通のリンクのように見えます。

それで大丈夫です。

ここでは、まずHTMLがブラウザに表示されることを確認します。

HTMLの中身を簡単に見る

今回使っているHTMLを少しだけ見ておきます。

<h1>はじめてのWebページ</h1>

h1は、ページの大きな見出しです。

記事やページのタイトルに使うことが多いです。

<p>
  HTMLとCSSを勉強中です。
</p>

pは、文章を書くためのタグです。

本文や説明文を書くときに使います。

<ul>
  <li>HTMLの基本タグ</li>
  <li>CSSでの装飾</li>
  <li>Webページの作り方</li>
</ul>

ulとliは、リストを作るときに使います。

ulがリスト全体で、liがリストのひとつひとつの項目です。

<a href="#" class="button">詳しく見る</a>

aはリンクを作るタグです。

今回はCSSで見た目を変えて、ボタンのように表示します。

HTMLは、ページの中身を作る役割があります。

見出し、文章、リスト、リンクなどをHTMLで書いていきます。

次にCSSを書いてみる

次に、style.cssに以下のコードを書きます。

body {
  margin: 0;
  background-color: #f2f2f2;
  font-family: sans-serif;
}

.profile-card {
  width: 600px;
  margin: 60px auto;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 12px;
}

h1 {
  color: #333333;
  font-size: 32px;
}

h2 {
  margin-top: 30px;
  color: #555555;
  font-size: 22px;
}

p {
  line-height: 1.8;
  color: #444444;
}

li {
  margin-bottom: 8px;
}

.button {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 20px;
  background-color: #007acc;
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
}

書けたら、style.cssを保存します。

そのあと、ブラウザで開いているindex.htmlを更新します。

WindowsならF5キー、Macならcommand + Rで更新できます。

更新すると、見た目が変わります。

背景が薄いグレーになり、白いカードの中に文字が表示されます。

リンクも青いボタンのような見た目になります。

ここまでできれば、HTMLとCSSを使った簡単なWebページの完成です。

やったことはシンプルです。

HTMLでページの中身を作る。

CSSで見た目を整える。

ブラウザで表示を確認する。

この流れが、HTML/CSSの基本です。

CSSで何をしているのか

CSSは、HTMLで作った部品の見た目を整えるために使います。

たとえば、以下の部分です。

body {
  margin: 0;
  background-color: #f2f2f2;
  font-family: sans-serif;
}

ここでは、ページ全体の余白、背景色、フォントを指定しています。

margin: 0;は、ブラウザが最初から持っている余白を消しています。

background-colorは背景色です。

font-familyは文字の種類です。

.profile-card {
  width: 600px;
  margin: 60px auto;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 12px;
}

.profile-cardは、HTMLで指定したclass="profile-card"に対するCSSです。

この部分で、白いカードの横幅、余白、背景色、角丸を指定しています。

margin: 60px auto;によって、カードが中央に寄ります。

padding: 30px;によって、カードの内側に余白ができます。

.button {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 20px;
  background-color: #007acc;
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
}

.buttonでは、リンクをボタンのように見せています。

HTMLのaタグは普通のリンクですが、CSSを使うとボタンのような見た目にできます。

CSSを書くときは、どのHTMLに対して見た目を変えたいのかを考えます。

今回なら、body、.profile-card、h1、h2、p、li、.buttonに対してCSSを書いています。

HTMLとCSSは役割を分けて考える

HTML初心者のうちは、HTMLとCSSの役割が混ざりやすいです。

ざっくり分けると、こうです。

HTMLは、ページの中身を作るものです。

CSSは、その中身の見た目を整えるものです。

たとえば、見出しや文章やリストを作るのはHTMLです。

文字の色、背景色、余白、横幅、角丸などを決めるのはCSSです。

今回の記事でやった作業も、この役割に分かれています。

まずindex.htmlに、ページに表示したい内容を書きました。

次にstyle.cssに、見た目を整えるための指定を書きました。

そしてindex.htmlの中で、以下のようにCSSファイルを読み込みました。

<link rel="stylesheet" href="style.css">

この1行があることで、HTMLにCSSの見た目が反映されます。

HTMLとCSSを別々のファイルに分けると、ページの中身と見た目を分けて管理できます。

最初は少し面倒に見えるかもしれませんが、Web制作ではよく使う形です。

最初から完璧に覚えなくていい

HTML/CSSを始めたばかりのころは、タグやプロパティを全部覚えようとしがちです。

でも、最初から全部暗記する必要はありません。

私も現場で働いていますが、CSSの細かい書き方は普通に調べます。

全部覚えている人間みたいな顔をしていますが、裏では検索しています。

最初は、よく使うものだけ触れば大丈夫です。

HTMLなら、まずはこのあたりです。

  • h1、h2
  • p
  • a
  • img
  • ul、li
  • div
  • section

CSSなら、まずはこのあたりです。

  • color
  • background-color
  • font-size
  • margin
  • padding
  • width
  • border
  • border-radius
  • display

今回のサンプルでも、この中のいくつかを使っています。

まずはコードをコピーして動かしてみる。

次に、文字や色や余白を少し変えてみる。

そのくらいからで大丈夫です。

たとえば、background-colorの色を変えてみる。

font-sizeの数字を変えてみる。

paddingの数字を変えてみる。

少し変えてブラウザで確認すると、CSSが何をしているのか分かりやすくなります。

HTML/CSS初心者におすすめの本

HTML/CSSは、ネットの記事だけでも勉強できます。

ただ、完全初心者の場合は、最初に1冊持っておくと流れをつかみやすいです。

特に、HTML/CSSは「書き方」だけでなく、「どういう順番でWebページを作るのか」が大事です。

この記事では小さい自己紹介ページを作りました。

本で学ぶ場合は、もう少し大きいサンプルサイトを作りながら学べるものを選ぶと、HTML/CSSの使い方が分かりやすくなります。

ここでは、HTML/CSS初心者向けに使いやすい本を紹介します。

これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本

HTML/CSSをこれから学ぶ人の1冊目として使いやすい入門書です。

手を動かしてWebサイトを作りながら、HTML/CSSとWebデザインの基本を学べる内容になっています。

制作できるサイトは計4種類です。

初歩的な内容から少しずつレベルアップしていき、Flexboxレイアウト、CSSグリッドレイアウト、レスポンシブデザイン、CSSアニメーションまで扱います。

HTML/CSSだけでなく、Webデザインの考え方も一緒に学びたい人に向いています。

また、学習をサポートする特典もあります。

  • サンプルサイトのデザインデータ
  • Webサイトの公開方法を解説したPDF
  • 制作に役立つおすすめサイト集
  • FlexboxやCSSグリッドなどのチートシート

ただコードを書くだけでなく、Webサイト制作の流れを知りたい初心者に合いやすい本です。

これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本 [ Capybara Design 竹内 直人 ]

価格:2420円
(2026/6/21 08:58時点)
感想(15件)

たった1日で基本が身に付く!HTML & CSS 超入門

短い時間でHTML/CSSの全体像をつかみたい人向けの入門書です。

内容は、Webサイト作成の準備、HTMLの基本、テンプレートページ作成、個別ページ作成、CSSの基本、段組みレイアウト、Webページのデザイン、Webサイト公開まで扱っています。

「まずはHTML/CSSがどんなものか知りたい」
「細かいことより、最初の1冊でざっくり流れをつかみたい」

という人に向いています。

説明を詰め込みすぎないタイプなので、分厚い本だと途中で止まりそうな人にも使いやすいです。

たった1日で基本が身に付く!HTML &amp; CSS　超入門 / Wingsプロジェクト 【本】

価格:2266円
(2026/6/21 08:59時点)
感想(0件)

作りながら学ぶWebプログラミング実践入門

HTML/CSSだけでなく、JavaScriptやNode.jsまでまとめて触れたい人向けの本です。

内容は、HTML/CSS、JavaScript、Node.js、Express、データベース、本格Webアプリ制作まで含まれています。

完全にHTML/CSSだけを学びたい人には、少し範囲が広いかもしれません。

ただ、Webプログラマーを目指していて、

「HTML/CSSのあとにJavaScriptもやりたい」
「最終的にはWebアプリを作りたい」
「サーバーサイドも少し知っておきたい」

という人には候補になります。

この記事で作ったような簡単なページから始めて、その先のWebプログラミングまで見たい人向けです。

作りながら学ぶWebプログラミング実践入門 一冊で理解するHTML、CSS、JavaScript、Node.js[本/雑誌] / 掌田津耶乃/著

価格:2948円
(2026/6/21 09:00時点)
感想(0件)

HTML/CSS初心者は「読むだけ」より書いた方がいい

HTML/CSSは、読んでいるだけだと分かった気になりやすいです。

でも、実際に書いてみると、すぐに手が止まります。

タグを閉じ忘れる。

CSSが効かない。

ファイル名を間違える。

classの名前がHTMLとCSSで違う。

このあたりは初心者のころによくあります。

私もCSSが効かなくてかなり悩んだあと、ただファイル名を間違えていただけ、みたいなことが普通にありました。

そういう失敗も含めて、手を動かした方が覚えます。

今回の作業でも、以下の流れを実際にやっています。

  1. フォルダを作る
  2. HTMLファイルを作る
  3. CSSファイルを作る
  4. HTMLを書く
  5. CSSを書く
  6. ブラウザで確認する
  7. おかしければ原因を探す

HTML/CSSの学習では、この流れを何度も繰り返します。

最初はゆっくりで大丈夫です。

CSSが反映されないときに見るところ

初心者がよく詰まるのが、CSSを書いたのに反映されないときです。

その場合は、まず以下を確認します。

HTMLでCSSを読み込めているか

index.htmlのhead内に、以下があるか確認します。

<link rel="stylesheet" href="style.css">

style.cssという名前でCSSファイルを作っているなら、この書き方で読み込めます。

ファイル名が違うとCSSは反映されません。

たとえば、CSSファイル名がstyles.cssなのに、HTML側でstyle.cssと書いていると動きません。

また、index.htmlとstyle.cssが同じフォルダの中にあるかも確認します。

今回の場合、フォルダの中はこうなっていればOKです。

html-css-practice
├── index.html
└── style.css

style.cssが別のフォルダに入っていると、今回の書き方では読み込めません。

まずは、index.htmlとstyle.cssを同じフォルダに置いて練習すると分かりやすいです。

class名が合っているか

HTMLでこう書いている場合、

<div class="profile-card">

CSSではこう書きます。

.profile-card {
  background-color: #ffffff;
}

HTML側のprofile-cardと、CSS側の.profile-cardが同じ名前になっているか確認します。

1文字でも違うとCSSは効きません。

たとえば、HTMLではprofile-cardなのに、CSSでprofile_cardと書くと別物になります。

CSSの先頭にある.も必要です。

class="profile-card"にCSSを書く場合は、CSS側では.profile-cardと書きます。

保存してからブラウザを更新したか

単純ですが、保存し忘れもよくあります。

コードを書いたら保存します。

そのあと、ブラウザを更新します。

保存していない状態でブラウザを更新しても、変更は反映されません。

まずは以下を確認してください。

  1. index.htmlを保存したか
  2. style.cssを保存したか
  3. ブラウザを更新したか

これだけで直ることもあります。

まずは小さいページを作ればいい

HTML/CSS初心者のうちは、いきなり本格的なサイトを作る必要はありません。

まずは、今回のような小さいページで十分です。

  • 自己紹介ページ
  • 好きな本の紹介ページ
  • 架空のカフェ紹介ページ
  • 学習記録ページ
  • 商品紹介ページ

このくらいなら、HTML/CSSの練習にしやすいです。

作るときの流れは、今回と同じです。

まず、作業用フォルダを作る。

次に、index.htmlとstyle.cssを作る。

HTMLでページの中身を書く。

CSSで見た目を整える。

ブラウザで確認する。

慣れてきたら、画像を入れたり、2カラムにしたり、スマホ対応にしたりしていけば大丈夫です。

最初の目標は、きれいなサイトを作ることではありません。

HTMLとCSSを書いて、ブラウザに表示できるようになることです。

まとめ

HTML初心者は、まず実際にHTMLとCSSを書いてみるのがおすすめです。

今回は、作業用フォルダを作り、index.htmlとstyle.cssを用意して、簡単な自己紹介ページを作りました。

HTMLは、見出し、文章、リスト、リンクなどの中身を作ります。

CSSは、色、余白、横幅、背景、角丸などの見た目を整えます。

最初はきれいなサイトを作れなくても大丈夫です。

まずは、index.htmlとstyle.cssを作って、ブラウザに表示してみましょう。

HTML/CSSは、読んで覚えるより、書いて動かした方が分かりやすいです。

小さいページをいくつか作っているうちに、タグやCSSの書き方にも少しずつ慣れていきます。

本で体系的に学びたい場合は、HTML/CSSの入門書を1冊使うのもありです。

特に、手を動かしながら作るタイプの本は、初心者でも進めやすいです。

タイトルとURLをコピーしました