HTMLコーディングとは？初心者が基礎から学べる書き方・手順・練習方法ガイド
はじめに
Webサイトを作るうえで欠かせない基礎が「HTMLコーディング」です。HTMLは、見出し・文章・画像・リンクなどをWebページ上に配置し、ページの骨組みを作るための言語です。コーディング初心者にとって、HTMLは最初に学びやすい分野であり、Web制作の入口として非常に重要です。
この記事では、「コーディング html」というキーワードで調べている初心者に向けて、HTMLコーディングの意味、基本構造、よく使うタグ、書き方の手順、練習方法までを基礎からわかりやすく解説します。これからHTMLを学びたい方や、Webページを自分で作ってみたい方は、ぜひ参考にしてください。
1. HTMLコーディングとは？初心者向けに意味をわかりやすく解説
HTMLコーディングとは、HTMLというマークアップ言語を使ってWebページの構造を作る作業のことです。Webサイトを開いたときに表示される見出し、本文、画像、リンク、リスト、表などは、HTMLによって意味づけされ、ブラウザに読み込まれます。
初心者がWeb制作を学ぶ場合、まず理解したいのが「HTMLはWebページの土台を作るもの」という点です。見た目の装飾や動きも大切ですが、その前に正しいHTMLでページの構造を作ることが重要です。
1-1. HTMLコーディングの基本的な意味
HTMLコーディングとは、HTMLタグを使ってWebページの内容を記述することです。たとえば、ページのタイトルにはh1タグ、文章にはpタグ、画像にはimgタグ、リンクにはaタグを使います。
HTMLでは、単に文字を並べるだけではなく、「これは見出しです」「これは段落です」「これは画像です」というように、コンテンツの役割をブラウザや検索エンジンに伝えます。
たとえば、次のようなコードがHTMLの基本的な書き方です。
HTML<h1>HTMLコーディングとは</h1>
<p>HTMLを使ってWebページの構造を作る作業です。</p>
<a href="https://example.com">詳しく見る</a>
このようにHTMLコーディングでは、タグを使ってWebページの情報を整理していきます。
1-2. HTMLがWebページで果たす役割
HTMLがWebページで果たす主な役割は、ページの構造を作ることです。家づくりにたとえると、HTMLは柱や壁、部屋の配置を決める「骨組み」にあたります。
Webページには、次のような要素があります。
見出し、本文、画像、リンク、リスト、表、ナビゲーション、フッターなどです。HTMLはこれらの要素を正しく配置し、それぞれに意味を持たせます。
たとえば、記事タイトルにはh1、章の見出しにはh2、説明文にはpを使います。このように文書構造を整理することで、ユーザーにとって読みやすく、検索エンジンにも理解されやすいWebページになります。
1-3. HTML・CSS・JavaScriptの違い
Web制作では、HTMLのほかにCSSやJavaScriptもよく使われます。それぞれの役割は異なります。
HTMLは、Webページの構造を作ります。見出し、本文、画像、リンクなどを配置するために使います。
CSSは、Webページの見た目を整えます。文字の色、背景色、余白、レイアウト、フォントサイズなどを指定します。
JavaScriptは、Webページに動きを加えます。ボタンをクリックしたときの動作、スライダー、メニューの開閉、フォームの入力チェックなどに使われます。
つまり、HTMLは「構造」、CSSは「デザイン」、JavaScriptは「動き」を担当します。HTMLコーディングを学ぶときは、まずHTMLで土台を作り、次にCSSで見た目を整える流れで学ぶと理解しやすくなります。
1-4. コーディングとプログラミングの違い
コーディングとは、コンピューターに伝えるためのコードを書く作業全般を指します。HTMLを書く作業もコーディングに含まれます。
一方、プログラミングは、条件分岐や繰り返し処理、計算、データ処理などを使って、何らかの機能や仕組みを作る作業を指すことが多いです。JavaScript、PHP、Pythonなどはプログラミング言語として扱われます。
HTMLは厳密にはプログラミング言語ではなく、マークアップ言語です。HTML単体では計算処理や複雑な動作を作ることはできません。しかし、Webページを作るための基本となるため、Web制作におけるコーディングの第一歩として非常に重要です。
2. HTMLコーディングでできること
HTMLコーディングを覚えると、自分でWebページの骨組みを作れるようになります。個人ブログ、プロフィールページ、企業サイト、ランディングページ、ポートフォリオサイトなど、さまざまなWebページの基礎を作成できます。
HTMLは見た目を派手にするための言語ではありませんが、Webページの内容を正しく配置し、意味のある構造にするために欠かせません。
2-1. 見出し・本文・画像・リンクを配置できる
HTMLコーディングでは、Webページに必要な基本要素を配置できます。たとえば、記事タイトルを表示したい場合はh1タグ、文章を表示したい場合はpタグ、画像を表示したい場合はimgタグ、別ページへのリンクを作りたい場合はaタグを使います。
HTML<h1>私のプロフィール</h1>
<p>こんにちは。Web制作を勉強しています。</p>
<img src="profile.jpg" alt="プロフィール写真">
<a href="contact.html">お問い合わせはこちら</a>
このように、HTMLを使えばWebページに必要な情報を順番に配置できます。
2-2. Webページの文書構造を整理できる
HTMLコーディングでは、ただ文字や画像を並べるのではなく、ページ全体の構造を整理できます。
たとえば、ページの上部にはheader、主な内容にはmain、章ごとのまとまりにはsection、ページ下部にはfooterを使います。
HTML<header>
<h1>サイト名</h1>
</header>
<main>
<section>
<h2>サービス紹介</h2>
<p>ここにサービス内容を書きます。</p>
</section>
</main>
<footer>
<p>© 2026 Sample Site</p>
</footer>
このように構造を整理すると、コードが読みやすくなり、あとから修正しやすいHTMLになります。
2-3. CSSと組み合わせてデザインを整えられる
HTMLだけでもWebページは表示できますが、見た目はとてもシンプルです。文字の色や大きさ、余白、横並びのレイアウトなどを整えるにはCSSを使います。
HTMLで構造を作り、CSSでデザインを指定することで、見やすく使いやすいWebページを作れます。
HTML<link rel="stylesheet" href="style.css">
たとえば、HTMLでclassを設定しておき、CSSでそのクラスに対して装飾を加えます。
HTML<p class="message">HTMLとCSSを学習中です。</p>
CSS.message {
color: blue;
font-size: 18px;
}
HTMLとCSSを組み合わせることで、実際のWebサイトらしいデザインに近づけることができます。
2-4. SEOやアクセシビリティにも関係する
HTMLコーディングは、SEOやアクセシビリティにも関係します。SEOとは、検索エンジンにページ内容を正しく理解してもらい、検索結果で見つけてもらいやすくするための取り組みです。
たとえば、ページの主題をh1で示し、見出しをh2やh3で整理し、画像にはalt属性で説明文を入れることが大切です。
アクセシビリティとは、さまざまなユーザーがWebページを利用しやすくする考え方です。視覚に障がいのある人がスクリーンリーダーを使う場合、正しいHTML構造や画像の代替テキストが役立ちます。
つまり、HTMLコーディングは見た目だけでなく、検索エンジンやユーザーにとってわかりやすいWebページを作るためにも重要です。
3. HTMLコーディングを始める前に準備するもの
HTMLコーディングを始めるために、高価なソフトや特別な機材は必要ありません。基本的には、パソコン、ブラウザ、コードエディタがあれば始められます。
初心者はまず、シンプルな環境でHTMLファイルを作り、ブラウザで表示を確認するところから始めるとよいでしょう。
3-1. パソコンとブラウザ
HTMLコーディングを行うには、パソコンが必要です。WindowsでもMacでも問題ありません。スマートフォンだけでも学習できないわけではありませんが、実際にコードを書いて確認するにはパソコンのほうが圧倒的に作業しやすいです。
また、作成したHTMLを確認するためにブラウザを使います。代表的なブラウザには、Google Chrome、Microsoft Edge、Safari、Firefoxなどがあります。
初心者には、検証ツールが使いやすいGoogle Chromeがよく利用されています。ブラウザでHTMLファイルを開くことで、書いたコードがどのように表示されるか確認できます。
3-2. テキストエディタ・コードエディタ
HTMLはテキストファイルとして書けるため、メモ帳のような標準アプリでも作成できます。ただし、学習や実務ではコードエディタを使うのがおすすめです。
コードエディタには、タグの色分け、自動補完、インデント調整、ファイル管理など、コーディングを効率化する機能があります。
代表的なコードエディタには、Visual Studio Code、Sublime Text、Atomなどがあります。特にVisual Studio Codeは無料で使え、拡張機能も豊富なため、HTMLコーディング初心者にも人気です。
3-3. HTMLファイルの作り方
HTMLファイルを作るには、まず任意のフォルダを作成し、その中に拡張子.htmlのファイルを保存します。
たとえば、最初の練習ではindex.htmlというファイル名にするとよいでしょう。
ファイル名の例は次のとおりです。
index.html
about.html
contact.html
profile.html
トップページにはindex.htmlという名前を使うのが一般的です。ファイル名には日本語やスペースを使わず、半角英数字とハイフンを使うと管理しやすくなります。
3-4. フォルダ構成の基本
HTMLコーディングでは、HTMLファイル、CSSファイル、画像ファイルなどを整理して管理します。初心者のうちからフォルダ構成を意識しておくと、後からファイルが増えても迷いにくくなります。
基本的なフォルダ構成の例は次のとおりです。
sample-site/
├── index.html
├── css/
│ └── style.css
└── images/
└── profile.jpg
index.htmlはWebページ本体、cssフォルダにはCSSファイル、imagesフォルダには画像ファイルを入れます。
フォルダ構成を整えることで、画像が表示されない、CSSが読み込まれないといったミスを減らせます。
3-5. 作成したHTMLをブラウザで確認する方法
作成したHTMLファイルは、ブラウザで開くことで表示を確認できます。もっとも簡単な方法は、index.htmlファイルをダブルクリックすることです。すると、既定のブラウザでHTMLが表示されます。
また、コードエディタの拡張機能を使うと、保存した内容をすぐにブラウザへ反映できる場合があります。Visual Studio Codeでは、Live Serverという拡張機能を使うと、HTMLの確認が便利になります。
HTMLコーディングでは、「コードを書く」「保存する」「ブラウザで確認する」「修正する」という流れを何度も繰り返します。この確認作業に慣れることが、上達への近道です。
4. 初心者が覚えるべきHTMLの基本構造
HTMLコーディングを始めるには、まずHTML文書の基本構造を理解する必要があります。HTMLには決まった書き方があり、ページ全体をhtmlタグで囲み、設定情報をheadに、画面に表示する内容をbodyに書きます。
基本構造を覚えると、新しいページを作るたびに迷わずコードを書き始められます。
4-1. HTML文書の基本テンプレート
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>ここに本文を書きます。</p>
</body>
</html>
初心者は、まずこの形を覚えることが大切です。毎回ゼロから書くのが大変な場合は、テンプレートとして保存しておくと便利です。
4-2. doctype・html・head・bodyの役割
<!DOCTYPE html>は、この文書がHTML5で書かれていることをブラウザに伝える宣言です。HTMLファイルの一番上に書きます。
htmlタグは、HTML文書全体を囲むタグです。lang="ja"を指定すると、このページが日本語で書かれていることを示せます。
headタグには、ページの設定情報を書きます。文字コード、ページタイトル、CSSファイルの読み込み、検索エンジン向けの説明などが入ります。ここに書いた内容の多くは、ブラウザ画面には直接表示されません。
bodyタグには、実際にブラウザに表示される内容を書きます。見出し、本文、画像、リンク、リストなどはbodyの中に記述します。
4-3. title・metaタグの基本
titleタグは、ブラウザのタブや検索結果のタイトルとして使われる重要なタグです。ページ内容がわかりやすいタイトルを設定しましょう。
HTML<title>HTMLコーディングの基礎ガイド</title>
meta charset="UTF-8"は、文字コードを指定するタグです。日本語の文字化けを防ぐために、基本的にはUTF-8を指定します。
HTML<meta charset="UTF-8">
meta name="viewport"は、スマートフォンやタブレットでページを適切に表示するために使います。
HTML<meta name="viewport" content="width=device-width, initial-scale=1.0">
スマホ対応のWebページを作る場合、このviewport設定はほぼ必須です。
4-4. タグ・要素・属性の違い
HTMLを学ぶときによく出てくる言葉に、タグ、要素、属性があります。
タグとは、<p>や</p>のように山括弧で囲まれた記述です。開始タグと終了タグで内容を囲むものが多くあります。
要素とは、開始タグ、内容、終了タグを含めたまとまりのことです。
HTML<p>これは段落です。</p>
この場合、<p>が開始タグ、</p>が終了タグ、全体がp要素です。
属性とは、タグに追加情報を与えるものです。たとえば、リンク先を指定するhrefや、画像の場所を指定するsrc、画像の説明を指定するaltなどがあります。
HTML<a href="https://example.com">リンク</a>
<img src="image.jpg" alt="サンプル画像">
HTMLコーディングでは、タグの種類だけでなく、属性の使い方も重要です。
4-5. インデントとコメントの書き方
インデントとは、コードの階層がわかりやすくなるように行頭にスペースを入れることです。HTMLはインデントがなくても動作しますが、コードを読みやすくするために必ず整える習慣をつけましょう。
HTML<section>
<h2>見出し</h2>
<p>本文が入ります。</p>
</section>
親子関係がある要素は、内側の要素を一段下げると構造がわかりやすくなります。
コメントは、コード内にメモを残すために使います。ブラウザには表示されません。
HTML<!-- ここからプロフィール section -->
<section>
<h2>プロフィール</h2>
<p>自己紹介文を入れます。</p>
</section>
コメントを使うと、あとから見返したときにコードの意味を理解しやすくなります。
5. HTMLコーディングでよく使う基本タグ
HTMLコーディングでは多くのタグがありますが、初心者が最初に覚えるべきタグは限られています。まずは、見出し、段落、リスト、リンク、画像、レイアウト、表に関するタグを使えるようになりましょう。
基本タグを使いこなせるようになると、シンプルなWebページは自分で作成できるようになります。
5-1. 見出しタグ：h1〜h6
見出しタグは、ページの見出しを表すために使います。h1からh6まであり、数字が小さいほど重要度が高くなります。
HTML<h1>ページの主題</h1>
<h2>大きな章の見出し</h2>
<h3>章の中の小見出し</h3>
h1はページ全体の主題として使い、基本的には1ページに1つが目安です。h2は大きな章、h3はその下の小見出しとして使います。
見出しタグは文字を大きくするためだけのタグではありません。ページ構造を示す重要なタグなので、順番を意識して使いましょう。
5-2. 段落・改行タグ：p・br
文章の段落にはpタグを使います。
HTML<p>これは1つ目の段落です。</p>
<p>これは2つ目の段落です。</p>
改行したい場合はbrタグを使います。
HTML<p>東京都渋谷区<br>サンプルビル3階</p>
ただし、文章の余白を作る目的でbrを多用するのはおすすめできません。余白やレイアウトはCSSで調整するのが基本です。HTMLでは文章の意味に合わせてpを使いましょう。
5-3. リストタグ：ul・ol・li
箇条書きにはリストタグを使います。順番のないリストにはul、順番のあるリストにはol、各項目にはliを使います。
HTML<ul>
<li>HTMLを学ぶ</li>
<li>CSSを学ぶ</li>
<li>Webページを作る</li>
</ul>
手順を表す場合はolが適しています。
HTML<ol>
<li>フォルダを作る</li>
<li>HTMLファイルを作る</li>
<li>ブラウザで確認する</li>
</ol>
リストタグを使うと、情報が整理されて読みやすくなります。
5-4. リンクタグ：a
リンクを作るにはaタグを使います。リンク先はhref属性で指定します。
HTML<a href="https://example.com">公式サイトを見る</a>
同じフォルダ内の別ページにリンクする場合は、次のように書きます。
HTML<a href="about.html">私たちについて</a>
新しいタブで開きたい場合は、target="_blank"を指定します。
HTML<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部サイトを見る</a>
外部サイトを新しいタブで開く場合は、安全性のためにrel="noopener noreferrer"も一緒に書くとよいでしょう。
5-5. 画像タグ：img
画像を表示するにはimgタグを使います。画像ファイルの場所はsrc属性、画像の説明はalt属性で指定します。
HTML<img src="images/photo.jpg" alt="海辺の風景写真">
imgタグには終了タグがありません。画像が表示されない場合は、ファイル名、フォルダ名、拡張子、パスの指定を確認しましょう。
alt属性は、画像が表示されないときやスクリーンリーダーで読み上げるときに使われます。SEOやアクセシビリティの観点からも重要です。
5-6. レイアウトに使うタグ：header・main・section・footer
HTML5では、ページ構造をわかりやすくするためのセマンティックタグが使えます。
headerはページやセクションの上部に使います。ロゴ、サイト名、ナビゲーションなどを入れることが多いです。
mainはページの主要コンテンツを囲みます。1ページに1つが基本です。
sectionは内容のまとまりを表します。見出しと本文をセットで囲むことが多いです。
footerはページやセクションの下部に使います。著作権表記、会社情報、リンクなどを入れます。
HTML<header>
<h1>サイト名</h1>
</header>
<main>
<section>
<h2>お知らせ</h2>
<p>新しい記事を公開しました。</p>
</section>
</main>
<footer>
<p>© 2026 Sample Site</p>
</footer>
これらのタグを使うことで、HTMLの構造がわかりやすくなります。
5-7. 表を作るタグ：table・tr・th・td
表を作るにはtableタグを使います。行はtr、見出しセルはth、通常のセルはtdで表します。
HTML<table>
<tr>
<th>項目</th>
<th>内容</th>
</tr>
<tr>
<td>名前</td>
<td>山田太郎</td>
</tr>
<tr>
<td>職業</td>
<td>Webデザイナー</td>
</tr>
</table>
料金表、比較表、スケジュール表などを作るときに便利です。ただし、レイアウト目的で表を使うのは避け、表形式のデータを表示するときに使いましょう。
6. HTMLコーディングの基本的な書き方と手順
HTMLコーディングは、いきなりコードを書き始めるよりも、ページの内容を整理してから進めるとスムーズです。初心者は手順を決めて作業することで、ミスを減らしながら学習できます。
ここでは、HTMLページを作る基本的な流れを紹介します。
6-1. 作りたいページの内容を整理する
まずは、どのようなWebページを作りたいのかを整理します。たとえば、自己紹介ページであれば、名前、プロフィール文、写真、趣味、SNSリンク、お問い合わせ情報などが必要です。
いきなりHTMLを書くのではなく、紙やメモアプリにページ構成を書き出してみましょう。
例として、自己紹介ページなら次のように整理できます。
ページタイトル：私のプロフィール
見出し：自己紹介
本文：Web制作を勉強しています
画像：プロフィール写真
リスト：趣味、スキル
リンク：SNS、ブログ
内容が整理できていると、どのHTMLタグを使えばよいか判断しやすくなります。
6-2. フォルダとファイルを作成する
次に、作業用フォルダを作ります。フォルダ名は半角英数字でわかりやすく付けましょう。
profile-site/
├── index.html
├── css/
│ └── style.css
└── images/
└── profile.jpg
HTMLファイルはindex.html、CSSファイルはstyle.css、画像はimagesフォルダに保存します。
最初はファイル数を増やしすぎず、シンプルな構成から始めるのがおすすめです。
6-3. HTMLの基本構造を書く
index.htmlを作成したら、まず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>
</body>
</html>
この状態ではブラウザに表示される内容はまだありません。表示したい内容はbodyタグの中に書いていきます。
6-4. 見出し・本文・画像・リンクを追加する
次に、bodyの中に見出し、本文、画像、リンクを追加します。
HTML<h1>私のプロフィール</h1>
<p>こんにちは。HTMLコーディングを学習中です。</p>
<img src="images/profile.jpg" alt="プロフィール写真">
<a href="https://example.com">私のブログを見る</a>
文章だけでなく、画像やリンクを入れることで、Webページらしい構成になります。
6-5. CSSファイルを読み込む
デザインを整える場合は、CSSファイルを作成し、HTMLから読み込みます。CSSファイルを読み込むには、head内にlinkタグを書きます。
HTML<link rel="stylesheet" href="css/style.css">
HTML全体では次のようになります。
HTML<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私のプロフィール</title>
<link rel="stylesheet" href="css/style.css">
</head>
CSSを別ファイルにすることで、HTMLは構造、CSSは見た目という役割分担ができます。
6-6. ブラウザで表示を確認する
HTMLを書いたら、必ずブラウザで表示を確認します。コードエディタで保存したあと、index.htmlをブラウザで開きます。
確認するときは、次の点をチェックしましょう。
見出しが表示されているか、本文が正しく表示されているか、画像が読み込まれているか、リンクが正しく動くか、文字化けしていないかを確認します。
HTMLコーディングでは、書いたコードが必ず意図した通りに表示されるとは限りません。こまめに確認することで、原因を見つけやすくなります。
6-7. エラーや崩れを修正する
表示がおかしい場合は、コードを見直して修正します。初心者に多いミスは、タグの閉じ忘れ、ファイル名の間違い、画像パスの間違い、CSSの読み込みミスなどです。
たとえば、画像が表示されない場合は、次の点を確認します。
画像ファイルが指定したフォルダにあるか、ファイル名の大文字小文字が一致しているか、拡張子が正しいか、src属性のパスが合っているかを確認しましょう。
エラーを見つけて直す作業も、HTMLコーディングの大切な練習です。
7. 初心者向けHTMLコーディングのサンプルコード
HTMLコーディングを学ぶには、実際にサンプルコードを書いて動かしてみるのが効果的です。ここでは、初心者向けに使いやすいサンプルを紹介します。
コードをコピーするだけでなく、少しずつ内容を変更しながら試すと理解が深まります。
7-1. 最小構成のHTMLサンプル
まずは、最小構成のHTMLです。
HTML<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのHTML</title>
</head>
<body>
<h1>はじめてのHTMLコーディング</h1>
<p>これはHTMLで作った最初のページです。</p>
</body>
</html>
このコードをindex.htmlとして保存し、ブラウザで開くと、見出しと文章が表示されます。
初心者はまず、この基本形を何度も書いて覚えましょう。
7-2. プロフィールページのサンプル
次は、自己紹介ページのサンプルです。
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>
<header>
<h1>山田太郎のプロフィール</h1>
</header>
<main>
<section>
<h2>自己紹介</h2>
<p>こんにちは。HTMLとCSSを学習している山田太郎です。</p>
</section>
<section>
<h2>好きなこと</h2>
<ul>
<li>Web制作</li>
<li>読書</li>
<li>写真撮影</li>
</ul>
</section>
</main>
<footer>
<p>© 2026 Taro Yamada</p>
</footer>
</body>
</html>
header、main、section、footerを使うことで、ページ構造がわかりやすくなっています。
7-3. 画像とリンクを使ったサンプル
画像とリンクを追加すると、より実用的なページになります。
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>休日に訪れたいおすすめの場所を紹介します。</p>
<img src="images/park.jpg" alt="緑が広がる公園">
<p>
詳しい情報は
<a href="https://example.com" target="_blank" rel="noopener noreferrer">こちらのサイト</a>
をご覧ください。
</p>
</body>
</html>
画像を使うときは、imagesフォルダの中に画像ファイルを入れ、srcのパスを正しく指定しましょう。
7-4. CSSを読み込むサンプル
HTMLにCSSを読み込むサンプルです。
HTML<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSを使ったページ</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="title">HTMLとCSSの練習</h1>
<p class="text">CSSを使うと、文字の色や大きさを変更できます。</p>
</body>
</html>
CSSファイルには次のように書きます。
CSS.title {
font-size: 32px;
}
.text {
line-height: 1.8;
}
HTMLでは内容の構造を作り、CSSでは見た目を整えるという役割分担を意識しましょう。
7-5. サンプルコードを改造して練習する方法
サンプルコードをそのまま写すだけではなく、自分なりに改造すると学習効果が高まります。
たとえば、プロフィールページなら、名前を自分の名前に変える、趣味のリストを増やす、プロフィール画像を追加する、SNSリンクを入れる、見出しを増やすなどの練習ができます。
最初から完璧なページを作る必要はありません。小さな変更を積み重ねながら、「このタグを変えると表示がどう変わるのか」を確認しましょう。
HTMLコーディングは、手を動かして覚えることが大切です。
8. HTMLコーディングで守りたい基本ルール
HTMLは自由に書けるように見えますが、読みやすく正しいコードを書くためには基本ルールがあります。初心者のうちからルールを意識しておくと、後から複雑なページを作るときにも役立ちます。
きれいなHTMLは、ブラウザ、検索エンジン、他の制作者、自分自身にとってわかりやすいコードです。
8-1. 正しい入れ子構造で書く
HTMLでは、タグの中に別のタグを入れることがあります。この親子関係を入れ子構造といいます。入れ子構造は、正しい順番で閉じる必要があります。
正しい例は次のとおりです。
HTML<p><strong>重要なお知らせ</strong>があります。</p>
間違った例は次のとおりです。
HTML<p><strong>重要なお知らせ</p></strong>
開始タグと終了タグの順番が崩れると、表示が乱れたり、意図しない構造になったりします。タグを開いたら、対応する終了タグを忘れずに書きましょう。
8-2. h1タグはページの主題として使う
h1タグは、ページの主題を表す重要な見出しです。記事ページであれば記事タイトル、トップページであればサイト名やメインメッセージに使います。
HTML<h1>HTMLコーディングの基本</h1>
見出しタグは、デザイン目的で使うのではなく、文書構造を示すために使います。文字を大きくしたいだけならCSSで調整しましょう。
h1の下にh2、その下にh3というように、階層を意識して書くことが大切です。
8-3. class名・id名はわかりやすく付ける
CSSやJavaScriptで要素を指定するために、classやidを使います。名前は、役割がわかるように付けましょう。
わかりやすい例は次のとおりです。
HTML<section class="profile">
<h2 class="profile-title">プロフィール</h2>
</section>
わかりにくい例は次のとおりです。
HTML<section class="box1">
<h2 class="red">プロフィール</h2>
</section>
box1やredのような名前は、後から見たときに何の要素かわかりにくくなります。見た目ではなく、役割に基づいた名前を付けると管理しやすくなります。
8-4. 画像にはalt属性を設定する
画像を表示するimgタグには、できるだけalt属性を設定しましょう。
HTML<img src="images/cat.jpg" alt="窓辺に座る白い猫">
alt属性は、画像が読み込まれなかったときに代替テキストとして表示されます。また、スクリーンリーダーを利用しているユーザーに画像の内容を伝える役割もあります。
ただし、装飾目的の画像で意味を持たない場合は、空のaltを指定することもあります。
HTML<img src="images/deco.png" alt="">
画像の内容や役割に応じて、適切な代替テキストを設定しましょう。
8-5. セマンティックHTMLを意識する
セマンティックHTMLとは、要素の意味に合ったタグを使ってHTMLを書くことです。
たとえば、ページ上部にはheader、ナビゲーションにはnav、主要コンテンツにはmain、記事にはarticle、まとまりにはsection、下部にはfooterを使います。
HTML<nav>
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="about.html">会社情報</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
すべてをdivで囲むこともできますが、意味のあるタグを使うことで、検索エンジンや支援技術にページ構造を伝えやすくなります。
8-6. スマホ表示を考えてコーディングする
現在のWebサイトは、パソコンだけでなくスマートフォンで見られることも多いです。そのため、HTMLコーディングの段階からスマホ表示を意識することが大切です。
まず、head内にviewportを設定します。
HTML<meta name="viewport" content="width=device-width, initial-scale=1.0">
画像は画面幅に合わせて縮小できるように、CSSで調整します。
CSSimg {
max-width: 100%;
height: auto;
}
HTMLでは、無理に固定幅のレイアウトを前提にせず、スマホでも読みやすい構造を意識しましょう。
9. 初心者がつまずきやすいHTMLコーディングのミス
HTMLコーディング初心者は、些細なミスで表示が崩れたり、画像やCSSが反映されなかったりすることがあります。よくある原因を知っておくと、問題が起きたときに落ち着いて対処できます。
ここでは、初心者が特につまずきやすいミスを紹介します。
9-1. タグの閉じ忘れ
HTMLでよくあるミスが、タグの閉じ忘れです。
HTML<p>これは段落です。
<p>次の段落です。</p>
このように</p>を忘れると、ブラウザが自動的に補正することもありますが、意図しない表示になる場合があります。
正しくは次のように書きます。
HTML<p>これは段落です。</p>
<p>次の段落です。</p>
特に、div、section、ul、liなどのタグが増えると閉じ忘れが起こりやすくなります。インデントを整えながら書くとミスを見つけやすくなります。
9-2. ファイル名や保存場所の間違い
HTMLファイルや画像ファイル、CSSファイルの名前や保存場所を間違えると、正しく読み込まれません。
たとえば、HTMLでは次のように指定しているとします。
HTML<img src="images/photo.jpg" alt="写真">
この場合、imagesフォルダの中にphoto.jpgという画像が必要です。もしファイル名がPhoto.jpgやphoto.pngになっていると、表示されないことがあります。
ファイル名は半角英数字で統一し、大文字小文字や拡張子に注意しましょう。
9-3. 画像が表示されない原因
画像が表示されない主な原因は、src属性のパス間違いです。
よくある原因は、画像ファイルが指定した場所にない、ファイル名が違う、拡張子が違う、フォルダ名が違う、階層の指定が間違っているなどです。
たとえば、次のフォルダ構成の場合、
sample-site/
├── index.html
└── images/
└── cat.jpg
HTMLでは次のように書きます。
HTML<img src="images/cat.jpg" alt="猫の写真">
もしHTMLファイルと画像ファイルの位置関係が変わると、指定するパスも変わります。画像が表示されないときは、まずフォルダ構成とファイル名を確認しましょう。
9-4. CSSが反映されない原因
CSSが反映されない場合も、ファイルの読み込みパスが間違っていることが多いです。
たとえば、次のフォルダ構成の場合、
sample-site/
├── index.html
└── css/
└── style.css
HTMLでは次のように書きます。
HTML<link rel="stylesheet" href="css/style.css">
また、CSSファイルを保存していない、ブラウザのキャッシュが残っている、class名がHTMLとCSSで一致していない、CSSの書き方にミスがあるといった原因もあります。
HTML側のclassとCSS側のセレクタが一致しているかも確認しましょう。
HTML<p class="text">本文です。</p>
CSS.text {
font-size: 18px;
}
9-5. 文字化けが起きる原因
日本語が文字化けする場合、文字コードの指定が原因になっていることがあります。HTMLでは、head内に次のmetaタグを入れましょう。
HTML<meta charset="UTF-8">
また、ファイル自体の保存形式もUTF-8になっているか確認します。コードエディタの設定で文字コードを変更できる場合があります。
HTMLコーディングでは、基本的にUTF-8を使うと覚えておくとよいでしょう。
9-6. ブラウザごとの表示差
同じHTMLやCSSでも、ブラウザによって見え方が少し異なることがあります。特に、余白、フォーム部品、フォント、細かいレイアウトなどで差が出る場合があります。
初心者のうちは、まず主要なブラウザで大きな崩れがないか確認しましょう。Google Chromeで問題なく表示されても、SafariやFirefoxで違って見えることがあります。
実務レベルでは複数ブラウザでの確認が必要ですが、学習段階ではまずChromeなど1つのブラウザで基本をしっかり理解し、慣れてきたら他のブラウザでも確認するとよいでしょう。
10. HTMLコーディングの練習方法
HTMLコーディングを上達させるには、知識を読むだけでなく、実際に手を動かしてWebページを作ることが重要です。タグの意味を覚えるだけでなく、「どの場面でどのタグを使うか」を経験しながら身につけましょう。
ここでは、初心者におすすめの練習方法を紹介します。
10-1. まずは基本タグを手で書いて覚える
最初は、基本タグを手で書く練習をしましょう。コードをコピーするだけではなく、自分で入力することでタグの形や使い方を覚えやすくなります。
練習したい基本タグは、h1、h2、p、ul、ol、li、a、img、section、header、footerなどです。
たとえば、次のような簡単なコードを何度も書いてみましょう。
HTML<h1>HTMLの練習</h1>
<p>基本タグを使って文章を書いています。</p>
<ul>
<li>見出し</li>
<li>段落</li>
<li>リスト</li>
</ul>
基本タグに慣れると、ページ制作のスピードが上がります。
10-2. 簡単な自己紹介ページを作る
初心者におすすめの練習課題は、自己紹介ページです。自分の名前、プロフィール、好きなこと、スキル、SNSリンクなどをHTMLでまとめてみましょう。
自己紹介ページには、HTMLの基本タグをバランスよく使えます。
HTML<h1>自己紹介</h1>
<p>こんにちは。HTMLコーディングを勉強しています。</p>
<h2>好きなこと</h2>
<ul>
<li>Web制作</li>
<li>音楽</li>
<li>旅行</li>
</ul>
<h2>リンク</h2>
<a href="https://example.com">ポートフォリオを見る</a>
完成したら、CSSで色や余白を整えてみるとさらに練習になります。
10-3. 既存サイトを模写コーディングする
模写コーディングとは、既存のWebサイトを見ながら、似たような構造や見た目を自分で再現する練習方法です。HTMLとCSSの実践力を高めるのに効果的です。
初心者は、いきなり複雑なサイトを選ぶのではなく、シンプルな1ページのサイトやプロフィールページを選ぶとよいでしょう。
模写するときは、まずページ全体を観察し、ヘッダー、メインビジュアル、コンテンツ、フッターなどの構成に分けて考えます。そのうえで、HTMLで構造を作り、CSSで見た目を調整します。
完璧に同じにする必要はありません。大切なのは、Webページがどのような構造で作られているかを理解することです。
10-4. デザインカンプからコーディングする
デザインカンプとは、Webページの完成イメージを示したデザインデータのことです。実務では、デザインカンプをもとにHTMLとCSSでWebページを作ることがあります。
初心者にとっては少し難易度が上がりますが、模写コーディングに慣れてきたら、デザインカンプからのコーディングにも挑戦してみましょう。
デザインカンプを見るときは、まず大きなレイアウトを把握します。次に、見出し、本文、画像、ボタン、余白などを確認し、HTMLの構造に落とし込みます。
この練習をすると、実際のWeb制作に近い流れを体験できます。
10-5. 練習サイトや無料教材を活用する
HTMLコーディングは、無料で学べる教材も多くあります。オンライン学習サイト、公式ドキュメント、入門記事、動画教材などを活用すると、独学でも学びやすくなります。
練習サイトを使うと、課題に沿って手を動かしながら学習できます。最初は入門レベルの教材で基本タグを学び、次に小さなWebページを作る教材へ進むとよいでしょう。
ただし、教材を見ているだけではなかなか身につきません。学んだ内容をすぐに自分のHTMLファイルで試すことが大切です。
10-6. 作ったコードを公開して改善する
HTMLコーディングに慣れてきたら、作ったページを公開してみましょう。公開することで、実際のWebページとして確認でき、ポートフォリオとしても活用できます。
公開したコードを見直すと、不要なタグ、わかりにくいclass名、崩れやすい構造などに気づけます。可能であれば、他の人に見てもらい、改善点を教えてもらうのも効果的です。
HTMLコーディングは、作って終わりではありません。公開し、見直し、改善することで少しずつ上達します。
11. HTMLコーディングを効率よく学ぶコツ
HTMLコーディングは、正しい順番で学べば初心者でも十分に習得できます。ただし、タグを丸暗記しようとすると挫折しやすくなります。仕組みを理解しながら、小さく作って試すことが大切です。
ここでは、HTMLを効率よく学ぶためのコツを紹介します。
11-1. 丸暗記よりも仕組みを理解する
HTMLタグをすべて丸暗記する必要はありません。実務でも、わからないタグや属性は調べながら使います。
大切なのは、「見出しには見出しタグを使う」「段落にはpタグを使う」「画像にはimgタグを使う」という基本的な考え方を理解することです。
タグの意味を理解していれば、必要なときに調べて正しく使えるようになります。まずは頻繁に使うタグから覚え、少しずつ使えるタグを増やしていきましょう。
11-2. HTMLとCSSをセットで学ぶ
HTMLだけでもWebページは作れますが、見た目を整えるにはCSSが必要です。そのため、HTMLの基本構造を理解したら、早い段階でCSSも一緒に学ぶのがおすすめです。
HTMLは構造、CSSは装飾という役割分担を意識すると、コードが整理しやすくなります。
たとえば、HTMLでは次のように構造を作ります。
HTML<h1 class="title">HTMLコーディング</h1>
CSSでは見た目を指定します。
CSS.title {
font-size: 32px;
}
HTMLとCSSをセットで練習すると、Webページ制作の全体像がつかみやすくなります。
11-3. 検証ツールを使って確認する
ブラウザには、HTMLやCSSの状態を確認できる検証ツールがあります。Google Chromeの場合、ページ上で右クリックして「検証」を選ぶと開けます。
検証ツールを使うと、どのHTML要素にどのCSSが適用されているか、余白やサイズがどうなっているかを確認できます。
初心者のうちは難しく感じるかもしれませんが、少しずつ使ってみると、表示崩れの原因を見つけやすくなります。
HTMLコーディングで「なぜ表示が変わらないのか」「どの要素にCSSが効いているのか」を調べる習慣をつけましょう。
11-4. 小さなページを何度も作る
HTMLを学ぶときは、最初から大きなサイトを作ろうとしないことが大切です。まずは1ページだけの小さなサイトを何度も作りましょう。
たとえば、自己紹介ページ、商品紹介ページ、カフェの紹介ページ、イベント告知ページ、ブログ記事ページなどがおすすめです。
小さなページを作ることで、HTMLの基本構造、見出し、本文、画像、リンク、リストの使い方を繰り返し練習できます。
何度も作っているうちに、自然とタグの使い方やページ構成の考え方が身につきます。
11-5. エラーを調べながら解決する習慣をつける
HTMLコーディングでは、思い通りに表示されないことがよくあります。初心者にとっては戸惑う場面ですが、エラーを調べて解決する経験が上達につながります。
画像が表示されない場合はパスを確認する、CSSが反映されない場合は読み込み先やclass名を確認する、文字化けする場合は文字コードを確認するなど、原因を一つずつ切り分けましょう。
エラーを避けることよりも、エラーが起きたときに調べて直せる力を身につけることが重要です。
12. HTMLコーディングに関するよくある質問
ここでは、HTMLコーディングを始める初心者が疑問に感じやすいポイントをQ&A形式で解説します。
12-1. HTMLコーディングは独学でも習得できる？
HTMLコーディングは独学でも十分に習得できます。HTMLはWeb制作の基礎であり、学習教材やサンプルコードも多いため、初心者でも始めやすい分野です。
ただし、読むだけでは身につきにくいため、実際にコードを書いてブラウザで確認することが大切です。自己紹介ページや簡単なブログ記事ページなど、小さなページを作りながら学習しましょう。
独学でつまずいた場合は、エラー内容を検索したり、公式ドキュメントを確認したり、学習コミュニティを活用したりすると解決しやすくなります。
12-2. HTMLだけでWebサイトは作れる？
HTMLだけでもWebページを作ることはできます。見出し、本文、画像、リンクなどを配置すれば、最低限のWebページとして表示できます。
ただし、HTMLだけでは見た目がシンプルになりやすく、余白や色、レイアウトなどを細かく整えるにはCSSが必要です。また、動きのある機能を追加するにはJavaScriptを使います。
そのため、実用的なWebサイトを作るには、HTMLに加えてCSSも学ぶのがおすすめです。
12-3. HTMLコーディングの習得期間はどれくらい？
HTMLの基本だけであれば、数日から数週間ほどで理解できます。見出し、段落、画像、リンク、リストなどの基本タグを使って簡単なページを作るレベルなら、比較的短期間で習得できます。
ただし、実務レベルで正しいHTML構造、SEO、アクセシビリティ、CSSとの連携、レスポンシブ対応まで身につけるには、継続的な練習が必要です。
目安としては、まず1〜2週間で基本タグを覚え、1〜3か月ほどかけて複数のページを作りながら実践力を高めるとよいでしょう。
12-4. HTMLとCSSはどちらから学ぶべき？
基本的にはHTMLから学ぶのがおすすめです。HTMLでWebページの構造を作れるようになってから、CSSで見た目を整える流れが自然です。
ただし、HTMLだけを長く学び続けるよりも、基本を覚えたら早めにCSSも一緒に学ぶと理解しやすくなります。
たとえば、HTMLで見出しや文章を作り、CSSで文字サイズや余白を変更してみると、Webページがどのように作られているか実感しやすくなります。
12-5. コーディング初心者は何を作ればいい？
コーディング初心者は、まず小さくて完成させやすいページを作るのがおすすめです。
最初に作りやすいものとしては、自己紹介ページ、プロフィールページ、好きな本や映画の紹介ページ、カフェ紹介ページ、簡単なブログ記事ページ、ポートフォリオのトップページなどがあります。
大切なのは、完成度よりも最後まで作り切ることです。1ページ完成させるだけでも、HTMLの基本構造、タグの使い方、画像やリンクの指定、ブラウザ確認の流れを学べます。
まとめ
HTMLコーディングとは、HTMLタグを使ってWebページの構造を作る作業です。HTMLは、見出し、本文、画像、リンク、リスト、表などを配置し、Webページの内容に意味を持たせる役割があります。
初心者がHTMLコーディングを学ぶときは、まずHTMLの基本構造を理解し、h1、p、a、img、ul、li、sectionなどの基本タグを使えるようになることが大切です。そのうえで、CSSと組み合わせてデザインを整え、ブラウザで確認しながら修正する流れに慣れていきましょう。
HTMLコーディングは、独学でも十分に習得できます。最初から完璧なWebサイトを作ろうとせず、自己紹介ページや簡単なプロフィールページなど、小さなページを何度も作ることが上達への近道です。
正しい入れ子構造、わかりやすいclass名、画像のalt属性、セマンティックHTML、スマホ表示への配慮などを意識すれば、読みやすく管理しやすいHTMLを書けるようになります。
まずはindex.htmlを作成し、基本テンプレートを書いて、ブラウザで表示してみましょう。手を動かしながら学ぶことで、HTMLコーディングの基礎は確実に身についていきます。