## HTMLはホームページを作成するマークアップ言語

**HTMLはホームページを作成するためのマークアップ言語です。**ホームページを表示する際には、HTMLファイルをWebブラウザが解釈して、テキスト、画像、リンクなどのさまざまな要素が組み合わされたページを表示します。

HTMLはホームページの構造を定義し、内容を表示するのに使います。一方、ホームページのレイアウトやデザインを調整するにはCSSが利用されます。

この記事では、HTMLを書いてホームページを作成したい方のために、HTML文書の基本構造や、実際のホームページの作成方法、CSSの概要などについて解説していきます。

HTMLは「HyperText Markup Language」の略で、Webページの基礎となるマークアップ言語であり、インターネット上のほとんどのホームページで使用されています。

*HTMLは、テキストや画像などを含む文書の構成要素に意味を付け、文書を構造化するために用いられます。*

例えば、\<h\>タグを使うと、その部分が見出しであること、\<p\>タグを使うことで、その部分が段落であることを示します。これにより、ホームページの構造やレイアウトを設計することが可能です。

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

HTML入門：基本から学ぶHTMLの構造と構成要素を解説！

近年ホームページ作成ソフトウェアや、ワードプレスなどのCMSツールなどの普及により、HTMLを直接書かなくてもホームページを作成することが可能になりました。しかし、これらのツールを使うことで作成者が意識していなくても、HTMLが使用されています。

*そのため、ホームページを作成する際、HTMLの知識を持っていると、自身のアイデアをより自由に表現でき、Webページ作成の幅が広がります。*

ホームページ作成ツールに頼るだけでなく、HTMLの知識を併せ持つことで、より柔軟にホームページを作成したり、問題が発生した場合の対処をしやすくなったりするでしょう。

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

HTMLでホームページを作成するにあたって、まずはHTMLの基礎知識を学びましょう。HTMLの基本的な構造や、さまざまなタグについて解説します。

HTMLは、一定の構造に基づいて記述されます。以下に、基本的な構造を持つHTMLコードを示します。まずは、HTML文書の土台となる要素を解説します。

HTML文書内では、「\<\>」で囲われた「タグ」を使って、文章をマークアップ（意味付け）していきます。

```
<!DOCTYPE html>
<html lang="ja">
<head>
  <title>タイトル</title>
</head>
<body>
  <h1>見出し</h1>
  <p>段落</p>
  <a href="リンク先のURL">リンク文字列</a>
</body>
</html>
```

*■\<!DOCTYPE html\>*
使用するHTMLのバージョンを宣言するためのものです。\<!DOCTYPE html\>と記載することで、現在主流となっているHTML5を使用することを宣言できます。

*■\<html\>~\</html\>*
\<html\>タグはHTML文書の始まりです。上記のコードでは\<html lang="ja"\>となっており、lang="ja"の部分でこのHTML文書で使われる言語が日本語であることも同時に示しています。

\</html\>は\<html\>と対応する閉じタグで、ここでHTMLの記述が終わることを意味しています。

*■\<head\>~\</head\>*
\<head\>タグ内はHTMLの設定を行う場所であり、文字コードの設定やタイトルの設定などが行われます。

*■\<body\>~\</body\>*
\<body\>タグ内は、実際に表示されるコンテンツが記述されます。ホームページを作成する上でメインとなる部分と言えます。例えば、見出しや段落、画像などの要素が\<body\>タグの中に記述され、Webブラウザ上で表示されます。

これらの要素は、HTML文書の基本となるものです。上記のコードをテンプレートにして、\<head\>タグ内の情報や\<body\>タグ内のコンテンツを記載していくのもよいでしょう。

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

HTMLでは、他にも多くのタグを使ってWebページの構造とコンテンツをマークアップします。よく使う代表的なタグをいくつか説明します。

*■\<h\>タグ*
\<h\>タグは見出しを定義します。実際には「h」の後ろに数字を付けて\<h1\>から\<h6\>という記述で使われ、数値が小さいほど見出しの重要度が高くなります。

*■\<p\>タグ*
\<p\>タグは段落を定義し、\<p\>～\</p\>で囲われた部分は1つの区切りを持つ文章のまとまりを意味します。

*■\<br\>タグ*
\<br\>タグは改行を意味します。記述することで文章を途中で区切って、次の行の頭から続きの文章が続きます。\<br\>タグには閉じタグはなく、\<br\>単体で改行を意味します。

