*[【マイナビITエージェント】あなたの転職活動を無料でサポートいたします](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=banner&utm_campaign=acv01)*

## HTML編集ソフト（エディタ）を活用する

HTML/CSSを学び始めると、HTML作成ツールとしてHTML編集ソフトが必要になってきます。ここでは、*HTML/CSSの初心者の方に向けて、使い勝手が良く、GUIに優れたHTMLエディタを紹介*していきます。この記事を参考に、皆さんに合うHTMLエディタ選定の参考にしてください。

### HTMLエディタ（編集）ソフトとは

HTMLエディタとは、HTMLの作成ツールと考えてください。**HTMLエディタは、HTML/CSSの作成や編集を効率的に行えるテキストエディタ**です。
WindowsやMacに標準搭載のテキストエディタは、主にテキストの編集を行うためのアプリですが、*HTMLエディタでは、ソースコードの入力補助・タグの自動補完・エラーチェック・ファイル連携などの機能*が加わります。
これらの機能を用いて、効率的なHTML記述やWebページの制作を行えますので、HTML/CSSを日常的に使うエンジニアの方にはHTMLエディタの利用がおすすめです。

### なぜHTMLエディタにこだわる必要があるのか

Windwos標準の「メモ帳」、Mac標準の「テキストエディタ」でもHTML/CSSの作成や編集は可能です。
ただし、Macの「テキストエディタ」で扱えるファイルのデフォルトがリッチテキスト形式のため、テキスト形式への変換の手間が掛かります。いずれのソフトも、HTML/CSSの作成や編集に最適とは言えません。

*ITエンジニア、プログラマーは常に時間との勝負です。しかも、スピードだけではなく高品質を求められます*。完成したシステムや、プログラムの品質とボリュームで評価をされます。
**ITエンジニアは高い生産性が求められるため、より高い生産性を実現する上で使い勝手の良いHTMLエディタに出会う必要があります**。自分に合う良いエディタを使うことが、自らの仕事の生産性を上げるために欠かせません。

では、HTMLエディタを使うことで、具体的にどんなメリットがあるのでしょうか？自身に合ったHTMLエディタを探す前に、HTMLエディタの一般的なメリットについて確認しておきましょう。

HTMLは記述ミスをしても思い通りの表示がされないだけで、プログラムのように重大なエラーにはなりにくいです。そのため、うっかりミスに気付かずに記述を済ませてしまうことがあります。しかし、*仕事でHTMLを記述する際に、そのようなミスは許されません*。

その点、**HTMLエディタは自動補完機能が付いており、入力ミスや入力漏れを防いでくれ、HTMLの記述がスムーズに行えるのがメリットです**。自動補完機能とは、開始タグを打つと自動的に終了タグが記述されるような機能です。

HTMLは階層構造が複雑になればなるほど、記述ミスが起きやすくなります。**HTMLエディタでは、複雑な階層も構成要素ごとに異なる色で表示してくれるなど、構成が分かりやすくなり、記述ミスが減ります**。こうした芸当は、一般のテキストエディタにはできません。

### Webページをプレビューできる

一般のテキストエディタでHTMLを記述する場合は、Web形式のファイルで一旦保存し、そのファイルをWebブラウザで開いて正しく表示されているかどうかを確認をします。

一方、**HTMLエディタにはプレビュー機能があり、HTMLを記述しながらプレビュー機能でWeb画面を同時に確認できる**のです。微調整もすぐに結果が分かるので、非常に便利です。

### CSSやJavaScriptの記述に利用できる

最近のWebサイトの作成では、HTMLに加えて「CSS」が必須であり、さらに「JavaScript」も扱うケースが多くなっています。ご存知の通り、「CSS」はWebのデザインを作り、「JavaScript」はWebに動きを与えます。
*大半のHTMLエディタはHTML以外にCSSやJavaScriptにも対応*しています。さらに複数のプログラム言語を扱えるため、**HTMLエディタの機能や操作を覚えると、仕事の効率が一気に上がります**。

以上のように、HTMLエディタは便利なツールですが、*HTMLエディタは大別すると以下の2種類*があります。それぞれメリット、デメリットがあるので環境に応じて使い分けると良いでしょう。

### インストールして利用するタイプ

HTMLエディタのソフトをネット上からダウンロードし、**インストールして使うタイプのエディタソフト**です。
一旦インストールすれば、*オフラインでも利用でき、しかもPC上で独立して動くため動作が軽いといったメリット*があります。
一方、*インストールの手間が掛かり、作成したデータの管理を自分のパソコン上で行わなければならず、共同作業に向かない点はデメリット*です。

