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

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

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

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

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

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

**HTMLとは「Hyper Text Markup Language」の略称で、Webサイトの文書構造を記述するための言語のことです。**近年ではWordPressなどのCMSの登場により、プログラミング経験がないような初心者でもHTMLを理解できれば、Webサイトの簡単な装飾ができるようになります。ここでは、初心者向けにHTMLの概要や特徴について詳しく紹介します。

**HTMLとは、インターネット上のWebサイトの文書構造を表現するための言語であり、CSSやJavaScriptといった言語と一緒に使用されるのが一般的です。**CSSを使用すれば、Webサイトのスタイルを指定することができます。またJavaScriptを使用すれば、動的なWebサイトを作成することが可能です。CSSやJavaScriptを適用するためにも、HTMLはまず習得すべき必須な言語と言えるでしょう。

*HTMLのような文書を記述する言語は、一般的にマークアップ言語とも呼ばれます。*マークアップ言語では、文字や画像などにタグを使用してマーキングを行い、文書の骨組みを明確にできます。HTMLタグは、開始タグ「<タグ名>」と終了タグ「</タグ名>」でテキストを囲んで使用するのが一般的です。なお終了タグが不要なタグ要素もあるため、注意する必要があります。

**HTML5とはHTMLのバージョンが「5」であることを意味します。**HTML1が開発されたのは1993年であり、バージョンアップを重ね、1999年にHTML4が開発されました。これまではHTML4がWebサイトを作成するための言語として主に利用されてきました。*2014年にHTML5がリリースされ、HTML5が現在の最新バージョンです。*

しかし**2021年1月28日にHTML5は廃止され、「HTML Living Standard」が標準規格となっています。**現状ではHTML5と「HTML Living Standard」では大きな差異はありませんが、「HTML Living Standard」は日々アップデートされるため注意が必要です。

*HTML5はHTML4と比較して機能の豊富さが特徴です。*例えばHTML5はマルチデバイスに対応しており、スマホなどさまざまなデバイスに対応したWebサイトを比較的簡単に作成できます。また、複数のブラウザにも対応しているのも魅力です。他にもHTML5を使用すれば、3Dアニメーションの作成・音声や動画の埋め込み・フォームの入力チェックなどができます。

HTMLはWebサイトを作成するために必要な言語であることは理解できたでしょうか。ここではHTML入門ということで、HTMLの基礎コードを初心者向けに紹介します。

**HTMLではタグ「<>」を使用して、文章構成を表現します。**例えば、タイトルを付けたいときは「titleタグ」を使用します。開始タグと終了タグの間にテキストを記述すれば、Webサイトのタイトルを作成することが可能です。画像を挿入したいときには「imgタグ」を使用しますが、このタグには終了タグはありません。そのため*終了タグの不要なタグがあることを覚えておきましょう。*

**要素の細かい動きを設定するためには、属性や属性値を記述する必要があります。属性の記述方法は「<要素名 属性="属性値">」です。**開始タグの要素名の後ろには、半角のスペースを空けなければなりません。また属性の後ろにはイコール「=」を付け、属性値はダブルクォーテーション「"」で囲む必要があります。なお*属性値を囲む際にシングルクォーテーション「'」も使用できますが、一般的にはダブルクォーテーション「"」を使用します。*

ここからはサンプルとして、英語や日本語などの言語を指定する「lang」という属性を使用し、例を示します。なお「lang」という属性は「html要素」に使用することが多いです。

この記述により、*HTML内の言語は日本語という設定にすることができます。*属性名では「ja」を指定しており、「en」にすれば英語に設定可能です。

属性は複数指定することもできます。また**よく使用される属性には「id」「class」があります。**これらの属性は、CSSでデザインを定義するときに便利です。*「id」は同じWebサイトで属性名が重複してはならない*という特徴があります。一方*「class」は同じWebサイトで同じ属性名を何度でも使用することが可能です。*