*■\<img\>タグ*
\<img\>タグは、ホームページ内に画像を表示するためのタグです。src属性に画像のURLを指定します。\<img\>タグには、閉じタグはありません。

*■\<a\>タグ*
\<a\>はリンクを定義し、href属性にリンク先のURLを指定します。これを使うことで、ブラウザ上で文字列をクリックすると別のページへ移動する「ハイパーリンク」を実装できます。

*■\<table\>タグ*
\<table\>タグは、表形式のレイアウトであるテーブルを定義します。\<table\>～\</table\>内に、行を意味する<tr>タグ、セルを意味する\<td\>タグを並べてテーブルを構成します。

## HTMLでホームページを作成する手順

それでは、HTMLで実際にホームページを作成する方法を解説します。順を追って1つずつ行っていけば、思っていたより簡単にホームページが作成できることが分かるでしょう。

*HTMLでホームページを作成するためには、HTMLを書くためのテキストエディタが必要です。*

Windows標準アプリの「メモ帳」でも作成可能ですが、コードが見やすい色変更機能やエラー表示を持つテキストエディタを使用すると、より効率的にHTMLを作成できます。

例えば、HTML編集でよく使われるテキストエディタには、サクラエディタやTeraPad、Notepad++、Visual Studio Codeなどがあります。

また、HTMLの表示確認にはWebブラウザが必要です。作成したHTMLファイルの表示とコーディングの結果確認に使用します。

代表的なものにMicrosoft Edge、Google Chrome、Mozilla Firefox、Safariなどがあります。ブラウザにより表示が違う場合もあるため、できるだけ多くのブラウザで確認できることが望ましいでしょう。

テキストエディターとは？エンジニア初心者におすすめのエディタも紹介！

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

実際にHTMLファイルを作成してみましょう。

まずはテキストエディタを開いて、「HTMLの基本的な構造」で示したHTMLコードをコピーして貼り付けます。

次に、自分が作りたいホームページの内容を編集していきます。例えば、大見出しの文章の後に、中見出しと文章が続くページを作成する場合は、\<body\>～\</body\>内に以下のように書きます。

```
<body>
  <h1>大見出し</h1>
  　<p>段落</p>
　<h2>中見出し</h2>
  　<p>段落</p>
</body>
```

HTMLの記述が終わったら、ファイルを保存します。ファイル名は、例えば「sample.html」のように「（半角英数字の名前）.html」として保存します。これでHTMLファイルが作成されます。

HTMLファイルを作成したら、ブラウザで表示を確認しましょう。
作成したHTMLファイルをダブルクリックすると、既定のブラウザが起動し、HTMLファイルが表示されます。

表示されたページには、記述した大見出しと中身見出しの文章が表示されているでしょう。まだ文字だけでシンプルな表示ですが、ここからさらにHTMLを追記して、自分のホームページのコンテンツを充実させていくことができます。

*このように、HTMLを記述してブラウザで表示を確認することで、作業の結果を確認しながらホームページを作成していきます。*

### HTMLファイルをアップロードする

HTMLファイルを作成したら、次はインターネット上に公開します。*そのためには、作成したHTMLファイルを、サーバにアップロードする必要があります。*

一般的に、サーバはレンタルサーバを借りて利用します。レンタルサーバは、インターネット上にファイルを置いておくための場所です。

レンタルサーバは、作成するホームページの規模にもよりますが、個人向けの小規模なサイトであれば、まずは低価格のプランでも十分でしょう。レンタルサーバ会社によっては申し込み前の試用期間もあるので確認してみてください。

サーバをレンタルしたら、FTPソフトを使ってHTMLファイルをアップロードします。

FTPソフトは、ファイルをサーバに転送するためのソフトウェアです。FTPソフトにはさまざまな種類がありますが、広く使用されているものとして、Windows用のFFFTP、Win・Macどちらでも使えるFileZillaなどがあります。

サーバにファイルをアップロードしたら、ホームページを表示してみましょう。ホームページのURLは、レンタルしたサーバの管理画面で確認できます。

ブラウザにアップロードしたHTMLファイルの内容が正しく表示され、問題がなければ作業は完了です。

## HTMLでホームページを作成する際のポイント

