**▼ITエンジニアにおすすめの資格一覧をご紹介！**

ITエンジニアも資格がある方が有利？おすすめの関連資格を解説！

この記事では、HTMLの資格取得をおすすめしたい方や資格取得によるメリットを説明します。また、HTMLを業務で使用するフロントエンドエンジニアの平均年収も紹介しますので、参考にしてください。

【参考】：[HTML-W3C Recommendation](https://www.w3.org/TR/html52/)

### HTMLの資格取得を活かせる職種

HTMLはハイパーテキスト記述言語ですので、主にHTTP通信で用いられる記述言語です。そのため、**Web系システムのコンテンツには必須の記述言語**です。このことから、WebデザイナーおよびWebクリエイターには必要なスキルと言えるでしょう。

また、近年のアプリケーションではWeb形式での表示機能を活用することもあります。そのため、*Webブラウザのフロントエンドとなる処理を担当するフロントエンドエンジニアにとっても、HTMLの資格取得はスキルアップのために有効である*と言えます。

自分のスキルを活かすためには、企業選びも大切です。数ある企業の中から1つに決めるのは大変なこともあるでしょう。そういった場合は、転職エージェントの活用をおすすめします。

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

## HTMLの資格取得のメリット3つ

HTMLの資格を持っていなくてもHTMLを使うことはできるため、誰でもHTMLを活用したWebデザインを行えます。しかし、**資格取得により作業品質が対外的に保証されることもあるため、業務としてHTMLを使う場合は資格取得のメリットがある**でしょう。

資格を持っていることで、品質の信頼度を上げることが期待できます。また、資格取得のための学習を通じて言語仕様を体系的に学べるため、高度なコンテンツ作成を安定的に実施するスキルが身に付くでしょう。

HTMLの試験対策として、*参考書や過去問を使った勉強をする過程で知識を体系的に理解することができます。*また、経験則やその都度調べていた疑問点などを、整理して理解するとともに、あまり触れてこなかった部分についても網羅的に知識を得ることができます。

そのため、知識やスキルの穴が少なくなり、より安定的な業務が行えるようになるでしょう。

HTML・CSSとは何か？使い方やできること、独学方法を解説！

### 勉強のモチベーションを維持しやすい

*資格取得という目標を設けることで、日々の勉強のモチベーションを高めることが期待できます。*資格試験は受験日が年に1回または数回のものが多く、期日があることで勉強の中弛みを予防できるメリットもあります。

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

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

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

より高い年収を目指すには、資格を取得してスキルを磨き、自身の市場価値を高める方法や、Webディレクターやプロデューサーへとキャリアアップするなどの方法があります。

【参考】：[マイナビエージェント職業別年収ランキング/職種図鑑](https://mynavi-agent.jp/helpful/income/category/creative_05.html?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv12)
※【平均年収 調査対象者】2015年から2016年の間でマイナビエージェントに登録いただいた方
【参考】：[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?_fsi=AZhJ8QDV&_fsi=AZhJ8QDV)

HTMLに関する資格でおすすめするものを3つ紹介します。「HTML5プロフェッショナル認定試験」、「ウェブデザイン技能検定」、「Webクリエイター能力認定試験」の3つです。各資格にはそれぞれ特徴がありますので、以降で詳しく解説します。

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

HTML5プロフェッショナル認定試験とは、エルピーアイジャパン（LPI-Japan）によって実施されている資格です。エルピーアイジャパンは、LinuC（Linux認定）やOSS-DB（オープンソースDB認定）といった認定も展開しています。

試験は全国各地のテストセンター（ピアソンVUE）で随時実施されています。合格点は非公表ですが、公式サイトには7割程度の正答率で合格すると記載されています。

**認定の優位性有効期限は5年間となっており、認定から5年以内の再認定または上位レベルの取得が求められます。**再認定しない場合はステータスがACTIVEからINACTIVEに変更されます。

INACTIVEとなると、持っているスキルが最新のシステム開発に対応していないと見なされます。しかし、認定された事実に変わりはありません。

なお、*資格の名称は「HTML5」ですが、廃止されたHTML5に代わって最新のHTML Living Standardに対応しているため問題ありません。*

レベルに応じて2つの試験区分が用意されています。受験料はともに16,500円（税込）です。

### レベル1（初級・中級レベル）

HTML5を使ってWebコンテンツを作成できるレベルで、HTML5・CSS3を対象としています。ITSSレベル2に相当します。

### レベル2（中級・上級レベル）

動的コンテンツやシステム間連携アプリケーションを開発できるレベルで、レベル1に加えてJavaScriptやマルチメディア・通信・パフォーマンスの要素が追加されます。

ITSSレベル3に相当しており、レベル1に合格している（かつACTIVEである）ことがレベル2の認定条件になっています。

【参考】：[HTML5プロフェッショナル認定試験](https://html5exam.jp/)
【参考】：[FAQ-HTML5プロフェッショナル認定試験の合格点](https://html5exam.jp/faq/)

HTML5プロフェッショナル認定試験が難しい？試験内容や取得方法

ウェブデザイン技能検定は、国家検定制度としてインターネットスキル認定普及協会（特定非営利活動法人）により運営されています。**試験合格により名称独占であるウェブデザイン技能士を、名刺・ホームページ等へ表示することができます。**

検定は1～3級に分かれており、2級と3級の試験は大都市を中心に年間4回（5月・8月・11月・2月）実施されています。1級は学科（11月）・実技（2月）がそれぞれ年1回実施されています。100点満点のうち70点以上が合格です。

ただし、*実技では試験要項にある各作業分類で、配点の60％以上正解する必要があります。*受験資格と受験手数料（非課税）は以下の通りです。

1級は学科試験と実技試験で受験資格が分かれています。学科試験は、2級合格後2年の実務経験を有する者、7年以上の実務経験を有する者、または所定の教育を受けた後に所定年数の実務経験を有する者が受験可能です。

そして、1級の学科試験に合格した者のみ実技試験を受けられます。受験手数料は、学科が 8,000円 で 、実技が 25,000円です。

3級合格者、2年以上の実務経験を有する者、または所定の教育を受けた者・所定の実務経験を有する者が受験可能です。受験手数料は、学科が7,000円で、実技が16,000円または7,000円（25歳以下の在職者）です。

「ウェブの作成や運営に関する業務に従事している者及び従事しようとしている者」が受験可能です。受験手数料は、学科が6,000円で、実技が8,000円または3,000円（25歳以下の在職者）です。

【参考】：[ウェブデザイン技能検定](https://www.webdesign.gr.jp/)

Webデザイン用語を徹底解説！Webデザイナーを目指す方は必見

## Webクリエイター能力認定試験

Webクリエイター能力認定試験は、サーティファイが運営している資格認定です。全国各地のパソコンスクールで随時実施されています。レベルは、スタンダード・エキスパートの2つがあります。

合格ラインは、スタンダードで「実技問題の得点において得点率65％以上」、エキスパートで「知識問題と実技問題の合計得点において得点率65％以上」となっています。

また、**受験資格に学歴や年齢などの制限がないため、最初からエキスパートを受験することも可能**です。

### スタンダード（初級レベル）

HTML5・CSSを中心とした実技問題が出題され、モデル学習時間は24時間とされています。受験料は5,900円（税込）です。

### エキスパート（初級・中級レベル）

HTML5・CSS・JavaScriptを中心とした実技問題並びに知識問題が出題され、モデル学習時間は38時間とされています。受験料は7,500円（税込）です。

【参考】：[Webクリエイター能力認定試験](https://www.sikaku.gr.jp/web/wc/)

SCSSとは？CSSに代わる拡張メタ言語を覚えて優れたWebエンジニアを目指そう！

**目的によって最適な資格も変わります。**ここでは、目的別にHTMLの資格を整理しました。資格を選ぶ際の参考にしてください。

### すぐにでも何らかの資格を取得したい

この場合は試験実施回数が多く、難易度がそれほど高くない資格を選択するのが得策です。そのため、「HTML5プロフェッショナル認定試験 レベル1」や「Webクリエイター能力認定試験 スタンダード」「同 エキスパート」をおすすめします。

【参考】：[HTML5プロフェッショナル認定試験 レベル1](https://html5exam.jp/outline/lv1.html)
【参考】：[Webクリエイター能力認定試験内容](https://www.sikaku.gr.jp/web/wc/contents/about/content/1/)

この場合は試験区分がより上位までカバーしている資格の取得をおすすめします。そのため「HTML5プロフェッショナル認定試験 レベル2」「ウェブデザイン技能検定 2級」に挑戦するのが良いでしょう。

前提条件として、HTML5プロフェッショナル認定試験・ウェブデザイン技能検定ともそれぞれ下位資格に合格することが求められます。しっかりと資格取得の準備を進めましょう。

【参考】：[HTML5プロフェッショナル認定試験 レベル2](https://html5exam.jp/outline/lv2.html)
【参考】：[ウェブデザイン技能検定-試験要綱](https://www.webdesign.gr.jp/application/items/)

この場合はウェブデザイン技能検定が唯一の候補となります。合格した級に関わらず、ウェブデザイン技能士を名乗ることができます。まずは3級合格を目指して準備を進めましょう。

なお、1級は実務経験を求められますので長期的な目標となります。1級を目指す方は、並行して「HTML5プロフェッショナル認定試験 レベル2」についても学習を進めることで相乗効果が期待できます。

【参考】：[ウェブデザイン技能検定-試験要綱](https://www.webdesign.gr.jp/application/items/)
【参考】：[HTML5プロフェッショナル認定試験 レベル2](https://html5exam.jp/outline/lv2.html)

転職においても、資格があることで自分が保有するスキルを証明することができます。一方で、企業が求めているスキルや社風などは見えづらいため、自力で調べるには大変なこともあるでしょう。そういった場合は、転職エージェントの利用をおすすめします。

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

## HTML資格取得のための勉強方法

ここでは、資格取得のための勉強方法について解説します。以降で、サンプル問題とおすすめの参考書を紹介します。

なお、各資格試験の勉強時間の目安などは個人の知識やスキルにも依るため、受験の際には試験内容や参考書などを確認して、計画的なスケジュールを立てましょう。

各試験団体からサンプル問題が提供されています。**サンプル問題を解くことで過去問対策になり、試験本番のイメージを掴むこともできます。**

*■HTML5プロフェッショナル認定試験*
【参考】：[HTML5プロフェッショナル認定試験サンプル問題](https://html5exam.jp/measures/sample.html)

*■ウェブデザイン技能検定*
【参考】：[ウェブデザイン技能検定 練習問題](https://www.webdesign.gr.jp/measures/exercises/)
【参考】：[ウェブデザイン技能検定 過去問題の公表](https://www.webdesign.gr.jp/measures/publication/)

*■Webクリエイター能力認定試験*
【参考】：[Webクリエイター能力認定試験 サンプル問題](https://www.sikaku.gr.jp/web/wc/contents/prepare/sample/1/)

各試験団体から参考書と参考情報が提供されています。**サンプル問題と合わせて取り組むと、より効果的です。**

*■HTML5プロフェッショナル認定試験*
【参考】：[HTML5プロフェッショナル認定試験 参考資料ダウンロード](https://html5exam.jp/contact/download.html)
【参考】：[HTML5プロフェッショナル認定試験 学習教材のご紹介（HTML5認定教材）](https://html5exam.jp/measures/textbook.html)
【参考】：[HTML5プロフェッショナル認定試験 HTML5道場(コラム)](https://html5exam.jp/measures/dojo.html)

*■ウェブデザイン技能検定*
【参考】：[ウェブデザイン技能検定 参考書籍等](https://www.webdesign.gr.jp/measures/seminar/)

*■Webクリエイター能力認定試験*
【参考】：[Webクリエイター能力認定試験 問題集](https://www.sikaku.gr.jp/web/wc/contents/prepare/text/)
【参考】：[Webクリエイター能力認定試験 対応書籍](https://www.sikaku.gr.jp/web/wc/contents/prepare/text/support/)
【参考】：[Webクリエイター能力認定試験 推薦書籍](https://www.sikaku.gr.jp/web/wc/contents/prepare/text/recommend/)

## 資格を取得してエンジニアとしてスキルアップを目指しましょう

HTMLはWebデザイナーおよびWebクリエイターに必要な知識です。HTMLに関する資格もいくつかあり、本記事ではHTMLの資格でおすすめの3つを紹介します。各資格の特徴やおすすめの参考書なども解説しますので、参考にしてください。

HTMLはWebコンテンツ作成を担当するデザイナーおよびクリエイターに必須の知識です

HTMLの資格を取得することで、スキルの高さや作業品質の高さを対外的に証明できます

HTMLの資格取得を目指すには、サンプル問題や参考書を活用しましょう

HTMLの資格おすすめ3つを解説！サンプル問題や参考書も紹介

ITエンジニアの皆さんの多くは、1度はHTMLについて学んでいることでしょう。また、実際にWebプログラマーとして、日常的にHTMLを使いこなしている方もいるはずです。しかし、HTMLについて尋ねられた際に、きちんと説明するのを難しく感じてしまう方も多いのではないでしょうか。

この記事では、HTMLとはどういった言語なのか、何ができるのかを解説し、CSSとJavaScriptについても関係性をまとめました。特に日常的にHTMLを活用しているフロントエンドエンジニアを目指す方は、ぜひ最後まで読み進めてください。

フロントエンジニアの特徴や年収、必要なスキル、将来性は?

### HTMLは様々なWebサイトやCMSで活用されている

*世界中のWebサイトのほとんどはHTMLで作られています。*しかしながら「Webページは作ったことはあるけれど、HTMLは使わなかった」という方も多いでしょう。

有名なCMSであるWordPressも生成されるのはHTMLです。最近はHTMLに関する知識が皆無でも簡単にWebページを作れるようになっていますが、HTMLを使えると何かと便利です。Webページの微調整、色の調整など、細かい部分ではHTMLで直接記述するケースもあります。

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

ここでは、HTMLとはどういった言語なのかを具体的に解説します。また、併せて簡単にできるWebページの作成方法やHTMLを活用するITエンジニアの年収についてもまとめました。

HTMLは、「Hyper Text Markup Language」の略語です。

これをそのまま直訳すると「高度なテキストに目印を付けるための約束事」です。Languageは言語を意味しますが、ここでは文法やルールと考えてください。　

HTMLはマークアップ言語であり、プログラミング言語ではありません。私たちが日常に目にするWebページは、WebデザイナーやWebプログラマーが視覚的に分かりやすく、タイトル・文字・画像などを配置しています。

しかし、コンピュータからすれば単なるコードの羅列でしかありません。そこで登場するのがHTMLです。**HTMLがコンピュータと人間の間を取り持つ、翻訳者の役割を果たしています。**HTMLはWebページに表示する画像サイズの指定や、文字のフォント・サイズ・配置を指示するといった役割を担ってくれます。

次にハイパーテキストについて、おさらいしておきましょう。

ハイパーテキスト（HyperText）は、直訳すると「超テキスト」です。通常のテキストを超越したテキストということになりますが、何が「超」なのでしょうか？

Webページはハイパーリンクが頻繁に登場します。このハイパーリンクは、ある語句に関してさらに深く知りたい時に、その語句から直接、関連文章や説明文書を呼び出すという機能を持っています。このように語句や文章を「関連づける」ことをハイパーリンクと称し、ハイパーリンクの機能を持つ文書を「ハイパーテキスト」と呼んでいます。

HTMLの特徴がハイパーテキストであることは理解できましたが、ではマークアップ（Markup）とは何のことを指すのでしょう？*マークアップとはタグと呼ばれる記号で文章を囲い、文章に「目印をつけて」意味を持たせることです。*

マークアップ言語によって見出しがどこなのかを把握したり、どこまでが引用した部分なのかを確認したりすることが可能です。このように、人間であれば理解できることでもコンピュータがその都度理解することができないため、マークアップ言語を使用して理解させることができます。

また、マークアップ言語で見出しを大きく太字にしたり、段落を1段落ごとに改行して表示させたりすることで、ユーザが読みやすいサイト作りを行うことができます。

マークアップエンジニアとは？仕事内容や将来性、必要なスキルを解説

タグはWebページ上で何をどう表示させるかを指定する「命令文」であり、テキストをその意味ごとに<>で囲んで作成していきます。**このタグをコンピュータが読み取って、人に分かりやすい表示に変えてくれるのです。**

例えば、見出しであれば階層の上から &lt;h1&gt;~&lt;h6&gt; を用います。大見出しの場合は、&lt;h1&gt;大見出し&lt;/h1&gt; と記述します。

本文であれば、段落を表す &lt;p&gt;本文&lt;/p&gt; を用います。

その他、画像は&lt;img&gt;タグを用いて、&lt;img src="画像ファイル名"/&gt; のように記述します。

HTMLタグとは？HTMLタグ一覧など初心者向けに解説！ 

### 簡単にできるWebページの作成方法

以上確認したことを、実習しながらおさらいしてみましょう。**WebページはHTMLで構成されており、HTMLはテキストの羅列であるため、タグによってマークアップされて意味のあるものになっています。**

ここでは、Windowsのメモ帳で簡単なWebページを作ってみましょう。以下をメモ帳で記述してみてください。

&lt;title&gt;タイトル-世界の山&lt;/title&gt;
&lt;h1&gt;大見出し-富士山&lt;/h1&gt;
&lt;h2&gt;中見出し-富士山の画像&lt;/h2&gt;
&lt;p&gt;本文-富士山の画像をフリー画像のpixaby.comから拾ってきました。&lt;/p&gt;
&lt;img src="https://cdn.pixabay.com/photo/2014/10/07/13/48/mountain-477832_1280.jpg" &gt;

メモ帳に入力したら、ファイル名を「富士山」、拡張子は「html」として保存してみるとHTMLファイルが完成します。HTMLファイルとは、この保存した「富士山.html」というファイルのことで、ダブルクリックすると次のように表示されます。

上記のように、HTMLでは簡単にWebページが作成できます。

メモ帳のようなテキストエディタを用いて、文章や画像にタグを付けるだけで簡単にWebページを作れることが分かりました。

このようにHTMLは主にWebページ作成に使われていますが、実は他にもHTMLが活用されているものがあります。Webページを含めて、大きく3つの場所でHTMLが利用されているので、順に見ていきましょう。

世界中のWebサイトのほぼすべてがHTMLによって作られています。では実際のWebサイトを見てみましょう。今ご覧になっているこのサイトでも構いません。

Webページが実際にHTMLで記述されていることを確認するには、そのソースコードを見る必要がありますが、**Windowsのパソコンなら「CtrlとU」、Macを使っている方なら「⌘とOptionとU」を同時に押すとソースコードを表示ができます。**

このように、WebサイトはすべてHTMLで記述されているのです。

皆さんが普段利用しているEメールでも、HTMLが使われているケースが多いです。Eメールも当初はテキスト文字だけで構成されていましたが、近年のメールソフトは、OutLookのようにHTML対応が主流です。

*文字が太字・カラー装飾・画像が貼ってあるメールは、HTMLメールです。*ビジネスメールではテキストメールがまだ主流ですが、メルマガや登録サイトのお知らせメールなどではHTMLメールが多いです。

HTMLメールはWebと同じくビジュアル性があり、訴求力が高いため、広告重視のメールなどではよく利用されています。

HTMLはOSに縛られない点が強みです。iOSであれAndroidであれ、HTMLは共通言語です。

スマホアプリを開発する際、iOSの場合はObjective-CやSwiftなどを用い、AndroidはJavaなどを使いますが、iOSとAndroidそれぞれに対応できるスマホアプリを作る場合には、個別に開発をしなければなりません。

しかし、**Webページに動きを与えるJavaScriptと、HTML（HTML5）を使えば、iOSとAndoroidの両方で動くスマホアプリの開発が可能です。**

これをハイブリッドアプリと称し、二重開発を避けられ、開発コストの低減につながることから注目を浴びていましたが、動作面やパフォーマンス面で弱点があります。ハイブリッドアプリ構築の環境としては、Monaca・アドビ社のApache Cordova・マイクロソフト社のXamarin・FacebookのReact Nativeなどが知られています。

【参考】：[Monaca](https://ja.monaca.io/)
【参考】：[Apache Cordova](https://cordova.apache.org/)
【参考】：[Xamarin](https://learn.microsoft.com/ja-jp/xamarin/get-started/what-is-xamarin)
【参考】：[React Native](https://reactnative.dev/)

Appleの新しいプログラミング言語、Swift ― その概要や特徴、メリット・デメリットについて解説

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

JavaScriptとは？特徴・メリット・何ができるのかを解説

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

React Native入門！将来性やアプリ開発環境について解説

HTMLの概略を理解したところで、HTMLで何ができるのかについて具体例を紹介します。HTMLでできることの中から、代表的な例を3つ挙げてみました。

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

HTMLの重要な機能として、「文章の見出し」を作る機能があります。

先ほどのように、*見出しの定義には &lt;h1&gt;から&lt;h6&gt; までのタグが使われます。*見出しタグによって、コンピュータはその文章が見出しであると認識するのです。見出しタグがないと、コンピュータは単なるテキスト文であると認識し、見出しとして表示されません。

HTMLはハイパーテキストの特徴として、外部サイトや他のページへ移動するためのリンクを設定できる点があります。HTML上では、*リンクを貼る部分にタグとして &lt;a&gt; を使います。*コンピュータは<a>タグをリンクの命令だと認識します。

HTMLの特徴として、表の作成機能があげられます。*表を作成する際には &lt;table&gt;や&lt;tr&gt;、&lt;td&gt; などのタグが用いられます。*これらのタグによって列や行ができ、表を作成することができるのです。

こういったHTMLのスキルはエンジニア職以外でも日々活用されています。HTMLがきっかけでプログラミングに興味を持った場合は、研修制度が充実している企業を選んでスキルを磨くことをおすすめします。

## HTMLとセットなCSSとJavaScriptとは

HTMLは人の顔に例えると、目や鼻などのパーツに該当します。人は口・目・鼻があることで顔として認識します。コンピュータにしてみると、目も鼻も口も単なるパーツにしかすぎませんが、それぞれのパーツに意味を持たせ、配置させることをコンピュータに知らせるのがHTMLの役割です。

しかし、それだけでは顔は無表情です。目を大きくしたり、鼻を小さくしたりすることはできますが、表情とは言えません。**顔にメイクアップを施し、表情を豊かにしてくれるのが、CSSやJavaScriptです。**

単に目・鼻・口があるだけの顔にメイクを施すのがCSSの役目です。CSSとは「Cascading Style Sheets」の略語であり、CSSを使うと、例えば瞳を茶色にしてサイズを大きくし、パッチリ目にするというようなメイクができます。

元々あるHTMLの文章を、よりキャッチーでカラフルな、デザイン性の高い1つの作品として仕上げることができます。

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

【初心者必見】HTMLとCSSの違いは？基本知識と学習方法も解説！

### JavaScriptは、表情を豊かにしてくれる

多くのWebサイトには、動きがあってインパクトのあるページをよく見かけます。このようなページは、JavaScriptを用いています。

JavaScriptは、顔で例えると笑顔や怒った顔など、顔の表情を豊かにしてくれる働きを持っています。**JavaScriptを使うと、アニメーションやスライドのページを作ったり、対話型で応答するページを作ったりすることが可能です。**

HTMLを活用する職種にはどのようなものがあるのでしょうか。ここでは、クリエイター職の例とITエンジニア職の例を紹介します。

HTMLを主に活用する職種には、Webデザイナー・Webクリエイター・Webディレクターのようなクリエイター職が挙げられますが、ITエンジニアの場合では、フロントエンドエンジニアが挙げられます。

**フロントエンドエンジニアとは、Web開発全般を担う職種です。**HTMLやCSSによるコーディング以外に、JavaScriptを利用し、さらにはUI/UXデザインに精通してPHPやCMSの構築にも関わる人もいます。これに対して、Web開発に関係してサーバやデータベースなどの構築・管理を担うのがバックエンドエンジニアです。

フロントエンドエンジニアはDX推進やスマホ普及への対応などから、需要が増している人気職種の1つですが、フロントエンドエンジニアを目指すには次のようなスキルが必要です。

まずはHTMLのスキルはもちろん、画面デザインを担うCSS、Webページ上で動くJavaScript、Webでよく利用されるPHP・Ruby・Pythonなどのプログラミング言語を1つは習得しておきましょう。さらには、ユーザインターフェース・ユーザーエクスペリエンスに関するUI/UX・検索エンジンの最適化技術であるSEOなどの知識も必要です。

フロントエンドエンジニアとバックエンドエンジニアを詳しく解説！

PHPとは一体何か？他のプログラミング言語と異なるポイントを解説！

Rubyとは何か？Rubyの特徴やできることについて解説

Pythonとは？人気のPythonを学ぶ際に知っておきたいこと

「HTMLとは何？」と質問をされると、エンジニアの皆さんでも説明が難しいと感じてしまう人がいるかもしれません。HTMLはWEBページの作成に必要な言語で、WebページはほぼHTMLから成り立っています。このWeb開発に欠かせないHTMLについて、この記事で分かりやすく解説します。

Web開発の基本であるHTMLの概略とその必要性について学ぶ

HTMLが利用される局面と、HTMLと関係するCSSやJavaScriptの役割について知る

フロントエンドエンジニアを目指すなら、まずはHTMLから習得するべき

HTMLとは？できることや初心者向けのタグの例、CSSについても紹介

WebKitとは、Apple社が開発する**オープンソースの「HTMLレンダリングエンジン」の名称です。**Web系エンジニアの方以外はあまり聞かない言葉かと思いますが、これからWebKitの歴史や概要、Webプログラミングで意識しておきたいことなどについて解説します。

Webエンジニアを目指す方、エンジニアとして知識を広げたい方はぜひ最後までお付き合いください。

*【参考】：[WebKit ｜公式](https://webkit.org/)*

iPhoneなどiOSのSafari、iOSで利用されているGoogle Chrome、いずれもHTMLレンダリングエンジンは WebKitが使われています。**WebKitはApple・Nokia・Adobeなどが中心になっているWebKit Foundationで、オープンソースのレンダリングソフトウェアとして開発されました。**

現在WebKitを採用している製品としては、Mac OSやiOSの標準ブラウザであるSafari、さらにはiOS向けのGoogle ChromeやFirefoxなどがあります。

*【参考】：[Safari - Apple（日本）](https://www.apple.com/jp/safari/)*
*【参考】：[Google Chrome｜ Google](https://www.google.com/intl/ja_jp/chrome/)*
*【参考】：[ Firefox ｜Mozilla ](https://www.mozilla.org/ja/)*

WebKitはApple社がMac OS標準ブラウザの「Safari」のレンダリングエンジンとして2002年に開発を始めました。**WebKitの元はUNIX系OS向けオープンソースHTMLレンダリングエンジンの「KHTML」です。**

WebKitは2005年にオープンソース化され、2008年にはGoogle社もその開発に参画し、WebKit「Google Chrome」やオープンソース版の「Chromium」のレンダリングエンジンとして採用されました。

2013年にAppleとGoogleが開発方針を巡って対立した結果、GoogleはWebKitから分岐した新しいレンダリングエンジンとして「Blink」の開発プロジェクトを立ち上げました。このBlinkはデスクトップ向けブラウザのChrome、Microsoft Edgeなどに搭載されています。

## レンダリングエンジンとWebエンジニア

Webブラウザは、Webプログラマーが開発したWebページを表現する重要なツールです。その表現にはHTMLレンダリングエンジンが使われており、Webブラウザに種類があるように、HTMLレンダリングエンジンにも種類があります。

作成したWebページは、*ブラウザの設計思想やそこに組み込まれているHTMLレンダリングエンジンによって見え方が違ったり、時にはレイアウトが崩れたりすることがあるため、注意が必要です。*

私たちが普段目にしているWebサイトはHTMLで書かれ、CSSで装飾し、体裁が整えられています。しかし、そのソース（元情報）は一般の方が見てもよく分かりません。**レンダリング（rendering ） は、特殊な言語やデータなどをインプットとして、それらの情報から画像や映像、音声などを生成することです。**

レンダリングエンジン（rendering engine）とは、レンダリングを行うソフトウェア部品のことです。レイアウトエンジン （layout engine）とも言われます。

### ブラウザのシェアを意識する

Webページを作成する際には、主要なブラウザに対応しなければならず、特にどのブラウザに完全対応するのかを決める必要があります。ブラウザとHTMLレンダリングエンジンはWebプログラマーにとって大切だということを常に意識しておきましょう。

ちなみに、デスクトップブラウザのシェア※は、日本ではChromeとMicrosoft Edgeだけで8割前後を占めています。スマートフォンではSafariが65%を占め、デスクトップとは真逆の状況になっています。

これから、ブラウザとHTMLレンダリングエンジンとの関係について紹介しますが、**デスクトップ向けのサイトではChromeとMicrosoft Edgeが採用したHTMLレンダリングエンジンの「Blink」を、スマホ向けサイトでは、SafariやiOS向けChromeなどが採用した「WebKit」を意識しておく必要がある**と言えます。

*【参考】：※1 [12月デスクトップブラウザシェア、日本のEdgeは世界の2倍 | マイナビニュース](https://news.mynavi.jp/techplus/article/20220106-2242636/)*
*【参考】：※1 [1月モバイルブラウザシェア、Safari増加続く | マイナビニュース](https://news.mynavi.jp/techplus/article/20220106-2242636/)*

### レンダリングエンジンの種類

Webブラウザで利用されているレンダリングエンジンにはいくつか種類があります。**代表的なレンダリングエンジンとWebブラウザとの関係を見てみましょう。**

*■ WebKit*
WebKitは、主にWebブラウザのSafarで使われています。軽快さ、スピードを特徴とするHTMLレンダリングエンジンです。Safariは、iPhoneやiPadなどのApple製品に標準で組み込まれているブラウザですが、他にiOS用で利用されるChromeやFirefoxでもWebKitが使われています。

本来、Google ChromeはBlink、FirefoxはGeckoというHTMLレンダリングを採用していますが、iOS版のChromeやFirefoxはApple社の規約に従ってWebKitを組み込んでいます。

*■ Trident*
「IE」として親しまれていたInternet Explorerで採用されていたHTMLレンダリングエンジンです。IEが廃止されたことにより、Tridentを利用する主要なブラウザはほぼ消滅し、ローカルでの利用がメインとなりました。

*■ EdgeHTML*
IEの後継ブラウザとなったMicrosoft Edge向けに、Tridentからフォーク（派生）して開発されたHTMLレンダリングエンジンです。2014年から2020年までMicrosoft Edgeで使われていました。

*■ Blink*
BlinkはGoogle社が中心に開発するHTMLレンダリングエンジンで、2013年にWebKitから分岐して開発が始まっています。同社のWebブラウザ Chromeをはじめ、様々なブラウザで利用されています。

Chromeは「Chromium」というオープンソースのブラウザ用ソフトをベースにしていますが、Microsoft Edgeも「Chromium」を採用したことで、HTMLレンダリングエンジンをBlinkに切り替えています。

*【参考】：[Opera Web Browser | Opera](https://www.opera.com/ja)*

IEサポート終了の影響は？終了の理由やEdgeのIEモードも紹介

WebKitが主にMacOSやiOSで動いているSafariなどのブラウザのHTMLレンダリングエンジンであることは理解できたと思いますが、実際にHTMLレンダリングエンジンに関する理解が進むにつれて、幾つかの疑問が湧いてきます。ここでは、*ネット上で見かけるWebKitにまつわる疑問について解説します。*

Webサイトの検証モードを確認した際に、誰もが1度は「-webkit-」という記述を目にすると思います。気になりながらも、その意味まで確認する人は少ないと思いますので、解説します。**-webkit-はCSSにおいて「ベンダープレフィックス（Vendor Prefix）」と呼ばれるもので、レンタリングエンジンに対応しています。**

ブラウザの開発に関わっているプログラマーの方を除いて、WebプログラマーはWebKitの使い方まで覚える必要はありませんが、ベンダープレフィックスは覚えておいた方がよいでしょう。

### ベンダープレフィックスとは

**ベンダープレフィックスはCSSのプロパティの拡張機能を各ブラウザに実装するための識別子です。**

まだブラウザで標準になっていない、非標準のCSSプロパティに-webkitのような「ベンダープレフィックス」をつけることで、新たな機能が利用できるようになる仕組みです。

CSSには、「-webKit-transition:」というように記述します。たとえば、要素を回転させて表示する「Tranform」プロパティにベンダープレフィックスを付ける場合は、

div {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

HTMLの記事（2ページ目）