HTMLの基礎コードについては理解できたでしょうか。他にも理解しなければならないHTMLの基礎は数多くあるため、実際にサンプルコードを読み、まずはコードの意味を1つひとつ理解するのがおすすめです。ここでは、よく使用されるHTMLのコードについて詳しく紹介します。

**見出しタグには「h1タグ」から「h6タグ」までの6種類があります。**大きい見出しを作成したいときには「h1タグ」を使用し、数字が大きくなるほど小さい見出しとなります。*見出しタグを上手く使用すれば、ユーザビリティやSEO効果の向上が期待できるでしょう。*見出しタグはテキストの見た目を設定するために使用するのではなく、Webサイトの階層構造をユーザーや検索エンジンにわかりやすく示すために使用する点に気を付けましょう。

**「imgタグ」は画像を挿入するために使用します。**これまでにも説明しましたが、「imgタグ」では終了タグが必要ありません。*「src」という属性を使用して、表示する画像ファイルを指定することができます。*また「alt」という属性を使用すれば、画像を表示できない場合に画像の代替テキストを表示することが可能です。さらに「width」「height」という属性を使用すれば、Webブラウザ上で表示する画像の幅や高さを指定することができます。

**「aタグ」はリンクを貼るために使用します。「href」という属性を使用して、リンク先を指定することが可能です。**リンク先には遷移させたいURLを入力します。また「aタグ」ではテキストだけではなく、画像を挟むこともでき、画像のリンクボタンを作成することが可能です。

**「pタグ」は段落を表現するために使用します。**「pタグ」は頻繁に使用される要素の1つです。「pタグ」の開始タグと終了タグで囲まれたテキストは1つの段落であることを示します。

HTMLのよく使用されるコードについては理解できたでしょうか。ここでは、HTMLの初心者向けの勉強方法について詳しく紹介します。

HTMLに関する本は数多くあり、超初心者向けから上級者向けまでさまざまな本があります。初心者の方は、HTMLの概要や基礎についてゼロから説明している本を選ぶのがおすすめです。*本を活用するメリットはネット環境がなくても勉強できるため、場所を問わず学習できる点です。*また簡単にメモを書いたり、付箋を貼ったりして自分なりにアレンジできます。さらに、費用がほとんどかからないのも魅力です。

一方本を活用するデメリットとして、実践的なスキルが身に付きづらい点が挙げられます。**HTMLに限らずプログラミング言語は、実際に手を動かして試行錯誤しながら学ぶことによってスキルが身に付きます。**そのため体系的な知識を習得できる本だけではなく、サンプルコードや練習問題の記載された本も購入するのがおすすめです。

### HTML入門サイト（学習サイト）を活用する

近年では、インターネット上でプログラミング言語を勉強できる学習サイトも数多くあります。例えば、「*Progate*」「*ドットインストール*」「*schoo*」「*Udemy*」などがあります。学習サイトはプログラミングスクールと比較するとサポートが少ないため、独学で勉強したい方向けです。また、プログラミングスクールよりも一般的に安い費用で利用できます。

*学習サイトを利用するメリットは、実際に手を動かしながらHTMLを学べる点です。*環境構築が不要な学習サイトであれば、すぐにHTMLのコーディングを始められます。ただし、将来的にWeb制作現場などで働きたいと考えている方は、環境構築から丁寧に解説されている学習サイトを選びましょう。

**HTML初心者の方は、本で体系的な知識をインプットし、学習サイトでアウトプットすると効率よく習得できます。**そのため本と学習サイトを併用してHTMLを学習するのはおすすめです。独学な苦手な方は、プログラミングスクールの受講を検討しましょう。

## 実際に手を動かしながらHTMLを学習しよう！

これまでに、HTMLの概要・基礎コード・コード一覧・勉強方法について初心者向けに解説しました。**HTMLとはWebサイトの文書構造を記述するための言語を指します。**なお、*現在のHTMLの標準規格は「HTML Living Standard」です。*