ここでは、HTMLでホームページを作成するときのコツを説明します。これらを意識することで、よりスムーズにホームページ作成を進められるでしょう。

### 作りたいホームページを明確にする

**HTMLでホームページを作成する際には、作成するホームページの目的を明確にすることが大切です。**
個人向けの情報発信サイトなのか、ビジネス向けで顧客とのやり取りを行うのかなどによって、必要とされる機能やデザインが大きく異なるためです。

個人向けサイトではブログやポートフォリオの掲載が主な機能となり、ビジネス向けサイトであれば、商品・サービスの説明や問い合わせフォームなどの機能が必要でしょう。

このように、あらかじめホームページのコンセプトを明確に設定しておくことで、必須の機能やデザインを見落とすことなく、効果的にホームページを構築することができます。

HTMLでホームページを作成する際には、HTMLタグを正しく記述することが重要です。
*単純な誤記だけでなく、タグの入れ子構造の順序や、開始タグと閉じタグの対応などが誤っていると、思った通りに表示されません。*

しかし、すべてのタグの使い方を暗記しておく必要はありません。タグの記述方法については、インターネット上で多く情報を得られますし、記述サンプルも見つかるでしょう。

また、タグの色分け表示や入力時の自動補完、記述ミスを知らせる機能などがあるテキストエディタを利用することで、効率的に正しいタグを記述することができます。

## CSSでHTMLのレイアウトを整える

CSSは、HTMLで書かれたコンテンツのスタイルやデザインを制御するための言語で、「HTML/CSS」とHTMLとセットで説明されることも多いです。

CSSを使うことで、HTMLで作成したページの各要素を自由に配置したり、装飾したりすることができます。

### CSSでHTMLのデザインを統一できる

CSSを活用することで、Webサイトのデザインを定義することができます。例えば、文字の大きさや色を変更したり、画像の位置を調整したりすることができます。

*文書内の構成要素の意味付けを目的とするHTMLと、表示レイアウトを担当するCSSが分離していることで、デザインの一貫性を保ちながらホームページのコンテンツ編集を行うことができます。*

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

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

CSSの基本的な構文は、セレクタとプロパティ、値の組み合わせで構成されます。

セレクタは、「p」「h1」「h2」などの、適用したいHTML要素を指定します。「id=”属性名” class=”属性名”」など、指定したidや属性の属性名でも指定できます。

プロパティは、適用するCSSのスタイルの種類を指定します。文字色を指定する「color」や、フォントサイズを指定する「font-size」などがあります。

値は、プロパティで指定される具体的な値です。定義されたキーワードや数値で指定します。

HTMLはホームページ作成のためのマークアップ言語で、ブラウザはHTMLファイルに従ってテキストや画像などを表示します。HTMLを学べば、自由にホームページ作成ができます。この記事では、HTMLの基本構造や、HTMLによるホームページ作成手順を解説します。

HTMLはホームページを作成するためのマークアップ言語である

HTMLでホームページを作成するためには、テキストエディタとWebブラウザが必要である

ホームページのレイアウトやデザインを調整するにはCSSを使用する

HTMLでホームページを作成するには？作り方やポイントを解説

## HTMLでJavaScriptを動かせるのか

マークアップ言語であるHTMLは、さまざまなWebサイトやCMSなどで活用されており、CSSとセットで利用されることが多い言語です。しかし、HTML/CSSのみではアニメーションなどの動きを加えることができず、クオリティの高いサイト作りが難しくなります。

スライドショーやプルダウンメニューなどの作成は、ブラウザで動きを加えられるJavascriptで実装されることが多いです。

一般的なWebサイト作りは、**HTMLによってWebサイトを構築し、CSSによって装飾が施され、Javascriptによってアニメーションなどの動きを加える、といったそれぞれの言語の特性を活かして使い分けることが重要です。**

では、このHTMLでJavascriptを動かすにはどうすればいいのでしょうか。

この記事では、HTMLでJavascriptを動かす方法の他、Webサイト作りで活躍するJavaについても触れていきます。HTML・Javascript・Javaを習得してITエンジニアやWebクリエイターを目指す方は、ぜひ本記事を参考にして転職に役立てましょう。

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

## HTML・JavaScriptで何ができる？

前述したように、Webサイト作りではHTMLやJavaScriptなどの言語が欠かせません。ここでは、HTML・JavaScriptについて具体的に何ができるのか、さらにWeb開発において活躍するJavaとの関係性についても解説します。

