Webページ作成に欠かせない言語の1つとして、HTML（HyperText Markup Language）が挙げられます。**HTMLの役割は、Webページの内容を構造化させることであり、文字や画像、動画、リンクなどの要素をバランス良くWebページ内に配置します。**

HTMLは基本的な構造がシンプルであり、習得難易度は比較的容易ですが、タグの種類やプロパティの書き方など覚えることが多いため、ある程度の勉強時間は必要です。

そこで、この記事では、HTMLの入門編として基礎知識や開発環境、基本構造について解説します。まずはHTMLの基礎知識から確認していきましょう。

*HTMLはハイパーテキスト記述言語です。*ハイパーテキストとは、複数の文書を相互参照するためのリンク（ハイパーリンク）機能を有する仕組みを指し、Webを始めとするWeb系システムで標準利用されています。

WebコンテンツのほとんどはHTMLで記述されており、HTTP通信プロトコルを用いて、WebサーバーとWebクライアント間でコンテンツの通信を行います。また、直接PCに格納されたHTML文書をブラウザで表示することも可能です。

HTMLの仕様は、Web Hypertext Application Technology Working Group（WHATWG）が策定し、World Wide Web Consortium（W3C）で勧告されていますが、*現在の仕様は、HTML Living Standardです。*

【参考】：[WHATWG HTML Living Standard](https://html.spec.whatwg.org/multipage/)

HTML5はなぜ廃止された？いつからなのか、仕様変遷も紹介！

*HTMLはハイパーテキストを記述する言語なので、テキスト文書を作成する環境があればすぐにでも開始できます。*具体的にはHTMLを編集するためのエディタ、およびHTMLを表示するブラウザの準備ができれば問題ありません。動作環境はクライアントPCで作業できれば十分です。

前述の通り、HTMLの開発環境で必要なものはテキストエディタとブラウザです。ここでは、この2つについて、具体的にどのようなものが必要なのか解説します。

**テキストエディタとは、テキストの入力や編集を行う際に利用するソフトのことです。**文字や記号の入力、編集、保存、プレビューなどが実行でき、テキストファイル以外にも、プログラミングを扱うファイルの編集も行えます。

テキストエディタは100種類以上あるとされており、その中から自分に合うエディタを選択します。PCのOSに対応していたり、日本語に対応していたり、拡張機能の有無やリサーチ情報は豊富かなど、エディタ選びにおける必須項目をピックアップしておきましょう。

【2024年版】初心者向けのHTML編集ソフト（エディタ）おすすめ9選

**ブラウザとはWebサイトを開くためのソフトウェアであり、Webサイトを開くには、Webサーバーと呼ばれるWebサイトを他者に提供しているサーバーと通信を行う必要があります。**

PC単体ではWebサーバーと通信は行えないため、ブラウザが必要です。ブラウザにはいくつか種類があり、代表的なものとしては、Microsoft EdgeやGoogle Chrome、Safari、Firefoxなどが挙げられます。それぞれ機能や性能が異なるため、使いやすいブラウザを選択しましょう。

HTMLの基本構造は、以下の要素から構成されます。

*◼︎文書型宣言*
・タグ：\<!DOCTYPE html>
・このテキストが最新HTMLであることを表す（他のバージョンを指定することも可能）

*◼︎html要素*
・タグ：\<html>\</html>
・head要素とbody要素から成り立つ

*◼︎head要素*
・タグ：\<head>\</head>
・文書ヘッダーの明示（ブラウザに表示されない部分）
・meta要素（文書情報）、link要素（他との関連情報）、title要素（タイトル情報）から成り立つ

*◼︎body要素*
・タグ：\<body>\</body>
・文書内容の明示（ブラウザに表示される部分）
・article要素から成り立つ（記事であることを明示）

各要素は<要素>として宣言し、</要素>として括ります。

*【使用例】*
```
<!DOCTYPE html>
<html>
　<head>
　　<title>この文章のタイトル</title>
　</head>
　<body>
　　ここに必要な文書内容を書きます
　</body>
</html>
```

残る作業は必要な体裁を整えたり見栄えを良くしたりする処理を行うだけです。なお\はコメントを表しますので適宜利用します。

**HTMLの要素とはHTMLの文書を構成するものであり、タグはその要素を認識するための記号（\<>\</>）を意味します。**各要素は、「開始タグ（\<>）」と「内容」、「終了タグ（\</>）」から成り立ちます。

さらに、要素に「属性」を追加指定することも可能です。属性とは要素で用いる各種設定を変更したり、動作を微調整したりするものを指します。

HTMLの基本構造の要素は以上です。あとは必要な要素を組み合わせるだけで、HTML文書が簡単に作成できます。

HTML文書の体裁を整えるために、以下の代表的な要素が用意されています。

*◼︎段落（ページレイアウト）の構成要素*
段落（ページレイアウト）の構成要素は、文書を構成する基本要素を指します。
・p：段落構成の明示
・pre：整形済みテキストとする
・hr：水平線を引く（終了タグなし）
・br：明示的な改行を行う（終了タグなし）

*【使用例】*
```
　　<p> 
　　 文章を入力します
　　<pre>整形済み文章です</pre>
　　文章を入力します<br>ここから次の行に改行されます
　　<hr>
　　</p> 
```

*◼︎見出しの構成要素*
見出しの構成要素は、見出しの種類を宣言します。
・h1～h6：見出しの指定、h1が最上位

*【使用例】*
```
　　<p> 
　　<h1>大見出しです</h1>
　　<h2>2番目の見出しです</h2>
　　中見出しの文章を入力します
　　中見出しの文章を入力します
　　<h3>3番目の見出しです</h3>
　　小見出しの文章を入力します
　　小見出しの文章を入力します
　　</p> 
```

*◼︎リスト（項目表示）の構成要素*
リストの構成要素は、リスト化された項目を指定した項目番号あり・なしで表示します。
・li：リスト項目の指定（終了タグは省略可能）
・ol：順序付きリスト、typeでリスト項目番号（1、A、a、I）を指定可能
・ul：順序なしリスト、typeでリスト項目マーク（disc、circle、sqare）を指定可能

*【使用例】*
```
　　<p> 
```

*◼︎表（テーブル）の構成要素*
表の構成要素は、表形式データ等の情報を表示します。本構成要素はHTML Living Standardで非推奨属性や廃止属性があり、CSSで代替可能です。
・table：表の構成要素を宣言する
・tr：表の行
・th：ヘッダのセル
・td：データのセル

*【使用例】*
```
　　<p> 
　　<h2>表の表示です</h2>
　　<table>
　　　<tr>
　　　　<th>表の項目</th>
　　　　<th>列1の項目</th>
　　　　<th>列2の項目</th>
　　　</tr>
　　　<tr>
　　　　<td>行1の項目</td>
　　　　<td>行1列1の情報を書きます</td>
　　　　<td>行1列2の情報を書きます</td>
　　　</tr>
　　　<tr>
　　　　<td>行2の項目</td>
　　　　<td>行2列1の情報を書きます</td>
　　　　<td>行2列2の情報を書きます</td>
　　　</tr>
　　</table>
　　</p> 
```

### 見栄え調整や関連情報の追加

HTML文書の見栄え調整や情報追加のために、以下の代表的な要素が用意されています。

*◼︎フォントの構成要素*
フォントの構成要素は、フォントを装飾します。
・i：斜体（イタリック）を指定
・b：太字（ボールド）を指定
・small：文字の縮小

*【使用例】*
```
　　<p> 
　　このフォントは<i>斜体</i>です
　　このフォントは<b>太字</b>です
　　このフォントは<small>小文字</small>です
　　</p> 
```

*◼︎リンク構成要素*
リンク構成要素はハイパーリンクを作成します。
・a：アンカーを指定し、ハイパーリンクを作成する

*【使用例】*
```
　　<p> 
　　<a href="https://sample.sample-domain.com/sample" >Sample URLのリンクで
</a>
　　</p> 
```

*◼︎画像構成要素*
画像構成要素は、画像を文書に埋め込む指示を行います。
・img：埋め込み画像の表示、終了タグはなし

*【使用例】*
```
　　<p> 
　　<img src="sample_picture.jpg" alt="サンプル画像">
　　</p> 
```

### 見栄えをさらに良くする方法

**HTMLの見栄えをさらに良くするために、CSSが用いられています。**CSS（Cascading Style Sheets）とは、構造化文書の見た目を記述するための言語であり、HTMLに代表されるマークアップ言語で記述された文書のスタイルを指定します。具体的には、文書のフォントやレイアウト・色等を指定し文書の表現力を高めます。

使用方法は、\<style>\</style>で括ったタグの間をstyle要素として処理する他、style属性やlink要素を用います。ここでは、フォントの指定や文字色・背景色、幅等が詳細に指定できます。

HTML Living Standardでは、文字の大きさや種類・色などの見栄えの指定はCSSが担当し、文書の情報構造はHTMLが担当します。そのため、HTMLとCSSを併用することでデザイン性の高いWebページが作成可能です。

ここでは、実際にHTMLで頻繁に使用するタグを3つ紹介します。それぞれ特徴やコード例も紹介するので、ぜひ参考にしてください。

*<p>タグは、HTMLにおいて段落を意味します。*HTMLでは改行の際に使用するタグがいくつか存在し、\<p>タグはブロック要素の区切りを表します。文章の一部を区切って表示する、最も基本的なタグの1つです。

書き方としては、\<p> で段落の開始を示し、\</p> で終了します。実際に使用してみると、以下のようになります。

```
<p>HTMLはウェブページを作成するための基本的な言語です。</p>
<p>CSSを使ってデザインを加え、JavaScriptを使用して動的なコンテンツを追加します。</p>
```

\<p>タグの改行方法としては、\<br>タグがあります。\<p>タグとの違いは、使用目的と動作にあります。\<p>タグは段落を区切りたい際に使用し、\<br>タグはテキスト内で改行したい際に使用します。

Webサイトでは、文章を読みやすくするために「見出し」を活用して内容ごとに区切りを設けます。*この見出しを作成するのが、\<h1>〜 \<h6> タグです。*

\<h1>や\<h2>などに入る数字は見出しの種類を表し、\<h1>は最も重要な見出しで、ページのタイトルや最上位のセクションタイトルに使用されます。

実際に使用してみると、以下のようになります。

```
<h1>これは最も重要な見出しです</h1>
<p>このページの内容について説明しています。</p>
<h2>これはサブセクションの見出し</h2>
<p>このセクションに関連する内容です。</p>
<h3>さらに細かいサブセクションの見出し</h3>
<p>この部分は更に詳しい情報が書かれています。</p>
```

*HTMLで画像を表示させたい場合は、\<img>タグを使用します。*画像をWebページに埋め込むための方法であり、画像のURLを指定することで、画像を表示させます。

\<img>タグは単一のタグであり、終了タグは不要です。実際に使用してみると、以下のようになります。

```
<img src="image.jpg" alt="画像の説明">
```

また、\<img>タグにはいくつか属性があり、画像のファイルパスやURLを指定する「src（source）」、画像の表示サイズを指定する「width」や「height」、画像の遅延読み込みを指定する「loading」などがあります。実際のコードは、「src」を例に挙げると以下のように記述します。

```
<img src="image.jpg" alt="サンプル画像">
```

HTMLを習得するには、Webサイトの模写や参考書の活用が有効です。ここでは、Webサイトを模写する手順やおすすめの参考書を紹介します。

HTMLは座学で培う知識も重要ですが、実際に手を動かしながら学習する方法が最も効果的です。それには、**Webサイトを模写する方法がおすすめです。**実際にサイトを模写することで、実践的なHTMLのスキルが身に付くことはもちろん、CSSの理解も深まります。

具体的な手順としては、まず模写したいWebサイトを選び、ブラウザの開発者ツールを使用します。Google Chromeの場合は、右クリックで「検証」を選択して開発者ツールを起動します。

「Elements」タブではページのHTML構造を見て、タグがどのように使用されているかをチェックし、「Styles」タブではCSSスタイルを確認できます。必要な部分のみテキストエディタにコピーし、実際に書き換えて模写を始めましょう。書き終えたらブラウザで表示してチェックし、ミスがあれば都度修正します。

**HTMLの知識やスキル習得においては、知識を体系的にまとめられた参考書を活用する方法が有効です。**ここでは、おすすめの参考書をいくつか紹介します。

*「HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門」*
本書では、納品レベルのWebサイトを作成するためのノウハウを紹介しています。HTML・CSSの実践的な知識を習得し、現場レベルのコーディングスキルを身に付けられる書籍です。

▪著者：小豆沢健
▪ページ数：576ページ
▪出版社：技術評論社
▪発売日：2025/1/14
【参考】：[HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門](https://direct.gihyo.jp/view/item/000000003609)

*「デザインの学校 これからはじめる HTML&CSSの本 ［改訂第3版］」*
本書はシリーズ58万部を突破した人気の参考書であり、0からHTML・CSSを習得したい人におすすめです。よく使用されるHTMLの要素やCSSのプロパティの意味が丁寧に解説されており、手順通りにコーディングしていくことで、Webページを1から作成できます。

HTMLはWebコンテンツで用いられる記述言語で、ハイパーテキストマークアップ言語と呼ばれています。基本構造は要素をタグで指定するだけのシンプルな構造をとっています。ここでは、初心者向けにHTMLの構造と構成要素を基礎から解説していきます。

HTMLはウェブコンテンツで標準的に利用されている記述言語を指します

HTML文書はテキスト形式ですのでテキストエディタがあれば編集可能です

HTMLに加えてCSSを併用することでコンテンツの見栄えが良くなります

HTML入門！開発環境やタグ、学習方法について解説

## HTML5プロフェッショナル認定試験とは

HTML5プロフェッショナル認定試験とは、**HTML5・CSS3・JavaScriptなどを用いたWebコンテンツ制作やWebアプリケーション、動的なWebコンテンツの開発・設計の技術や知識を測る試験です。**

当試験を主催するエルピーアイジャパン（LPI-Japan）は、他にもLinuCやOSS-DBなど知名度の高い資格の運営・認定を行っており、IT業界においての認識率も非常に高いのが特徴です。

なお、HTML5は既に廃止されており、「HTML Standard」あるいは「HTML Living Standard」となっていますが、HTML5プロフェッショナル認定試験の内容に影響はほとんどなく、認定は今後も有効です。

【参考】：[「HTML5プロフェッショナル認定試験」公式サイト](https://html5exam.jp/)

HTML5とは？特徴や変更点・関連用語・対応ブラウザを解説！

JavaScriptとは？特徴や何ができるのかを初心者向けに解説

### HTML5プロフェッショナル認定試験レベル1

HTML5プロフェッショナル認定試験レベル1は、Webの基礎知識・HTML・CSS・レスポンシブWebデザイン・APIの基礎知識が出題範囲となります。

基礎的で広範な知識が求められるため、Webデザイナーを目指している初心者から現役のエンジニアまで、取得する価値のある資格です。出題範囲のうち、重要性が高く頻出なものは下記が挙げられます。

*・HTML5マークアップ*
ブラウザにコンテンツを表示させるために、HTMLの仕様に沿った書式でHTMLコードを記述できることが問われます。文書型宣言・言語コード・文字コード・HTMLで使用可能な文字参照などの記述方法の理解が必要です。

*・HTML*
HTMLの要素や属性を理解し、適切なHTMLタグを使用してコーディングできていることが問われます。セクション・書式方法・ルビ・挿入・削除・グルーピングなどの理解が必要です。

*・CSSデザイン*
CSSを利用してデザインを実現する際に、どのような実現方法が適切か判断し、正しいコードを記述することが問われます。主にコンテンツのレイアウト・色・背景・罫線・テキスト・リスト・テーブル・アニメーションなどの記述方法の理解が必要です。

なお、HTML5プロフェッショナル認定試験レベル1では、JavaScriptに関する知識はほぼ問われません。

【参考】：[HTML5プロフェッショナル認定試験 レベル1 出題範囲｜試験概要](https://html5exam.jp/outline/objectives_lv1.html)

### HTML5プロフェッショナル認定試験レベル2

レベル2では、主にJavaScriptの知識・アニメーション・各種APIの深い仕様理解・通信・デバイスアクセス・パフォーマンスとオフライン・セキュリティモデルなどが出題範囲となります。知識の広さと同時に深さも求められる試験です。

レベル1とは異なり、JavaScriptの文法やES6（ECMAScript2015）以降の文法について問われ、プログラミング寄りの問題が重点的に出題されます。出題範囲のうち、重要性が高く頻出なものは下記が挙げられます。

*・JavaScript文法*
最も重要性が高く、最優先で対策すべき事項です。JavaScriptの構文や様々な概念の理解や効率的なコーディングが問われます。JavaScriptと他言語との違いや、演算子・配列・制御文・関数・型やオブジェクト・プロパティ・スコープなどの理解が必要です。

*・ES6（ECMAScript2015）以降の新機能*
追加された機能や表記法を用いてコーディングができるかが問われます。ローカル変数と定数・アロー関数・Promiseと非同期関数・可変長引数/残余引数・クラス・テンプレートリテラルなどの理解が必要です。

*・JavaScriptのイベントについて*
JavaScriptのページ読み込みや、ユーザ操作で発生するイベントやイベント処理を行うコードを記述することができるかが問われます。フォームイベント・キーボードイベント・マウスイベント・タッチイベントなどの各種イベントの理解が必要です。

【参考】：[HTML5プロフェッショナル認定試験 レベル2 出題範囲｜試験概要](https://html5exam.jp/outline/objectives_lv2.html)

<center>[エンジニア転職を成功させるため<br/>ぜひ*『マイナビIT エージェント』*をご活用ください！](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv12_2)</center>

## HTML5プロフェッショナル認定取得のメリット

HTML5プロフェッショナル認定は資格名に「HTML5」と名前がついていますが、HTMLに限らずJavaScriptやレスポンシブWebデザイン、各種APIの理解、グラフィクスなどさまざまなWeb関連の知識を求められるため、幅広いWeb知識を有することを証明できます。そのことから、以下のような取得メリットがあります。

エンジニアとして勤めていると自分が携わる業務範囲での知識は蓄積されますが、その業務から離れると1から学び始めることが多くあります。

HTML5プロフェッショナル認定の取得を目指すことによって、*現時点で自分は何を知っていて何を知らないのかを知ることができ、またWebに関する知識を網羅的に習得できます。*そのため、業務が変わっても順応できるスピードを早められるメリットがあります。

### 就職、転職活動に活かせる（初心者にもおすすめ）

新卒、もしくは転職でWeb系のプログラマーを目指しているのであれば、HTML5プロフェッショナル認定を取得しておくことは非常におすすめです。新卒や未経験からの転職の場合、フリーランスで仕事を受けた経験などがない限り実績を見せることは難しいでしょう。

HTML5プロフェッショナル認定を取得しておくと、*実務経験はなくともある程度の知識は保有していると判断される可能性が高いためです。*経験が浅ければ浅いほど、資格取得が有利に働きます。

<center>[あなたに合った企業選びをサポート致します。<br/>エンジニア転職のご相談はぜひ<br/>*『マイナビIT エージェント』*へ！](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv12_2)</center>

資格取得を企業に評価されれば、*昇格や昇給につながる可能性にも期待できます。*また、企業によっては資格手当や報奨金の制度を設けている場合もあるので、この点でも年収アップを狙えるでしょう。

HTML5プロフェッショナル認定試験が役立つ代表的な職種であるWebデザイナーの年収は、「マイナビエージェント職業別年収ランキング」での平均年収は441万円（※2025年1月執筆時点）、経済産業省2017年発表の「IT関連産業の給与等に関する実態調査結果」から近い職種のコンテンツクリエイタ/デザイナーを参考にすると、平均年収411万円と分かりました。

国税庁2020年発表の「民間給与実態統計調査」における民間企業平均年収は433万円なので、Webデザイナーは一般平均年収よりも高い場合もあれば、低い場合もあることが分かります。そこで認定を取得することで、これを上回る収入につながると考えられます。

【参考】：[マイナビエージェント職業別年収ランキング デザイナー（WEB/モバイル）](https://mynavi-agent.jp/helpful/income/category/creative_03.html?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv12_2)
※【平均年収 調査対象者】 2015年〜2016年末までの間にマイナビエージェントにご登録頂いた20代・30代の方
【参考】：[IT関連産業における給与水準の実態① ~ 職種別（P7）](https://warp.da.ndl.go.jp/info:ndljp/pid/11623215/www.meti.go.jp/press/2017/08/20170821001/20170821001-1.pdf)
【参考】：[民間給与実態統計調査-国税庁](https://www.nta.go.jp/publication/statistics/kokuzeicho/minkan2020/pdf/002.pdf)

就職や転職活動等にも言えることですが、副業開始当初は個人としての実績が浅いため、ポートフォリオに加えて、**HTML5プロフェッショナル認定を取得していると採用側から見てかなりポイントが高いでしょう。**

Web系コーダー・プログラマー等の副業を考えている方で、なかなか採用されず困っている場合はぜひ挑戦してください。

## HTML5プロフェッショナル認定試験を活かせる職種

ここまでも何度か触れてきましたが、改めてHTML5プロフェッショナル認定試験が活かせる職種について解説していきます。認定される知識やスキルが直接的に役立つ職種には以下のようなものがあります。

*・Webデザイナー*
WebデザイナーはWebページのデザインを行う職種です。業務の幅を広げるためには、デザインスキルだけでなくHTMLを基盤としたコーディング技術も必要になります。

<center>[*Webデザイナーの転職・求人情報を見る　＞*](https://mynavi-agent.jp/jobsearch/job3_0855113/result.php?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv18)</center>

*・Webディレクター*
Webディレクターは、Webコンテンツの制作現場を統括する職種です。クライアントやエンジニアとのやり取りには、Web技術全般の知識が欠かせません。

<center>[*Webディレクター・Webプロデューサーの転職・求人情報を見る　＞*](https://mynavi-agent.jp/jobsearch/job3_0855111/result.php?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv18)</center>

*・UI/UXデザイナー*
UIは「User Interface」、UXは「User Experience」の略で、ユーザーにとって使い心地の良いインターフェースを通して顧客体験をデザインするのがUI/UXデザイナーの仕事です。ユーザー目線での顧客体験構築が求められるため、Webデザイナーより高度なスキルが必要となる傾向があります。

<center>[*UI・UXデザイナーの転職・求人情報を見る　＞*](https://mynavi-agent.jp/jobsearch/job3_0855115/result.php?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv18)</center>

*・マークアップエンジニア*
Webデザイナーのデザインをマークアップ言語を用いて形にしていくのが、マークアップエンジニアです。HTML5プロフェッショナル認定試験では、マークアップに関するほとんどの内容を網羅できます。

*・フロントエンドエンジニア*
フロントエンドエンジニアは、Webサイトやアプリケーションのユーザー側の表示を担当します。マークアップエンジニアと似ていますが、フロントエンドエンジニアの方が業務範囲が広いのが特徴です。

<center>[*マークアップエンジニア・コーダー・フロントエンジニアの転職・求人情報を見る　＞*](https://mynavi-agent.jp/jobsearch/job3_0855116/result.php?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv18)</center>

## HTML5プロフェッショナル認定試験の勉強方法

HTML5プロフェッショナル認定試験を勉強する方法はプログラミングスクールなどもありますが、参考書で学習するのが一般的です。**レベル1・レベル2共に難易度はベンダー資格と比較してもそれほど高くなく、自己学習で十分に合格可能です。**

おすすめの参考書と併せてWeb問題集を下記に紹介しますので、ぜひ参考にしてください。

HTML5プロフェッショナル認定試験の参考書は、LPI-Japanの審査に合格した「HTML5認定教材」を用いるのがおすすめです。

*・HTML教科書 HTML5プロフェッショナル認定試験 レベル1 スピードマスター問題集 Ver2.5対応*
時間のない方はこの参考書1冊でも十分合格できるほどの問題・情報量で、本番の試験に近い問題を解いていくことができるため大変おすすめの本です。時間に余裕があれば、ぜひ繰り返し問題を解いてレベルを上げましょう。

▪著者： 株式会社富士通ラーニングメディア、抜山 雄一、七條 怜子、結城 陽平、竹川 夏実
▪ページ数：320ページ
▪出版社：翔泳社
▪発売日：2022/12/07
【参考】：[HTML教科書 HTML5プロフェッショナル認定試験 レベル1 スピードマスター問題集 Ver2.5対応｜翔泳社](https://www.shoeisha.co.jp/book/detail/9784798176468)

*・HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集　Ver2.5対応版*
先述した問題集に加え、問題集で分からない箇所や周辺知識も学んで実務に活かしたい方は、テキストを使用することをおすすめします。図解や表形式で分かりやすくまとまっているため、理解が深まりやすいです。

▪著者：大藤 幹、 鈴木 雅貴
▪ページ数：312ページ
▪出版社：マイナビ出版
▪発売日：2022/09/26
【参考】：[HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集　Ver2.5対応版｜マイナビブックス](https://book.mynavi.jp/ec/products/detail/id=132028)

*・HTML5プロフェッショナル認定試験 レベル2 対策テキスト&問題集　Ver2.5対応版*
レベル2の認定教材はこちらの1冊のみです（2025年1月執筆時点）。レベル1と同じくテキストと問題集の構成になっているので、しっかりと知識を固めることができます。レベル2で重要となるJavaScriptもこちらでカバーできます。

▪著者：右寺 隆信、 立川 敬行、 石井 博幸
▪ページ数：368ページ
▪出版社：マイナビ出版
▪発売日：2022/11/18
【参考】：[HTML5プロフェッショナル認定試験 レベル2 対策テキスト＆問題集　Ver.2.5対応版｜マイナビブックス](https://book.mynavi.jp/ec/products/detail/id=133327)

公式の認定教材には、Web問題集もあります。HTML5プロフェッショナル認定試験では過去問集がないため、こういったサンプル問題で数をこなすのが有効です。

体系的に知識を身につけるために始めは書籍を用いて勉強するのがおすすめですが、その後は試験本番に備えて問題集で慣れておくと良いでしょう。認定教材となっているWeb問題集は以下の3つです。

*・PolariStation「HTML5プロフェッショナル認定試験レベル1(Ver.2.5)」*
IT資格試験に特化したWeb問題集サービスを展開しているPolariStationの問題集です。有資格者の現役エンジニアが作成・監修を行なった回答・解説付きの問題集で、模擬試験も含まれています。

【参考】：[対応資格と料金｜PolariStation](https://polaristation.com/pricing-table/)

*・Ping-t「最強WEB問題集HTML5プロフェッショナル認定資格 レベル1(v2.5)」*
約480問を収録したIT試験学習サイト「Ping-t」の問題集です。試験で出題されるほぼ全てのHTML要素に、実際のソースとサンプルWebページを付けて解説されているのが特徴です。

【参考】：[教材｜Ping-t](https://mondai.ping-t.com/g/question_subjects)

公式サイトによると、*レベル1の合格に必要な勉強時間は3ヶ月〜半年程度、レベル2では半年〜1年程度（レベル1の認定取得を前提）と言われています。*

ただし、ある程度の関連知識やスキルがある場合には、レベル1は約40時間程度の勉強でも合格できると言われており、1日1時間の勉強でも1ヶ月強で認定を取得できる計算です。レベル2も同様で、50時間以上の勉強が必要とされていますが、人によっては3か月程度の期間でも十分な場合もあるでしょう。

また、HTML5プロフェッショナル認定試験受験者数や合格率、合格基準などは公表されていませんが、7割程度の正答率で合格できると言われていますので、勉強中の1つの目安とすると良いでしょう。

【参考】：[HTML5プロフェッショナル認定試験 レベル1について（Ver2.5）｜試験概要](https://html5exam.jp/outline/lv1.html)
【参考】：[HTML5プロフェッショナル認定試験 レベル2について（Ver2.5）｜試験概要](https://html5exam.jp/outline/lv2.html)

## HTML5プロフェッショナル認定試験の受験方法

HTML5プロフェッショナル認定試験の受験方法には2パターンあり、**自分の好きな試験会場を選択して現地で受験するか、オンラインでの受験も可能です。**申し込みはどちらもHTML5プロフェッショナル認定試験の公式サイトより、Webもしくは電話で申し込むことができます。

なお、申し込みの際には、EDUCO-IDというアカウントを作成する必要があります。受験料は16,500円（税込）です（2025年1月執筆時点）。

【参考】：[受験申込｜「HTML5プロフェッショナル認定試験」公式サイト](https://html5exam.jp/register/)

申し込みの際に、全国にある試験センターの中から希望の試験センターを選ぶことができ、試験センターが決まるとその試験センターの空き日程を選択する、といった流れで申し込みが可能です。

試験センターによって会場の雰囲気や使用するPCの違いはありますが、一般的に試験会場では教室のようなスペースに複数人間隔を開けて座れるようになっており、各々自分のテストをPCで受験する流れです。

【参考】：[ピアソンVUE：テストセンターリスト](https://www.pearsonvue.co.jp/Documents/Japan-Downloads/TC_List/pvue_jp_TC_all.aspx)

近年では一定の基準を満たせば、自宅や好きな場所でオンライン受験することが可能になりました。一定の条件とは、静かで1人になれる場所・要件を満たすPC・Webカメラ・インターネット接続・本人確認書類をWebカメラで提示できることなどがあります。

いつもの自分が学習している環境で受験することができれば、集中できて合格により近づけるかもしれません。気になる方はオンライン受験も検討してみてください。

【参考】：[オンライン試験のご案内｜「HTML5プロフェッショナル認定試験」公式サイト](https://html5exam.jp/ibt/)

## Webの将来性を見据えてHTML5プロフェッショナル認定試験に挑戦しよう

Webは一層進化が進み、次世代の分散型インターネット「Web3.0」も台頭するなど、ますます興隆を見せています。

近年ますます進化を見せるWeb関連技術により、その基礎知識・技術力はプログラマーのみならず、Webに携わる幅広い職種の人々に求められるようになってきています。知識力・技術力の証明に是非、HTML5プロフェッショナル認定を取得してみてはいかがでしょうか？

HTML5プロフェッショナル認定試験では、HTML・CSS・JavaScriptなど幅広い知識を身につけることができる

HTML5プロフェッショナル認定試験に合格することでスキル証明ができ、転職や就職にも役に立つ

HTML5プロフェッショナル認定試験の勉強は、プログラミングスクールに通わずとも独学でできる

HTML5プロフェッショナル認定試験とは？試験内容や受験方法を解説

## HTMLとCSSは独学で習得できる？

Webサイトやアプリ開発において、HTMLとCSSのスキルや知識は欠かせません。これらの言語は制作物の見栄えに大きく影響するため、ITエンジニアはもちろん、Webデザイナーなどのクリエイターなども習得しておきたいプログラミング言語です。

*これからHTMLとCSSを勉強したい場合、スクールなどには通わずに独学で習得できるのでしょうか。*この記事では、HTMLとCSSの学習において独学が可能なのか、学習方法やおすすめの参考書について紹介します。また、後半ではHTML・CSS以外に身につけたいスキルについても解説しますので、ぜひ参考にしてください。

### 学習のポイントを絞ることが大事

HTMLとCSSを独学で習得する場合、大事なのは「学習のポイントを絞ること」です。詳しくは後述しますが、例えば習得において最初から完璧な理解を求めないようにしたり、エディタを活用してコーディングを楽にしたりするなど、どれも共通点は頑張りすぎないことです。

プログラミングの学習は挫折しやすい側面があるため、習得の難易度に関わらず、どこかで力を抜く箇所を設定することでモチベーションが維持しやすくなるでしょう。また、便利なツールなどを頼り、効率的な学習を意識するのも重要です。

そもそもHTML・CSSでできることは、どういったことがあるのでしょうか。HTMLとCSSは何が違うのか、それぞれどのような箇所で使われているのか詳しく説明します。

**HTMLとは「Hyper Text Markup Language」の略で、Webサイトの文書作成やレイアウト調整に使われる言語です。**

例えば、文章に見出しをつける・画像を挿入する・ボタンやリンクなどの位置を変更するといったことが可能です。HTMLはWebサイト制作に欠かせないものであり、WebエンジニアやWebデザイナーを目指すなら優先的に習得したい言語です。

HTMLではタグというものを使ってレイアウトの調整を行います。例えば、```<B>```というタグを使うことで指定した文章を太字にすることが可能です。HTMLを扱う場合、タグの使い方を一通りマスターする必要があります。

HTMLでできることは少ない？できないことやタグも一覧でまとめた

CSSとは「Cascading Style Sheets」の略で、Webサイトのレイアウト調整に使われる言語です。HTML単体でもレイアウト調整は可能ですが、ソースコードが煩雑になってしまうことがあるため、レイアウト調整はCSSの方で行うことが多いです。

また、**CSSの方がWebサイトの色や形を変更したり場所を入れ替えたりといった調整が簡単に行えます。**CSSもWebサイト制作に携わるなら習得するべきスキルでしょう。

CSSでは、セレクタ・プロパティ・値の3つを指定することでレイアウト調整を行います。例えば、「p {color: red; }」と記述することで、pタグの色（color）を赤（red）に変更することが可能です。HTMLと違いpタグ箇所をまとめて変更できるため、効率的にレイアウト調整ができます。

CSSでできること一覧！HTMLやJavaScriptとの違い、メリットも解説

HTML・CSSを習得する上での難易度は、そこまで高くはありません。ITスキルのある方（ITの基礎知識がある・プログラミング言語を1つ程度習得している）であれば、1日2〜3時間の学習で、2週間程度でブログサイトが作れるレベルには達することができます。*IT知識のない初心者の方でも1ヶ月程で習得できるでしょう。*

HTML・CSSを習得するには、とにかくひたすら実践的にコードを書く方法がおすすめです。参考書や学習サイトの活字を読むだけでは習得しにくく、手を動かして知識を後から補足する体系的な学習方法が身につきやすくなります。

まずはどのようなWebサイトやアプリを作成したいのかを明確にし、それができる方法を紹介している参考書や学習サイトを活用しましょう。

HTML入門！初心者向けに基礎コード・文法一覧・勉強方法を解説！

CSSとは？概要や基本書式、具体的な記述方法について解説！

### フロントエンドエンジニアの年収

HTMLとCSSを頻繁に扱うITエンジニアとして、フロントエンドエンジニアを例に挙げて平均年収を算出してみました。

「マイナビエージェント職業別年収ランキング」によるフロントエンドエンジニアの平均年収は385万円（※2023年4月執筆時点）、経済産業省2017年発表の「IT関連産業の給与等に関する実態調査結果」から近い職種のコンテンツクリエイタ/デザイナーを参考にすると、平均年収411万円と分かりました。

国税庁2020年発表の「民間給与実態統計調査」における民間企業平均年収は433万円なので、フロントエンドエンジニアは一般平均年収と比較すると、やや低めであることが分かります。

フロントエンドエンジニアは、スキル・資格・実績によって年収の幅が大きい職種であるため、年収アップにはこれらを充実させることが重要です。**おすすめの資格としては、Webクリエイター能力認定試験があります。**HTML・CSSを扱うエンジニアであれば、取得して損はないでしょう。

【参考】：[マイナビエージェント職業別年収ランキング](https://mynavi-agent.jp/it/jobindex/05.html?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv12_2)
※【平均年収 調査対象者】2020年1月～2020年12月末までの間にマイナビエージェントサービスにご登録頂いた方
【参考】：[IT関連産業における給与水準の実態① ~ 職種別（P7）](https://warp.da.ndl.go.jp/info:ndljp/pid/11623215/www.meti.go.jp/press/2017/08/20170821001/20170821001-1.pdf)
【参考】：[民間給与実態統計調査-国税庁](https://www.nta.go.jp/publication/statistics/kokuzeicho/minkan2020/pdf/002.pdf)
【参考】：[Webクリエイター能力認定試験](https://www.sikaku.gr.jp/web/wc/)

## HTML・CSSを最短で学ぶおすすめの方法

続いて、HTML・CSSのおすすめ勉強方法を解説します。HTML・CSSを実務レベルまで上げていく効率的な方法をまとめましたので、これから勉強をはじめる方はぜひ参考にしてください。

まずは、学習サイトで基礎を学ぶのがおすすめです。オンラインで学習できるサービスには様々な種類があり、HTML・CSS未経験者向けに基礎に絞って分かりやすくまとめられています。いきなり参考書に手を出すと難しくて挫折する可能性があるので、まずは学習サイトで基礎を習得しましょう。

また、*学習サイトはスマホでも閲覧できるため、移動中や休憩中に手軽に学習できるのもメリットです。*費用については、無料だったり月額1,000円程度で利用できたりするサービスが多いので、まずは1度試してみましょう。

学習サイトで基礎を習得したら、参考書で応用を学びましょう。HTML・CSSの細かいタグの知識を参考書で補強します。**HTML・CSSの参考書には様々なものがありますが、できるだけ出版日が新しいものを選んでください。**

なぜなら、HTML・CSSはバージョンによって書き方が少しずつ異なるため、古い本だと今は使われていない書き方を学んでしまうからです。参考書は辞書としても活用できますので、1冊は手元に置いておきましょう。

HTML/CSSを費用をかけずに学べるおすすめの入門書15選！

HTML・CSSの文法をある程度覚えたら、サイトを模写してみましょう。*好きなWebサイトのソースを確認し、コードを実際に書いて自分の環境で実行します。*

サイトを模写することで実践的なHTML・CSSのテクニックを知ることができたり、見やすいサイトデザインにするにはどうすれば良いか分かったりするメリットがあります。模写を繰り返し、自分だったらどうするかを考えながらデザインを変更し、デザインスキルを高めていきましょう。

**模写が終われば、実際に1からサイトを作りましょう。**まず、作りたいWebサイトの種類を決めます。練習では自分のプロフィール紹介など簡単なものがおすすめです。次に、サイトデザインをどうするかPowerPointなどにまとめます。

後は、それを参考にコーディングを行います。分からない箇所は随時参考書で確認し、知識の穴埋めを行いましょう。1からサイトを作ることでWebサイト制作の知識がまんべんなく身につき、実務レベルまで到達することが可能です。

続いて、HTML・CSS独学のポイントを解説します。HTML・CSSをより効率的に習得するために何に気をつけるべきかをまとめました。

### 最初から完璧な理解を求めない

はじめからHTML・CSSを完璧に理解する必要はありません。ベテランのエンジニアであっても、HTMLの細かいタグなどを全て覚えている人は少ないからです。

**ある程度基礎をマスターしたら、制作物の作成に取り掛かってください。**その方がHTML・CSSを学ぶ楽しさも実感できますし、実務レベルに到達する速度も早くなります。

### 参考書を見ながら書いて良い

マークアップ言語の記事（1ページ目）