### オンラインで利用するタイプ

ネットワークに接続したパソコンの**Webブラウザ上で利用するHTMLエディタ**です。*インストール不要、Web上で管理でき、場所に縛られず利用できるためリモートワークや共同作業では便利*です。
反面、ネットワークに依存するため*ネットワークの状況次第では使えない、動作が重くなるなどのデメリット*があります。
無料のオンラインHTMLエディタを検討したい方は、以下のサイトが参考になります。

*【参考】: [2021年の10の最高の無料オンラインHTMLエディタとテスターツール](https://ja.myservername.com/10-best-free-online-html-editors)*

## HTMLエディタを選ぶ際のポイント

HTMLエディタは相当の数が存在しており、それぞれ特徴があり、自分に合ったエディタを見つけるのは簡単ではありません。
ここでは、*数あるエディタの中から、自身に適したエディタを見つけるためのポイント*について説明をします。自分に合うエディタを見つけるための参考になれば幸いです。

### 自分の使っているOSに対応しているか

エディタを選ぶ際には自分が普段使っている**パソコンのOSに対応したHTMLエディタか否かを確認する必要**があります。選定や検討で無駄がないよう、自分のパソコンのOSや、OSのバージョンに合ったエディタを選ぶようにしましょう。

多くのHTMLエディタは外国製品であり、標準製品は英語での表記が一般的です。**英語に不安がある方は、日本語対応のエディタを選ぶのが無難**です。
英語版のHTMLエディタでも日本語化キットなどがあれば簡単に日本語化できますので、日本語化の可否については確認するようにしましょう。

それぞれのHTMLエディタには製品ごとに異なる標準機能、拡張機能があります。自身のレベルが上がってくると、追加機能が必要になる場合もあります。**標準機能や拡張機能の内容、ツールの有無なども確認しておいた方が良い**でしょう。
エディタは慣れるに従って、使い勝手が変わっていきます。*自分が求める機能が整っていると長く使えますので、よく比較検討してから選びましょう*。

### 調べたい時にすぐに調べられるか

HTMLエディタは使い慣れるまでにさまざまな疑問や壁にぶつかります。しっかりした解説サイトや情報共有の場があると早く解決できます。**調べたい時にすぐに調べられるのは、エディタ選択の際の重要な条件**です。サポートサイト、解説サイトの有無はしっかり確認しておきましょう。

## 初心者におすすめしたいHTMLエディタ5選

これから、**初心者から中級者まで幅広く利用されている人気のHTMLエディタを5つに絞って紹介**します。基本的には無料で利用できるエディタを中心に紹介しますが、*一定期間利用すると有料になるもの*もありますので、予算に応じて検討してみてください。

**「Atom」はソフトウエア開発プラットフォームのGitHubが開発したHTMLエディタ**です。HTML以外にも多くのプログラム言語に対応しており、ITエンジニアにはよく知られたツールです。
HTMLでは、自動的にテンプレートが表示され、簡単な操作でコーディングができます。*拡張機能も豊富で、自分好みのエディタにカスタマイズできる*点も魅力です。

プログラミングを動画で学べる「ドットインストール」を入れると、動画を見ながら勉強もできるため、効率的なプログラミングの学習が可能です。海外製エディタですが、拡張機能で日本語表示も可能です。

*▪公式サイト：[https://atom.io/](https://atom.io/)*
*▪対応OS：Mac、Windows、Linux*
*▪料金：無料で使用できます。*

**「サクラエディタ」は、Windows向けの高機能でシンプルなHTMLエディタ**です。日本人による開発であり、日本語の会議室や情報共有の場もあります。また*GitHub上にあることから、開発に参加することもできます*。
サクラエディタには、キーワードの強調・アウトライン解析・補完入力などの特徴的な機能があります。

*▪公式サイト：[https://sakura-editor.github.io/](https://sakura-editor.github.io/)*
*▪対応OS：Windows*
*▪料金：無料で使用できます。*

**「Visual Studio Code」は、マイクロソフトが2015年にリリースした比較的新しいHTMLエディタ**です。マイクロソフト製だけに安心感があります。
HTML以外にも、*JavaScript・Python・PHP・Java・C#*などの主要なプログラミング言語に対応可能で、プログラマーやエンジニアの強い味方となるでしょう。

*▪公式サイト：[https://azure.microsoft.com/ja-jp/products/visual-studio-code/](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)*
*▪対応OS：Windows、Mac、Linux系*
*▪料金：無料で使用できます。*

**「webstorm」はJetBrains社提供のHTMLエディタですが、CSSやJavaScriptにも対応**しています。強力なコード補完機能やリアルタイムのJSエラー検知、デットコードの検出などの優れた機能が特徴です。

またエディタ内にコマンドライン機能を備えており、都度コマンドプロンプトを起動させる必要がなく、*webstormだけでWeb制作のほとんどを担えます*。

*▪公式サイト：[https://www.jetbrains.com/ja-jp/webstorm/](https://www.jetbrains.com/ja-jp/webstorm/)*
*▪対応OS：Windows、Mac、Linux系*
*▪料金：最初の30日は無料で使えますが、以降は月払い1,490円、年払い14,900円（2年目¥11,900、3年目以降¥8,900）*

**「Sublime Text」は豊富な拡張機能、カスタマイズの自由度が高く、しかも動作が軽いことでエンジニアには人気が高いことで有名**です。
日本語化も可能ですが、拡張機能の利用にはコマンドラインの利用が必要で、*単純にHTML/CSSのみを記述し、プレビューするというレベルでの使い方を求める方にはやや難しく感じる*かもしれません。
他、主要なプログラミング言語にはほぼ対応しており、プログラマーの方は重宝するでしょう。

*▪公式サイト：[https://www.sublimetext.com/](https://www.sublimetext.com/)*
*▪対応OS：Windows、Mac、Linux*
*▪料金：個人ライセンスであれば、半永久的に無償で利用できますが、登録から3年経過した後にバージョンアップを行うには、ライセンス購入（80ドル）が必要です。*

## 自分好みのエディタを見つけて、快適なコーディングを実現しよう

この記事では、おすすめのHTMLエディタについてご紹介しました。仕事ができるエンジニアは必ずお気に入りのエディタを持っています。良いエディタに出会うことが皆さんの活躍に大いに役立ちますので、当記事を参考に皆さんご自身にとって最適なエディタを見つけていただければ幸いです。

ただし、*職場によっては自分に合ったエディタを使用できない可能性がある*ことは留意しておくべきです。ルールが厳しい職場だと、エディタなどを自由にダウンロードすることができず、用意されているツールだけで開発を行うことも少なくありません。

プライベートでよく使っているエディタの機能が使えず、仕事でストレスを感じる方も中にはいらっしゃいます。これからエンジニアとして活躍したい、違う職場へ転職したいと考えている方は、**会社側が提供している職場環境にも気を配っておくといいでしょう**。

「そんな細かいところまで気を配る余裕がない！」という方は、ぜひ**『[マイナビITエージェント](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv09)』までご相談ください**。マイナビITエージェントは、あなたの快適な職場探しのため、全力でサポートいたします。

<center>[相談しづらい転職のアレコレは<br/>
ぜひ*『マイナビITエージェント』*へ！](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv09)</center>

HTML/CSSを学ぶと、多くの方が使い勝手の良いHTMLエディタを必要と感じるようになります。ここでは、HTML/CSS初心者の方に向け、おすすめのHTMLエディタを5つ紹介していきます。自身に合うHTMLエディタを見つけてHTMLの達人を目指してください。

HTML/CSSを効率的・効果的に作成するためには、HTMLエディタを利用することが早道になる。

HTMLエディタにはオンライン・インストールタイプがあるが、状況に応じて使い分けるとよい。

HTMLエディタはさまざまなプログラム言語のコーディングに適したものがあり、エンジニアの武器として活用したい。

HTMLの編集ソフトおすすめ5選！初心者向け【2021年版】

## HTML、JavaScript、Javaのおさらい

*Web開発で挙げられる言語に、HTML・JavaScript・Javaがあります*が、これらの間にはどのような関係性があるのかご存知でしょうか。HTMLとJavaScriptに関しては、馴染みのある方もいらっしゃると思いますが、Javaはどうでしょうか。

この記事では、**HTMLをベースにJavaScriptやJavaをどのように連携させていくかを説明していきます**。関係性を見ていく前に、まずは上記3つの言語について基礎をおさらいしていきましょう。

HTMLとは、Webページを作成するために開発された言語です。*通常のプログラミング言語と異なり、文章構造や視覚表現を記述することのできるマークアップ言語*です。世の中のWebサイトのほとんどがこのHTMLで記述されており、視覚的かつ直感的にコードを書くことが可能となっています。2014年にリリースされたHTML5が今でも最新バージョンとなっており、動画や音声の埋め込みが容易になりました。

HTMLはWebページの土台とも言える役割を持ち、その中でJavaScriptを呼ぶことによって動的なコンテンツを実装することも可能です。**HTMLにとって、JavaScriptは単独では実現できない動きを実現できる拡張機能のようなものということができます**。

HTMLとは？今さら人に聞けないその概略や役割を解説！

JavaScriptは、オブジェクト指向なインタプリタ型のプログラミング言語です。コンパイルを不要とすることから、クライアント側のブラウザ上でプログラムを動作させることが可能です。主にWebサイト上に動きを付ける目的で利用されています。*記述内容が似ているもののJavaとは別物の言語であり、用途や目的も大きく異なります*。

JavaScriptの特長はブラウザ上で動作させることが可能な点であり、ブラウザ上のスクロールに合わせて画像をフェードアウトさせたり、画像のポップアップやマウスの動きに合わせた動作などを手軽に行うことができます。最近では、大規模なWeb開発はVueやReact、AngularといったJavaScriptのフレームワークがよく使われています。

JavaScriptとは？人気のJavaScriptを5分で学ぶ

Javaは、Java仮想マシン（JVM）と呼ばれる実行環境で動作するプログラミング言語です。オペレーティングシステムやハードウェアに依存しないことから、高い汎用性を持っており、*Web開発だけでなくシステム開発やアプリケーション開発にも利用されます*。幅広い機能を提供できることから、習得難易度もHTMLやJavaScriptよりも高くなっています。

Web開発でJavaを採用することで、HTMLでは実現できなかった複雑なWebアプリケーションを設計することが可能です。例えば、業務システム・オンラインストレージなどのWebサービス・ショッピングサイトの開発にも利用されています。

Javaとは？人気プログラミング言語Javaの将来性やメリットについて解説

上記でそれぞれの言語の役割と関係性を説明してきました。ここからは、*Webページの土台とも言えるHTMLからどのようにして他の言語を動かすのかを説明していきます*。まずはJavaScriptを動かす方法を紹介します。方法としては2通りしかありません。

HTML上でJavaScriptを呼び出す最も一般的な方法は、**外部ファイルから呼び出す方法**です。具体的な記述方法は下記の通りです。

この記述により、test.jsという名前のJavaScriptプログラムを呼び出して実行することができます。

```<script type="text/javascript" src="test.js"></script>```

type="text/javascript"を追加する方法もありますが、これはHTML5より昔のバージョンでのみ必要であった記述です。HTML5では、記述無しは自動的にJavaScriptとして認識してくれることから不要となっています。

もう1つの方法として、**HTMLに直接JavaScriptを記述する方法**があります。これはインラインスクリプトと呼ばれ、あまり使用されてはいませんが、外部ファイルでJavaScriptを定義しなくともプログラムを動かすことが可能です。下記のような記述となります。

``` <script>  　
～JavaScriptのコードを記述～
</script>```

外部ファイルから呼び出すときと同様に、HTML5ではtype="text/javascript"は省略することができます。

次にHTML上でJavaを動かす方法を紹介していきます。多くの動的WebページはJavaScriptのみの使用で十分ではありますが、*高負荷でもパフォーマンスを発揮できる処理を実装したい時に活用できるでしょう*。

*サーブレットとは、Javaによって記述されたWebコンテンツを生成するためのプログラムです*。例えば、サーブレットによって記述に応じたHTMLを生成し、動的なWebページをブラウザ上に表示することができます。このサーブレットはTomcatなどのWebコンテナ上で実行することができます。Tomcatとはオープンソースソフトウェアであり、Webアプリケーションサーバーの1つです。

**HTMLでこのサーブレットを呼び出すことはJavaを呼び出すことと同義です**。HTML上で呼び出す方法としては、シンプルにhrefを使うことが挙げられます。

例えば、サーブレットのリンク先を/servlet/test/としてtest.javaがサーブレットの本体とすれば、

```<a href="/Servlet/test">サーブレットリンク先</a>```

という記述でサーブレットを呼び出すリンクをWebページ上に作ることができます。

別の方法としては\<form>タグを使用してサーブレットへフォーム入力値を送信する例もあります。この場合、同じようにサーブレットのリンク先を/servlet/test/とすると、

```<form acrion="/Servlet/test" method="get">～フォーム内容～</form>```

となり、getメソッドを使うことでサーブレットへフォーム入力値がURLに付加されて送信されます。サーブレット側でフォーム入力値を受けるようなプログラムにすることもでき、フォーム入力値の処理を行うWebアプリケーションを作ることができます。

HTML上でJavaを呼ぶもう1つの方法として、*HTML内にJavaを埋め込むJSP*があります。この場合は、呼び出すというよりも前述したインラインスクリプトに近い形になります。JSPの記述例としては下記となっています。

```<%@ page contentType="text/html;charset=（文字コード名）" %>
<% out.print("テスト"); %>
現在時刻は<%= nowTime %>です```

1つ目の<%@ではHTMLでJSPを利用するための決まり事であり、ページの種別や使用する文字コードを決めています。

2つ目の<%がJavaの記述であるかどうかを決めている箇所であり、この中にコードを記述していく形になります。

3つ目の<%=ではHTMLの表示文字列の中にJavaによって得られた文字列を表示することが可能です。文字列を出力するメソッドを入力する手間が省けているため、簡潔な表現が可能です。ちなみに、上記例ではJavaの日付時刻データを管理するクラスにあるクラス変数を呼び出しています。

このように**JSPではHTML内においてもJavaの記述を最小限にすることができますので、簡潔なコードを記述することができます**。

## Webアプリケーション開発で活躍するJava

サーブレットやJSPがあるように、JavaはWebアプリケーション開発の分野で非常に活躍しています。そのため、近年、より進化した開発ツールが登場しています。

*JSF（JavaServer Faces）は、Java EEという企業向けのJava開発プラットフォームで提供されているフレームワークの1つです*。ユーザーインターフェースの作成に特化したコンポーネントベースのフレームワークとなっています。JSFでは、**JSPで欠点でもあるHTMLとJavaの混在によるコードの見辛さを改善する形となっており、デザインと処理を分けて実装したいというユーザーのための存在**と言えます。

JSFではJSPでのHTMLはXHTMLとなり、Javaで記述していた処理はJavaBeansで置き換えられることとなります。

Spring Bootは、Javaを使ったWebアプリケーション開発のためのフレームワークです。もともとSpring Frameworkというフレームワークがあり、機能の使い分けが困難であるという欠点を克服するために作られたものがSpring Bootとなっています。*XML設定を不要化、アノテーションによるコード削減、ひな形の生成機能などWebアプリケーションの開発を手軽に行えるような工夫がなされています*。

ここにThymeleafと呼ばれるHTMLに対応したテンプレートエンジンを組み合わせれば、**JSPで行っていたJavaの埋め込みを行わなくとも処理を記述することができ、HTMLエディタの互換性を保つことが可能です**。

## それぞれの役割を理解して使いこなそう

Web開発において、HTMLだけではできないことを行うためにJavaScriptやJavaと連携は必要不可欠です。Webサイトに関して言えば、たいていはJavaScriptのみで対応はできるでしょう。

しかし、*より高度なWebアプリケーションとの連携を考えるとJavaも必要になってきます*。本記事に書いたように連携の方法は様々です。目的に合った方法をとっていくとよいでしょう。

Web開発において最も普及しているHTMLは、それ自体では動的なページを作ることができません。そこで登場するのが、JavaScriptやJavaです。本記事ではHTML上でこの2つの言語を使いこなす方法を紹介していきます。

HTML上でJavaScriptを呼び出す方法としては、外部ファイルから呼び出す方法とHTML上に直書きする方法がある

HTML上でJavaを呼び出す方法としては、サーブレット格納先のリンクを用意したり、JSPでHTMLに直接記述したりする方法がある

JavaのWeb開発ツールは日々進化しており、最近ではJSFやThymeleafなどが使われている

HTMLからJavaを動かせる？JavaScriptを動かす方法も解説

フロントエンジニアにHTMLは必須の言語ですが、HTMLに慣れてくると、ついついミスを犯しがちです。基本的なHTMLコードは、基本的に開始タグと閉じタグがセットになっていなければなりませんが、うっかり閉じタグの記述を忘れると画面レイアウトが崩れる原因になることがあります。

こうした**コーディングミスを簡単に発見してくれるのが「HTMLエラーチェッカー」**です。一時的に、ChromeストアからHTMLエラーチェッカーがなくなっ たことがありましたが、現在は改良版がアップされていますので、問題なく利用できます。

初心者におすすめのHTMLエディタ5選！便利な機能で開発効率もアップ

### HTMLエラーチェッカーの概要

HTMLエラーチェッカーはWebブラウザ、Chromeの拡張機能です。HTMLエラーチェッカーでは**Webのレイアウトの崩れ、表示不具合の原因であるHTML構文ミス（閉じタグの記述漏れ）を検出するツール**です。

### HTMLエラーチェッカーはHTMLの品質向上に必要

HTMLは多少のミスは許容されてしまうため、案外ミスを見逃しがちですが、場合によっては表示の不具合でユーザに迷惑を掛け、商用サイトでは受注減や企業への信頼低下につながりかねないため、品質にはこだわるべきです。

**HTMLエラーチェッカーを利用することで、品質向上の一助となる**ため、コーディングを仕事とする方、フロントエンジニアはぜひ使うべきツールです。

### HTMLエラーチェッカーができること

HTMLエラーチェッカーと聞くと、全てのエラーを見つけてくれるように気がしますが、実はできることは以下の2点のみに限定されます。

*▪開始・終了タグの閉じミスの検知* 
*▪エラー件数・エラー箇所の報告*

それでも、HTML記述ミスで最も多いと言われるHTMLタグの閉じ忘れや閉じミスを検知してくれるのは大変ありがたい機能です。さらに、この**エラー検知が簡単に行えるため、コーディングミスの不安が解消し、生産性向上**にもつながります。

### HTMLエラーチェッカーを使う人

ここまで述べた通り、HTMLエラーチェッカーはHTMLコーディングにおけるミスの防止に有効ですが、他にサイト公開前チェックや納品前チェックでも使えます。そのため、コーディング担当者は当然ですが、**品質管理を行うWeb担当者やWebディレクターなど、Web制作に関わるすべての人に役立つツール**と言えます。

## HTMLエラーチェッカーを使ってみる

HTMLエラーチェッカーの概要や利用目的を理解したところで、**実際にHTMLエラーチェッカーを導入**してみましょう。

### Chromeの拡張機能として追加する

Chromeの拡張機能追加は大変簡単です。**以下のHTMLエラーチェッカーのリンクを開き、『Chromeに追加』のボタンを押すだけ**です。『HTMLエラーチェッカーがChromeに追加されました』というメッセージが表示されれば完了です。
*【参考】：[HTMLエラーチェッカー（Chromeウェブストア）](https://Chrome.google.com/webstore/detail/html%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC/ohdllebchmmponnofchalfkegpjojcaf?hl=ja)*

*《注意》*：ブラウザとしてChromeが前提ですので、HTMLエラーチェッカーを使う場合は、Chromeがインストールされている必要があります。新たにChromeをインストールされる方は以下のサイトを利用してください。
*【参考】：[Google Chrome をダウンロードしてインストールする（Google Chrome ヘルプ）](https://support.google.com/Chrome/answer/95346?hl=ja&co=GENIE.Platform%3DDesktop)*

### HTMLエラーチェッカーの使い方

前述のChromeの拡張機能としてHTMLエラーチェッカーが追加されると、Chrome画面の右上に、「拡張機能」のアイコンが追加されます。続いて、以下の手順でHTMLエラーチェッカーを利用します。

*1.Chromeを起動し、チェックをしたいWebページにアクセスする*
*2.Chrome画面の右上、「拡張機能」アイコンをクリックし、『HTMLエラーチェッカー』のアイコンを押す*
*3.Webページのエラーチェックが行われ、結果が表示される*

▪エラーが無い場合は、青色のポップアップで「タグはおそらく完璧です」と表示されます。
▪エラーが発見された場合は、赤色のポップアップで「〇個のタグが対応していません」という表示とともに、その下にエラー行とエラー内容が表示されます。

### 自動エラーチェック機能を使ってみる

HTMLエラーチェッカーには、オプションに「自動チェック機能」があります。
**自動チェック機能を設定しておくと、Webページを見るだけで自動的にエラーチェック**してくれます。

HTMLエラーチェッカーのアイコンを右クリックして表示される『拡張機能を管理』をクリックし、「拡張機能」の画面が開いたら『オプション』をクリックします。
次に「自動チェック機能を有効にする」ボタンを『ON』にします。

自分が担当しているWebページなど、常にチェックするページを指定したい場合は、その下にある
*「フィルタリング用のURLを設定」欄にページのURLを入力しておくと、指定したページだけが毎回チェックされる*ので、変更時などのチェック漏れを防げます。

*■オリジナルの警告ルールを設定する*

**HTMLエラーチェッカーは、独自のエラーチェックのルールの追加が可能**です。

例えば、担当しているWebサイトのSSL化を行った際に、httpのWebページが残っていないかなどのチェックが自動で行えます。

HTMLエラーチェッカーの設定画面下部の「フィルタリング用のキーワードを設定」入力欄に、http:// （チェックしたいサイトのドメイン）を記述しておくと、サイト内にhttpページが残っているとエラーが表示されます。

### ローカルファイルのチェックができない問題

HTMLエラーチェッカーには当初バグがあり、ローカルファイルのチェックで**「リロードしてください」と表示され、解析ができないという問題がありましたが、既にバグは解消**していますので、過去にHTMLエラーチェッカーをうまく使えなかった方は改めて試してみてください。

## オンラインHTMLエラーチェックサイトを活用

HTMLエラーチェッカーをChromeの拡張機能で利用する方法を説明しました。実際に試した方は、その便利さを実感されたことと思います。しかし、**HTMLエラーチェッカーはシンプルな反面、エラーチェック機能が限定**されています。

「開始・終了タグの閉じミスの検知 」機能だけあれば十分だという方は、そのままHTMLエラーチェッカーを活用してください。一方、*他の文法チェック機能が欲しいという方には、オンラインで利用できるHTMLエラーチェッカーサイトを1つご紹介*します。

*「Markup Validation Service」*はWeb技術の標準化を推進する、非営利団体「W3C（World Wide Web Consortium）」が無償で提供している**HTMLの文法チェッカーのオンラインサイト**です。

HTMLの仕様を決めているW3Cが提供しているだけあって、チェックの精度は高いと評判です。HTML5への対応などもあり、*おすすめのHTMLエラーチェックサイト*ですが、Webサービス版は時に処理が重たいのと、英文である点が弱点です。

ただ、Chromeの自動翻訳機能を使えば、多少翻訳ミスはあるものの、かなり使えるサービスです。

オンラインサービスと、オープンソースによるローカルで動作するツールの2種類がありますが、ここではオンライン環境で気軽に利用できるサービスを紹介します。

### Web版 W3C Markup Validatorの使い方

使い方は至って簡単で、下記のサイトにアクセスし、**「Address欄」にチェックしたいWebサイトのURLをペーストするだけ**です。実際に試して見ると分かりますが、大半のWebページは何らかのエラーや警告が表示されます。

エラーがあること自体は大きな問題ではありませんが、無視して良いエラーと、放置できないエラーがあるため、その見極めができるようになるとこのツールはさらに便利になります。

*【参考】：[W3C Markup Validation Service](https://validator.w3.org/)*

### Web版 M3C Markup Validatorの3つの機能

**Web版のW3C Markup Validatorにはチェック機能が3種類**あり、画面上部の3つのタブから以下の方法を選択できます。

*▪Validate by URI「URLで検証する」*
*▪Validate by File Upload「ファイルアップロードによる検証」*
*▪Validate by Direct Input「直接入力による検証」（HTMLソースを貼りつける）*

最も多く使うのはURLによる検証だと思いますが、まだWebサイトにアップできない作成中のHTMLファイルや、ソースコードのある部分だけをチェックしたい場合などには、タブを切り替えてそれぞれの機能を使い分けすると良いでしょう。

「CSS Validation Service」は、同じく**W3C提供のCSSの文法チェックサービス**です。使い方は「Markup Validator」とほぼ同じですので、「Markup Validator」を使える方は抵抗なく使えるでしょう。

*【参考】：[CSS Validation Service](https://jigsaw.w3.org/css-validator/validator.html.ja)*

## 高品質のHTMLを作成するスキルを身に付けよう

HTMLの文法エラーはチェックツールを利用すると、かなりのエラーメッセージが表示され、逆にエラーつぶしで余計な手間が掛かったという話もあります。実際のところ、エラーがあっても表示や動作に問題がないケースもあり、どこまで修正すれば良いのか悩ましいところです。

基本的には表示に影響がなく、互換性などで問題が発生していなければ、多少のエラーには目をつぶっても構わないでしょう。

しかし、HTMLを勉強中の方、初心者の方は、表示などに問題がなくともエラーチェックの結果は確認する癖をつけましょう。

第三者によってエラーチェックが行われ、エラーが多過ぎると、エンジニアとしてのスキルに疑問符が付きかねません。ここで紹介した**HTMLエラーチェッカーを活用し、高品質のHTMLを作成する癖**をつけておきましょう。

ウェブデザイナー必見！HTMLのおすすめ資格を比較解説します

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

HTML言語はコンパイル機能がなくバグ解消に苦労しがちです。その解消策として、Chromeの拡張機能、HTMLエラーチェッカーについて紹介します。併せてHTML文法チェックに適したオンラインのHTMLエラーチェックサイトも紹介しますので、ぜひ活用してください。

HTMLエラーチェッカーはChromeの拡張機能として利用でき、インストールや利用方法が非常に簡単である

HTMLの文法チェックを行うには、オンラインサービスのW3C Markup Validatorがおすすめである

高品質のHTML作成を心掛けると、第三者からの評価も上がるので、HTMLエラーチェッカーの利用を心掛けよう

HTMLエラーチェッカーは必須？ミスの予防＆品質向上に最適！

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

HTML5プロフェッショナル認定試験とは、**HTML5・CSS3・JavaScriptなどのWebコンテンツ制作やWebアプリケーション、動的なWebコンテンツの開発・設計の技術や知識**を測る試験のことです。また、主催するエルピーアイジャパン（LPI-Japan）は、他にもLinuCやOSS-DBなど知名度の高い資格の運営・認定を行っており、*IT業界においての認識率も非常に高い*のが特徴です。

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

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

HTML5プロフェッショナル認定試験レベル1は、**Webの基礎知識・HTML・CSS・レスポンシブWebデザイン・APIの基礎知識が出題範囲となり、幅広い知識が問われます。**また、このHTML5プロフェッショナル認定試験レベル1では、JavaScriptに関する知識はほぼ問われません。

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

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

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

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

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

レベル2では、主にJavaScriptの知識・アニメーション・各種APIの深い仕様理解・通信・デバイスアクセス・パフォーマンスとオフライン・セキュリティモデル、と広範な知識を求められますが、それと同時により深い知識を問われます。レベル1とは異なり、JavaScriptの文法やES6（ECMAScript2015）以降の文法について問われ、**プログラミング寄りの問題が重点的に出題されます。**

具体的な出題のうち、重要性が高く頻出なものは下記が挙げられます。

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

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

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

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

HTML5プロフェッショナル認定の資格を取得するメリットは、*大きく3つに大別できます。*前述の通り資格名にHTML5と名前がついていますが、HTMLに限らずJavaScriptやレスポンシブWebデザイン、各種APIの理解、グラフィクス等幅広いWeb関連の知識を求められるため、**幅広いWeb知識を有することを証明できます。**

エンジニアとして勤めていると自分が携わる業務範囲での知識は蓄積されますが、その業務から離れると1から学び始めることが多くあります。HTML5プロフェッショナル認定を取得することによって、*現時点で自分は何を知っていて何を知らないのかを知ること*ができ、またWebに関する知識を網羅的に習得できます。

そのため、**業務が変わっても順応できるスピードを早められるメリット**があります。

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

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

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

就職や転職活動等にも言えることですが、副業開始当初は個人としての実績が浅いため、ポートフォリオに加えて、HTML5プロフェッショナル認定を取得していると**採用側から見てかなりポイントが高い**でしょう。Web系コーダー・プログラマー等の副業を考えている方で、なかなか採用されず困っている場合はぜひ挑戦してください。

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

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

HTML5プロフェッショナル認定試験の参考書は、以下におすすめする2つの参考書を学習するだけで十分に合格することが可能です。（レベル2用の参考書も販売されているため読み替えてください）

*・[HTML教科書 HTML5プロフェッショナル認定試験 レベル1 スピードマスター問題集 Ver2.0対応](https://honto.jp/netstore/pd-book_28916635.html)*
時間のない方は**この参考書1冊でも十分合格できるほどの問題・情報量**で、本番の試験に近い問題を解いていくことができるため大変おすすめの本です。時間に余裕があれば、これを2〜3周すれば*大体合格できるレベルに達することができる*ので、ぜひ繰り返し問題を解いてみてください。

*・[HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集 Ver2.0対応版](https://honto.jp/ebook/pd-series_B-MBJ-23800-121461779-001-001.html)*
先述した問題集に加え、問題集で分からない箇所や周辺知識も学んで実務に活かしたい方は、テキストを使用することをおすすめします。図解や表形式で分かりやすくまとまっているため、理解が深まりやすいです。ただ、必須ではないため時間に余裕がある方は、ぜひこちらのテキストも活用してみてください。

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

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

ちなみに、受験料は16,500円（税込）です。

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

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

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

HTMLの記事（1ページ目）