この3つの言語について基礎をおさらいしていきましょう。

HTML（エイチティーエムエル）とは、Webページを作成するために開発された言語です。プログラミング言語とは異なり、文章構造や視覚表現を記述することのできるマークアップ言語です。

*世界中のWebサイトのほとんどがこのHTMLで記述されており、視覚的かつ直感的にコードを書くことができます。*2021年にHTML5が廃止され、現在の名称である「HTML Living Standard」になりましたが、基本的な要素や属性の扱いは変わりません。

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

JavaScript（ジャバスクリプト）は、オブジェクト指向なインタプリタ型のプログラミング言語です。コンパイルを不要とすることから、クライアント側のブラウザ上でプログラムを動作させることが可能です。

JavaScriptは主にWebサイト上に動きを付ける目的で利用されています。記述内容が似ているJavaとは別物の言語であり、用途や目的も大きく異なります。

JavaScriptの特徴はブラウザ上で動作させることが可能な点であり、*ブラウザ上のスクロールに合わせて画像をフェードアウトさせたり、画像のポップアップやマウスの動きに合わせて動作させたりすることができます。*

最近では、大規模なWeb開発にはVueやReact、AngularといったJavaScriptのフレームワークがよく使われています。

JavaScriptでできること6選！向いている人や学習方法も解説

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

幅広い機能を提供できることから、習得難易度もHTMLやJavaScriptよりも高めです。

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

Javaとは？人気プログラミング言語の特徴やメリットを解説

## HTML・Javascriptを扱う職種や年収

ここでは、HTMLとJavascriptを扱うITエンジニアにはどういった職種があるのかを紹介します。また、今後スキルを習得するにあたって気になる年収事情についてもまとめました。

**HTMLとJavascriptを用いる職種としては、マークアップエンジニアやフロントエンドエンジニアが挙げられます。**

マークアップエンジニアとは、Webサイト制作においてHTML・CSSなどのマークアップ言語を主に利用して、ユーザビリティを配慮したWebサイト作成に携わる職種です。

具体的には、Webデザイナーが設計したデザインを、HTML・CSSを用いてコンピュータにプログラムとして実装します。Webサイト制作におけるフロントエンド部分の最終工程を担当します。

フロントエンドエンジニアとは、Webサイトにおいてユーザがテキストを入力したり、ボタンをクリックしたりするフロントエンド部分を担当するエンジニアです。

具体的には、Webデザイナーが作成したデザインをもとに、Webサービスの設計やマークアップ言語を使用してコーディング、WordPressなどのCMS構築などを担当します。

マークアップエンジニアとは？仕事内容や年収、将来性について解説

フロントエンドエンジニアとは？未経験から目指す効果的な転職方法を徹底解説！

ここでは、前項で紹介したフロントエンドエンジニアの年収例を参考に紹介します。

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

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

**フロントエンドエンジニアとして年収をさらにアップさせるには、後述して紹介する資格を取得したり、プログラマーやシステムエンジニアなどにキャリアアップしたりする方法がおすすめです。**