*HTMLでは開始タグ「<タグ名>」や終了タグ「</タグ名>」を使用して、文章構成を表現します。*ただし終了タグが不要なタグ要素もあるため、注意が必要です。また*属性を付ければ、要素の細かい動きを設定することができます。*例えば「imgタグ」を使用するときには、「src」という属性を使用して表示する画像ファイルの指定が可能です。

**HTMLを勉強するにあたって、本と学習サイトを併用するのがおすすめです。**特に、本はサンプルコードや練習問題が記載されているものを選びましょう。実際に手を動かしながら学習することで、HTMLの実践的なスキルを身に付けることができます。

HTMLとはWebサイトの文書構造を記述するための言語です。HTMLを勉強するにあたって、本と学習サイトを併用するのがおすすめです。当記事では、HTMLの概要・基礎コード・コード一覧・勉強方法について初心者向けに解説します。

現在のHTMLの標準規格は「HTML Living Standard」

HTMLの開始タグに属性を付ければ、要素の細かい動きを設定できる

HTMLを独学で学習する場合は、本と学習サイトを併用するのがおすすめ

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

- [HTMLを独学で勉強するには? エンジニアが学ぶべき理由や習得に必要な時間](https://and-engineer.com/articles/YXpquhUAACsAivlG)

- [HTMLでできることは少ない？できないことやタグも一覧でまとめた](https://and-engineer.com/articles/YV1ZtxAAACn9LtD9)

- [HTMLのdivタグとは？読み方・目的・使い方などを解説！](https://and-engineer.com/articles/YUmP1hAAACUA1NVs)

まずは、*HTMLとは何か*について解説します。HTMLが使われる場面やPHPなどのプログラミング言語との違いについて詳しくみていきましょう。

### HTMLはホームページの文書を作成するための言語

HTMLとは、*ホームページの文書を作成するための言語*のことです。ホームページの文書には見出しが表示されていたり、画像・表・リストなどが挿入されていたりします。**HTMLでは「タグ」というものを使って、このような文書を書き表すことが可能**で、HTMLのソースコードを書いたファイルを「HTMLファイル」と呼びます。HTMLファイルをブラウザで開くと、ブラウザがHTMLコードを読み取り、ホームページを作成します。

また、HTMLと並んで多く使用されるのが「CSS」で、**ホームページのデザインを整えるための言語**です。デザインはHTMLだけでも整えることは可能ですが、HTMLのみだとコードの中身が複雑になり、開発が困難になってしまいます。そこで、デザイン部分の処理はCSSを使って記述することでコード全体がまとまり、ホームページの修正を行う際も比較的容易になります。

CSSとは？初心者が覚えたい基礎知識から使用例まで解説！

HTMLを使う代表的な仕事は、*Webデザイナー*です。WebデザイナーはWebサイトのデザイン面を担当する仕事で、どういったデザインにするか考え、デザイン通りになるようにHTMLコードを記述していきます。

他にも、マークアップエンジニアという仕事もあります。マークアップエンジニアは、HTMLコードの記述のみに特化したエンジニアです。**HTMLやCSSについてより深く精通し、ハイレベルなコードを書ける必要がある**でしょう。

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

### HTMLとプログラミング言語の違い

HTMLは厳密には、*プログラミング言語ではありません*。プログラミング言語とは、コンピュータに処理を行わせるための言語のことです。たとえば、コンピューターに計算をさせたり、同じ処理を繰り返しさせたりします。

**HTMLは計算や繰り返し処理を記述することができない**ため、それらの処理が得意なPHPやJavaScriptなどのプログラミング言語とは、明確に区別されています。

PHPでできることを解説！機械学習やスマホアプリ開発はできる？

JavaScriptでできることとは？代表的なものから特徴まで詳しく紹介！

## HTMLを勉強するのにおすすめな本5選

*HTMLを勉強するのにおすすめの本*を5つ紹介します。これらの本は、これからHTMLを勉強する方に特におすすめです。どの本を購入すべきかわからない場合はこの中から選んでみてください。

### スラスラわかるHTML&CSSのきほん

こちらは、ベストセラーにもなっているHTMLの本です。HTMLとCSSの基礎について丁寧に解説しており、スラスラ理解できる1冊です。書籍内にはソースコードも多く掲載されており、詳細な解説が特徴です。**自分が書いたコードの意味を、一行一行理解しながら進めていける**でしょう。

*[スラスラわかるHTML&CSSのきほん](https://www.sbcr.jp/product/4797393156/) *

### いきなりできます！最新ホームページ作り&HTML超入門

本書は、*ホームページ作りについて解説が網羅されている1冊*です。HTMLの書き方だけでなく、画像の扱い方やサーバにファイルをアップロードする方法まで、詳しく解説されています。さらに、Twitterボタンの設置方法など細かいところも抜けなく説明がされているため、本書でホームページ作りの基礎が身につくでしょう。
なお、本書は**Windows対応となっており、Macには対応していないので要注意**です。

*[いきなりできます！最新ホームページ作り&HTML超入門](https://www.sbcr.jp/product/4797382235/) *

### いちばんやさしい HTML&CSS 入門教室

本書は、HTMLとCSSの使い方について*ステップ・バイ・ステップで学ぶことが可能*です。また、現在のトレンドを意識し、**スマホ向けサイトの作り方を重点解説**しているのもポイントでしょう。最終的には、レスポンシブデザインの制作ができるようになります。現場で役立つスキルを身に着けたい方に、おすすめの1冊です。

*[いちばんやさしい HTML&CSS 入門教室](http://www.sotechsha.co.jp/pc/html/1213.htm) *

### 1冊ですべて身につくHTML&CSSとWebデザイン入門講座

本書は、*書店員がオススメする「CPU大賞」の1位に選ばれている1冊*です。最新技術にも対応しており、**レスポンシブ・Flexbox・CSSグリッドも学べます**。コードの書き方だけでなく、デザインのことも同時に勉強することが可能なため、まさに1冊ですべてを身につけられる本と言えるでしょう。

*[1冊ですべて身につくHTML&CSSとWebデザイン入門講座](https://www.sbcr.jp/product/4797398892/) *

### いちばんよくわかる HTML5＆CSS3 きちんと入門

本書は、*やや上級者向けの本です*。HTMLやCSSの実践的なテクニックについて詳しく解説されてあり、多くのサンプルコードが掲載されているため、手を動かしながら学ぶことができます。本書を読み込むことで、無駄のないHTMLコードを書けるようになるでしょう。**ある程度HTMLとCSSを学んだ方に、おすすめの1冊**です。

*[いちばんよくわかる HTML5＆CSS3 きちんと入門](https://www.sbcr.jp/product/4797388541/) *

続いて、*HTML本の選び方について解説*します。書店に行くと多くの種類のHTML本が並んでいます。その中から自分に合った本を探すコツをまとめました。

基本的に技術書系は電子書籍より、*紙の本を選択するのがおすすめ*です。理由として、電子書籍だと見開きにしにくく、サンプルコードが途中で途切れてしまうこともあるためです。また、**紙媒体の方が調べたことをメモしやすい**など、メリットが多くあります。

HTMLの本は、*なるべく出版日が最新のものを選択*しましょう。HTMLやCSSはこれまで何度もバージョンアップされており、新機能が追加されてきています。**出版日が古い書籍だと新機能についての解説がありません**。書籍を購入する場合は、出版日を必ず確認するようにしましょう。

### CSSも解説しているものを選ぶ

HTMLだけでなく、*CSSも十分に解説されている本が良い*でしょう。なぜなら、HTMLを使う場合は必ずCSSも一緒に使うことになるためです。Webデザイナーやマークアップエンジニアは、**HTMLとCSSを上手く使い分けるスキル**が求められます。

### ホームページの作り方まで解説しているものを選ぶ

*ホームページの作り方まで解説されている本だと、より良い*でしょう。レンタルサーバーの使い方・ドメインの取得方法・FTPソフトの使い方・ファイルのアップロード方法について、総合的に解説している本がおすすめです。**HTMLの文法は分かるけれど、サイト作成でつまずいているという方は多い**です。ホームページの作り方に関しても、十分なページ数を割いて解説されているか確認しましょう。

最後に、*HTMLを勉強するコツ*についてまとめました。HTMLを効率的にマスターするにはどうすべきかまとめてあります。これからHTMLの勉強を始める方は、ぜひ参考にしてください。

まずは、*学習スケジュールを立てることが肝心*です。1週間後、1ヶ月後に、学習をどこまで進める予定か紙に書き出してみましょう。本格的なWebサイトを作れるまでは、長期的な学習が必要です。学習スケジュールを立てないと**現時点で学習が何%程度進んだのか分からず、学習意欲が衰退してしまい、途中で挫折してしまう可能性があります**。学習スケジュールはしっかり立て、机の前などに張り出すのが良いでしょう。

### 実際に手を動かしながら学習する

HTMLの勉強は、*実際に手を動かしながら学習*しましょう。HTMLの本にはサンプルコードが掲載されているものが多いため、サンプルコードを模写し、**自分のブラウザで表示させてみてください**。コードの実行結果を確認することで、HTMLについて分かることが増えたという実感が湧き、勉強意欲が出てきます。

何冊も本を購入する勉強方法は、あまりおすすめできません。まずは、*1冊を完璧にこなすことが大切*です。HTMLの優良な本には、1冊に基礎がほとんど詰まっているため、1冊を完璧にするだけでも十分に基礎は固まります。その反面、**複数の本をこなそうとすると学習が散漫になってしまいがち**です。他の本にチャレンジするのは、1冊目を完璧に理解してからでも遅くはありません。

## HTMLの勉強は本がおすすめ！手順に基づいて効率的に勉強を進めよう

本記事では、*HTMLを勉強する場合のおすすめの本*について解説しました。どういった本を購入するのが良いのか、お分かり頂けたかと思います。HTMLだけを学んでも実務に活かすのは難しいため、**CSSやホームページの作成方法まで総合的に学べる本を探すのが良い**でしょう。また、なるべく出版日が新しい本だとHTMLの最新バージョンに対応しているため、おすすめです。本記事がHTMLをこれから学ぶ方にとって、有意義なものとなれば幸いです。

本記事では、HTMLを勉強できるおすすめの本を解説します。HTMLは長きに渡って使われているIT言語のため、書籍も多く販売されています。そのため、どの本を選択すべきか分からない人も多いでしょう。今回はおすすめのHTML本を5つ厳選しました。

HTMLとはホームページの文書を作成するための言語

CSSやホームページの作成方法まで、総合的にHTMLを学べる本を探すのが良い

なるべく出版日が新しい本がおすすめ

初学者必見！HTMLを勉強するのにおすすめの本を5つ厳選

「プログラミング言語の他にHTMLやCSSを学ぶ意味があるのか？」という悩みを持つ初級エンジニアの方がいます。フロントエンドエンジニアなら、HTML/CSSは必須言語といえますが、バックエンドエンジニアやサーバーエンジニアにはあまり関係が無さそうに思えます。

しかし、プロジェクトリーダーやプロジェクトマネージャーを任された時に、*HTML/CSSの知識やスキルがあると、その分メンバーからの尊敬や信頼を得られるでしょう*。この記事では、**HTML初心者の方を対象にHTML/CSSを学ぶ意味や、効果的な学び方について、入門ガイドとして解説**をしていきます。

HTMLを知らないエンジニアはいないと思いますが、「Hyper Text Markup Language」の略です。**HTMLはプログラミング言語ではありませんが、Webページを作るときに必須となるマークアップ言語の1つ**です。 HTMLと一言で呼んでも、実際には「HTML4」「XHTML」「HTML5」の3種類があります。すべて覚える必要はなく、ここでは「HTML5」をHTMLとして扱っていきます。

CSSは「Cascading Style Sheets」の略で、*文字サイズや文字の色、余白、装飾などのレイアウトでの見栄えを決めるスタイルシート言語*です。HTMLだけでもWebページは作成できますが、殺風景な味気ないページになってしまうでしょう。
そこで、*見栄えの良いページを作成するには、HTMLとCSSをセットで学ぶ必要があります*。そのため、ここでは「HTML/CSS」と表記します。

HTML/CSSは易しい言語です。*少しでも学べばすぐに結果が確認できるため、挫折しにくい*のが特徴です。しかも、*学習人口が圧倒的に多いため、壁にぶつかってもすぐに解決*できます。また、あらかじめ特に準備するものが不要なので、すぐに始められます。

**HTML/CSSはITエンジニアの初めの一歩、エンジニアの一般常識**と考えて、できれば多くの人に学んでほしい言語です。

### HTML/CSSは電子ブックよりはペーパーブックを

最近はスマホやタブレットにダウンロードして読むタイブの書籍（電子ブック）が増えてきましたが、**勉強目的ならペーパーの方が良い**でしょう。電子ブックの場合は、図が見にくい、書き込みができないなどの使い勝手の問題もありますが、勉強の達成感が得にくいでしょう。

*マーカーを入れたり、メモ書きしたり、手垢を付けられる点ではペーパーが勝っています*。また、自分に合わないと感じた時に、*ペーパーブックはメルカリなどで販売ができますが、電子ブックは中古販売ができません*ので、購入額分が完全に無駄になってしまいます。

## HTML/CSSの入門本を選ぶポイント

*HTML/CSSの学習本を購入するにあたり、注意すべきポイント*を以下で説明していきます。スクールに通うより遥かに安い出費で済むとはいえ、**せっかく購入するからには自分に合った本を**選びましょう。

### 自分のレベルにあっていること

*学習本の購入では、自分のレベルに合っているというのが最低限の条件*です。どんなに外装が素晴らしく、どんなに人気があっても自分に合わなければ意味がありません。間違って上級者用の参考書を選んでしまうと、いきなり挫折します。

また初級や入門の表記がある本でも、実際にはレベルが高すぎて理解ができないといった事があります。
書店で手に取って見てみるのがベストですが、ネットで探す場合でも、電子書籍で一部試し読みができる本などもあるため、**まずは中身を見て自分のレベルに合っているかを確認**しましょう。

Webページ作成の基本はHTMLですが、CSSが使われているケースが大半です。**HTMLとCSSはセットで学びたい言語ですので、両方を解説している本をおすすめ**します。

HTMLとCSSの両方に対応している本であれば、効果的に2つの言語をマスターできるような構成になっており、*別々に本を買って勉強するよりは遥かに効率的*です。

### 最新のバージョンに対応していること

よく中古の書籍を購入する人がいます。小説など、時代の変化に直接関係ないものであれば問題はありませんが、**学習本の場合、時代の変化の影響を受けやすいIT系では、本は最新バージョンであることがポイント**です。

*HTMLの最新バージョンは「HTML5.2」、CSSは「CSS3」*です。これらに対応している学習本や参考書を選ぶようにしましょう。

（*注意：HTML5は廃止され、HTML Living Standardが標準規格になったとのニュースがありますが、HTML5はそのまま利用できるため、HTML5準拠の教本で学んでも何ら問題はありません*。）

これは必須ポイントではありませんが、**用語の解説が詳しく書かれている本や、インデックスがしっかりしている本は辞典代わり**にもなるので、その辺もチェックしてみましょう。

## 【2021】HTML/CSS入門書おすすめ5選

HTML/CSS関係の解説本、参考書は非常に豊富にありますが、入門者向けであること、HTMLとCSSを同時に学べること、最新バージュンに対応していることなどを条件に、書評や口コミも参考にしながら選んでみました。

ちなみに出版日が比較的古いものでも、最新のバーバョンに対応し、改訂している本は対象としています。

### 1.[スラスラわかるHTML&CSSのきほん 第2版](https://www.sbcr.jp/product/4797393156/)

▪著者：狩野 祐東
▪ページ数：296ページ
▪出版社：SBクリエイティブ
▪発売日：2018/04/14

【特徴】**小規模なサンプルサイトの作成を通じて、HTML/CSSの基本が学べる入門書**

2013年に初版が発刊された*ロングセラーの人気本*です。2018年に今回おすすめの第2版が発売されました。HTML/CSSの基本について、可能な限り分かり易く解説しています。図解が多く、誰もがミスしやすい箇所のサポートも親切です。ある程度、 HTML/CSS の知識がある方には物足りない内容かもしれませんが、*入門者にはぜひおすすめしたい1冊*です。

### 2.[デザインの学校 これからはじめる HTML & CSSの本](https://gihyo.jp/book/2017/978-4-7741-8968-0)

▪著者：千貫 りこ、ロクナナワークショップ（監修）
▪ページ数：192ページ
▪出版社：技術評論社
▪発売日：2017/05/26

【特徴】**Webデザインの基本を学ぶ初心者向けのHTML/CSS入門書**

*比較的ページ数が少なく、初心者に優しい丁寧な説明で、すらすら読み進められます*。分かり易さを最優先して結果、取っ掛かりの入門書としては良いのですが、*初心者でもこれ1冊で十分とは言えません*。

超入門という点ではおすすめの書です。分厚い本は苦手、飽きやすいという方はこの本でスタートを切るのも良いでしょう。

### 3. [これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん](https://book.mynavi.jp/ec/products/detail/id=65861)

▪著者：たにぐちまこと
▪ページ数：320ページ
▪出版社：マイナビ出版
▪発売日：2017/03/27

【特徴】**HTML/ CSS、JavaScript などの入門書として網羅性に富み、これ1冊で基本を学べる**

初心者に分かりやすく書かれている本で、HTML・CSS・JavaScriptについて幅広く学べますが、より詳しく学びたい人にはやや物足りなさを感じるかもしれません。*Web開発の基本について広く浅く学びたい人におすすめ*です。

### 4.[世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書](https://gihyo.jp/book/2019/978-4-297-10302-6)

▪著者：赤間 公太郎、狩野 咲、鈴木 清敬
▪ページ数：336ページ
▪出版社：技術評論社
▪発売日：2019/03/01

【特徴】**Webサイト作成に必要な知識を凝縮した教科書**

全15章から構成され、レッスン1の基礎知識から始まり、 HTML/CSSの使い方を中心としたレッスンが続き、後半のレッスン14と15ではWebサイトの公開方法が記載されています。タイトル通り、教科書のイメージが強いですが、*しっかり基礎を学びたい初心者の方におすすめ*したい本です。

### 5.[いちばんやさしい HTML＆CSS 入門教室](http://www.sotechsha.co.jp/pc/html/1213.htm)

▪著者：岩田宇史・平内裕子
▪ページ数：304ページ
▪出版社：株式会社ソーテック社
▪発売日：2018/10/19

【特徴】**スマホ対応のサイト作りを題材とした新しいタイプのHTML/CSS入門書**

「いちばんやさしい」のタイトル通り、HTML/CSSに特化した入門書です。特徴は*スマホ向けサイトを題材としている*点で、他の教本とは一線を画しています。


題材はスマホサイト作成ですが、モバイル対応サイトを作りながら、パソコン表示の対応方法なども解説されており、**閲覧するユーザーのデバイスに合わせて自動的に表示が最適化される「レスポンシブデザイン」の制作を学べるような作り**になっています。
入門でありながら、実践力を高めたい初心者におすすめの1冊です。

以上のおすすめの入門書、いずれか1冊を読破した頃には、ちょっとしたWebサイトの構築ぐらいは出来ていることでしょう。せっかく**Webサイトを作れるようになったのなら、その先の目標も持っておきましょう**。

余談ですが、人気ブロガーであり、アフィリエイターの坂内学氏のマナブログの影響を受け、プログラミングで一獲千金を狙ってみようという方もいるかと思います。世の中に美味しい話はありませんので、地道にスキルを身に付けることをおすすめします。*しっかり実力が身に付けば、自ずと活躍の機会は増えていきます*。

JavaScriptはWebブラウザ上で利用するプログラミング言語の1つです。*JavaScriptを用いることで、HTMLではできないようなブラウザ上での画像の拡大・縮小、動画の再生、ユーザー操作に対応した動的コンテンツなどを実現*できます。


また、**JavaScriptはどのようなWebアプリにも対応が可能なため、主にフロントエンド開発では必須のプログラム言語**です。その他にも、ユーザーが入力した問合せフォームの内容や、購入した商品に対する応答などはプログラミング言語のPHPで書きます。皆さんがよく利用するWordPressも、PHPで作成されています。


このように、HTML/CSSとJavaScriptに加えてPHPを習得すると、あらゆるWebサイトの開発が行えるようになります。PHPの習得も是非視野に入れておきましょう。

HTML/CSSを勉強するからには、自身のスキル確認が必要です。とりあえず、簡単なサイトを作れればそれで満足という方以外は、**活躍機会を得るためにも認定資格の取得を目指す**とよいでしょう。

*[HTML5プロフェッショナル認定試験](https://html5exam.jp/)*

特定非営利活動法人、エルピーアイジャパン（LPI-Japan）の認定資格です。*HTML5以外にCSSやJavaScriptなどに関する技術や知識が求められる試験*で、初級に相当するレベル1と、中級相当のレベル2があります。*認定資格を取っていると就職や転職に有利ですので、ぜひ挑戦してみましょう*。

### 将来のエンジニア像をイメージして目標を立てよう

*HTML/CSSに加えてJavaScriptを習得すれば、フロントエンドエンジニアとして活躍の機会が広がる*でしょう。しかし、それはあくまでもITエンジニアとして通過点です。ITエンジニアとして、将来にどのような職種に就くのか明確な目標を持ちましょう。


その**目標に向かって、どのようなキャリアパスを描き、どのようなスキルを身に付けるのか、しっかり青写真を描いておくと、勉強に向かう姿勢も大きく異なります**。

いずれにせよ、皆さんが起業する際には、学んだHTML/CSSやJavaScriptの知識を生かし、自らの会社や事業のWebサイトを自身で構築してみるという夢を持つと良いでしょう。

HTMLとCSSに関する学習本を探す際、書籍が多すぎて選ぶのに困る方が少なくありません。この記事では、ITエンジニアを目指す方にHTML＆CSSに関する入門本の選び方、おすすめの入門書を紹介していきます。Webページを自分で作りたい方もぜひ参考にしてください。

HTMLとCSSは言語としての機能や目的は異なるがWeb作成において必須の言語で、セットで習得すべき

HTML/CSSの入門書を探すには、3つのポイントについて留意しておく必要がある

HTML/CSSの入門書でおすすめの5選と、それぞれの特徴について理解する

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

**HTML5は2021年1月28日に廃止されました。**この記事を見てドキッとした人もいるのではないでしょうか。廃止の影響があるのか？あるいは今後も使えるのか？と、大変気になります。HTML5の廃止により、今後の影響がどうなるのか心配な人向けに、解説を行っていきます。

HTML5とは、*ハイパーテキスト記述言語（HyperText Markup Language）*の**5回目の改訂版**を指します。HTMLの仕様はWeb Hypertext Application Technology Working Group（*WHATWG*）が策定し、World Wide Web Consortium（*W3C*）で勧告されています。
参考：[WHATWG HTML Living Standard](https://html.spec.whatwg.org/multipage/)

HTML 5.1以降はHTML Living Standardに基づいており、現在最新の仕様はHTML 5.2を勧告後、**HTML Living Standardに統合され仕様統一**されています。

HTMLの記事（1ページ目）