【参考】：[マイナビエージェント 職業別年収ランキング](https://mynavi-agent.jp/helpful/income/category/creative_05.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)

前述したように、フロントエンドエンジニアやマークアップエンジニアとして活躍するには、HTML・CSS・JavaScriptに関係する資格の取得が有効です。おすすめの資格は以下の通りです。

*◼︎Webクリエイター能力認定試験*
Web制作業界でもっとも受験者数が多く、標準的なWebサイト制作のスキルが問われる資格です。「スタンダード」「エキスパート」の2つの認定区分に分けられます。

【参考】：[Webクリエイター能力認定試験｜資格検定のサーティファイ](https://www.sikaku.gr.jp/web/wc/)

*◼︎CIW JavaScript Specialist*
海外でも通用するグローバルな資格であり、インターネット・Web知識・技術に関する理解度が問われ、自身のITスキルや能力を国際的に証明できます。試験は英語のみですが、海外ビジネスのチャンスがある方にはおすすめです。

【参考】：[Page not found - Certification Partners](https://ciwcertified.com/ciw-certifications/web-development-series/javascript-specialist)

*◼︎HTML5プロフェッショナル認定試験*
LPI-Japanによって実施されているHTMLのスキルを証明できる資格です。試験はレベルに応じて、レベル1（初級・中級レベル）とレベル2（中級・上級レベル）に分けられます。

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

*◼︎基本情報技術者試験*
ITエンジニアとしての基礎知識やスキルを問われる国家試験であり、「ITエンジニアの登竜門」とも呼ばれる資格です。初級〜中級レベルであり、学生から現役エンジニアまで幅広い年齢層の受験者がいます。

【参考】：[基本情報技術者試験(FE)](https://www.ipa.go.jp/shiken/kubun/fe.html)

Webクリエイター能力認定試験とは？メリットや活かせる仕事も解説

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

基本情報技術者試験とは？試験概要や合格率、ITパスポートとの違い

ここまでで、それぞれの言語の役割と関係性を説明しました。ここからは、Webページの土台とも言えるHTMLからどのようにして他の言語を動かすのかを説明します。まずは、JavaScriptを動かす方法を紹介します。*方法としては「外部ファイルから呼び出す」「HTMLに直書きする」の2通りです。*

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

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

異なる記述のやり方として、以下のような記述方法もあります。

```<script type="text/javascript" src="test.js"></script>```
<br/>
type="text/javascript"を追加する方法もありますが、これはHTML5より昔のバージョンでのみ必要であった記述です。HTML5（HTML Living Standard）では、記述なしは自動的にJavaScriptとして認識してくれることから不要となっています。

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

``` <script> 　
～JavaScriptのコードを記述～
</script>```
<br/>
外部ファイルから呼び出すときと同様に、HTML5（HTML Living Standard）ではtype="text/javascript"は省略することができます。

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

サーブレットとは、Javaによって記述されたWebコンテンツを生成するためのプログラムです。例えば、サーブレットによって記述に応じたHTMLを生成し、動的なWebページをブラウザ上に表示することができます。

このサーブレットはTomcatなどのWebコンテナ上で実行することができます。Tomcatとはオープンソースソフトウェアであり、Webアプリケーションサーバの1つです。

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

例えば、サーブレットのリンク先を/servlet/test/としてtest.javaをサーブレットの本体とすれば、以下のような記述でサーブレットを呼び出すリンクをWebページ上に作ることができます。

```<a href="/Servlet/test">サーブレットリンク先</a>```
<br/>
別の方法としては、\<form>タグを使用してサーブレットへフォーム入力値を送信する例もあります。

この場合、同じようにサーブレットのリンク先を/servlet/test/とすると、以下のようになり、getメソッドを使うことでサーブレットへフォーム入力値がURLに付加されて送信されます。

```<form acrion="/Servlet/test" method="get">～フォーム内容～</form>```
<br/>
サーブレット側でフォーム入力値を受けるようなプログラムにすることもでき、フォーム入力値の処理を行うWebアプリケーションを作ることができます。

Javaサーブレットとは？動的サイトの作成に使われるメリットなどを解説

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

```<%@ page contentType="text/html;charset=（文字コード名）" %>
<% out.print("テスト"); %>
現在時刻は<%= nowTime %>です```
<br/>
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エディタの互換性を保つことが可能です。*

こういったフレームワークを使いこなせるようになれば、業務効率がアップするだけでなく、ITエンジニアやクリエイターとしての価値も高まりやすくなります。未経験から挑戦する際は、こうしたツールの習得にも励みましょう。

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

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

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

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

HTMLでJavaScriptを動かすには？Javaについても解説

**HTMLメールは、画像を使ったり、文字に装飾を加えたりして視覚的に訴えることで受信者の関心を引きつけるメールです。**メールマガジンやマーケティングメールなどに広く利用され、高い訴求効果が得られることから、多くの企業で活用されています。

しかし、HTMLメールを正しく作成するためにはその仕組みを知ることが必要で、いくつか気を付けるべき注意点もあります。

この記事では、HTMLメールに興味がある方のために、HTMLメールの概要から、作り方の手順、注意点などを解説します。

HTMLとは？特徴やできることなど基礎知識を初心者向けに紹介

ここでは、HTMLメールの基礎的な知識や、テキストメールとの違いなどの概要について解説します。あわせて、HTMLメールのメリットについても確認しましょう。

HTMLメールとは、HTML（HyperText Markup Language）を用いて作成されるメールです。HTMLは主にWebサイトの表示に使われるマークアップ言語で、HTMLメールではメール内にWebサイトのようなさまざまなコンテンツを含むことができます。

*具体的には、画像やリンクを自由に配置し、色やフォントのスタイルを細かく調整することが可能です。*

### HTMLメールとテキストメールの違い

テキストメールは、一般的によく使われる純粋な文字のみのメールです。日頃、個人的にやり取りするメールはテキストメールが多いでしょう。

テキストメールはシンプルで軽量ですが、リンクテキストの挿入や、画像の埋め込み、視覚的な装飾はできません。

*一方、HTMLメールでは、テキストの色や大きさを変更したり、画像を表示させたり、リンクを埋め込むことが可能です。これにより、受信者の興味を引くデザインを施すことができます。*

ただし、テキストメールは誰でも作成できますが、HTMLメールの作成には一定の技術が必要です。HTMLの知識を学ぶ必要があり、作成やテストにも時間がかかります。

HTMLメールの最大の利点は、視覚的な訴求力が高く、受信者の注意を引きやすいことです。*そのため、商品やサービスのプロモーションに適しており、マーケティング効果を高めることができます。*

企業のブランドカラーやロゴをメール内に反映することで、統一感のあるデザインになり、ブランドイメージの強化や好感度の向上に役立てることもできます。

さらに、HTMLメールはマーケティングの効果測定に優れています。開封率、クリック率、コンバージョン率など、様々な評価指標を追跡できるため、効果的なマーケティングを行うためのデータを収集できます。

## HTMLメールの具体的な作成手順

ここでは、HTMLメールの作成手順について詳しく解説します。HTMLメールの基本的な構造を理解し、CSSでの装飾や配置、リンクや画像、ボタンの作り方について確認しましょう。

### HTMLメールのベースを作成する

HTMLメールを作成するためには、まずHTMLの基本的な構造を理解する必要があります。*ベースとなる枠組みを作っておいて、配信する時にメールの内容の部分を記載していくと良いでしょう。*

以下はHTMLメール全体のベースとなるサンプルです。

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>HTMLメールのタイトル</title>
</head>
<body>

</body>
</html>
```

初めに記載するのは、DOCTYPE宣言です。これは文書がHTMLであることを示し、そのバージョンを指定するものです。HTML5に対応していないメールクライアントがあるため、HTMLメールではHTML 4.01を使うことが一般的です。

DOCTYPE宣言のあと、HTMLメールの内容を\<html>～</html>内に記載します。

\<head>～</head>内にはページの情報やページタイトルを記載し、\<body>～</body>内にメールのメインとなる内容を記載します。

メール本文は、Webサイトと異なり\<h>タグや\<p>タグはあまり使用されません。また、異なるメールクライアント間での表示崩れを防ぐためテーブルレイアウトを使って構成することがほとんどです。

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

HTMLメールでは、CSS（Cascading Style Sheets）を使ってデザインやレイアウトを整えます。CSSはHTMLと組み合わせて、文字や画像の配置、色、フォントなどのスタイルを定義する仕組みです。

HTMLメールにおけるCSS適用方法には、主に埋め込み形式とインライン形式の2つの方法があります。

*■埋め込み形式*
HTMLメールの\<head>部分にスタイルを定義する方法です。埋め込み形式では、PC、スマートフォンなど、メールを閲覧するメディアのタイプに応じて条件分岐を作成できるメディアクエリを設定することができます。

メディアクエリを使うことで、デバイスの画面サイズによって表示を変えることができ、特にレスポンシブデザインに対応する際に便利です。

*■インライン形式*
インライン形式は、\<body>部分で各HTML要素に直接スタイルを記述する方法です。

インライン形式でのCSSは、ほとんどの主要なメールクライアントや、古いメールクライアントでも対応しており、確実に適用されやすい、信頼性の高い方法です。

HTMLメールでは、これらの方法を組み合わせて使うことが一般的です。埋め込み形式を全体的なレイアウトや共通スタイルに利用し、インライン形式を特に重要なスタイルに適用します。

### リンクや画像、ボタンの作り方

HTMLメールを作成する際、リンクや画像、ボタンなどの要素を効果的に活用することで、メールの視覚的効果を高めたり、リンク先へ誘導したりすることができます。

HTMLの記事（1ページ目）