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

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

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

始めに、*HTMLエディタとは何か*について解説します。**HTMLエディタは何に使われるものなのか**、メモ帳や統合開発環境との違いはなにか、についてまとめました。

### HTMLエディタはテキストを編集するためのソフト

HTMLエディタは、*テキストを編集するためのソフト*のことです。HTMLのソースコードを記述し、HTMLファイルとして保存することができます。多くのHTMLエディタは、HTMLだけでなく、他のプログラミング言語の記述も可能です。HTMLエディタにはさまざまな種類があり、**中にはインストール不要なものやオンラインで使えるものもあります**。

### HTMLエディタとメモ帳の違い

Windowsのパソコンには、最初からメモ帳ソフトがインストールされています。また、Macにもテキストエディットというメモ帳と類似したソフトがあります。これらのソフトでも、HTMLコードの記述は一応可能ですが、*HTMLエディタを使う方がおすすめ*です。なぜならHTMLエディタには、タグの入力サポートやエラー表示など、コードの記述を効率化できるさまざまな機能が備わっているからです。**プログラマーやWebデザイナーのほとんどが、メモ帳ではなくHTMLエディタを使っています**。

### エディタと統合開発環境の違い

エディタとよく似たものに、「統合開発環境」があります。統合開発環境とは、開発作業を効率的に行うための開発環境を指します。たとえば、Eclipseなどです。統合開発環境とエディタは厳密には区別されていないですが、*一般的に開発に関する機能が豊富なものを統合開発環境と呼ぶことが多い*です。

HTMLのコードを書く際に統合開発環境を使う人もいますが、機能が豊富な分、動作が遅く、**ある程度パソコンのスペックが高くないとスムーズに編集できない**可能性があります。そのため、初心者には統合開発環境よりもHTMLエディタがおすすめです。

## 初心者におすすめのHTMLエディタ5選

ここでは、*初心者におすすめのHTMLエディタを5つ厳選*しました。これらのエディタは使いやすいと評価が高いものばかりです。エディタ選びに迷ったら、**これら5つから選ぶのが良いでしょう**。

サクラエディタは、*日本人が開発したHTMLエディタ*です。エディタ上の表記は全て日本語なので、初心者でも使いやすいでしょう。マニュアルなども日本語なので、分からない箇所が調べやすいのも特徴です。また、機能面も豊富であり、コードの強調や検索機能など**HTML編集に必要な機能は一通り揃っています**。

[サクラエディタ](https://sakura-editor.github.io/)

Atomは、GitHubを作った会社が開発したHTMLエディタです。Atomは利用者が多く、ネット上に使い方を解説したサイトが多いため、*分からない所を調べやすいのがメリット*でしょう。また、Atomはプラグインが多く、機能を追加したり便利に活用したりすることが可能です。**エディタ上の表記がデフォルトで英語になっています**が、プラグインを使うことで日本語に変換できます。

Visual Studio Codeは、**マイクロソフト社が開発したHTMLエディタ**です。Windows・Macの両方で使えて、*初心者から上級者まで人気の高いHTMLエディタ*です。HTML以外にも、さまざまなプログラミング言語に対応しています。

[Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)

Notepad++は、Windows専用のHTMLエディタです。*Windowsを使っている人が使いやすいように設計*されています。メモ帳と同じような感覚で使えるので、初心者にもおすすめでしょう**。また、プラグインも豊富なため、自分好みにカスタマイズすることが可能**です。

[Notepad++](https://forest.watch.impress.co.jp/library/software/notepadplusp/)

Online HTML EDITORは、*オンラインで使えるHTMLエディタ*です。インストール不要で、手軽にコードを記述して実行結果を確認することができます。インストールが不要なので、**パソコンの容量を圧迫することなく使える点がメリット**でしょう。本格的な開発には活用できませんが、コードにミスがないか素速く確認したいときにおすすめです。

[Online HTML EDITOR](http://asomin.net/htmleditor/)

HTMLエディタにはさまざまな機能が備わっています。ここでは、*具体的にどういった機能が備わっている*のかまとめました。これらの機能を活用することで、**ソースコードの記述がスムーズに行える**でしょう。

HTMLエディタの多くには、記述サポートがついています。記述サポートとは、*その文字から始まるタグを表示してくれる機能*のことです。たとえば、「a」とタイプした場合、aから始まるタグが表示されます。この機能により入力にかかる手間を省くことができますし、**スペルミスも防げる**でしょう。開発スピードを上げるには欠かせない機能です。

HTMLエディタは、**タグごとに色付けをしてくれます**。タグごとの色が付いていると、ソースコード全体が見やすくなり、記述ミスを防ぐことができるでしょう。HTMLのソースコードは、*1文字でも間違っていると正しく動作することができません*。そのため、こういった表記ミスを防ぐ機能があるかどうかは重要です。

HTMLエディタの多くには、プレビュー機能が備わっています。HTMLコードの実行結果を確認する場合、通常はブラウザを開かないといけません。しかし、何回もブラウザをリロードして確認するのは大変です。*HTMLエディタのプレビュー機能を使えば、実行結果を素速く確認する*ことができます。**ショートカットキーを押すだけですぐに実行結果を確認できる**ので、開発スピードがアップするでしょう。

HTMLエディタの多くには、エラーメッセージ機能が揃わっています。エラーメッセージ機能とは、HTMLのソースコードに記述ミスがあると*「ここは間違っています」と教えてくれる機能*のことです。エラーメッセージ機能のおかげで、デバック作業効率が一気に上がります。**特に初心者はスペルミスをすることが多い**ため、欠かせない機能と言えるでしょう。

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

最後に、*HTMLエディタを選ぶ際のポイントを紹介*します。HTMLエディタにはさまざまな種類があり、中には上級者向けのものもあります。**上級者向けのエディタは機能が多すぎて使いにくい場合も**あります。そこで、初心者でも使いやすいエディタを選ぶコツを解説します。

### ネットに情報が多く掲載されているか

HTMLエディタによってはネット上に情報が少なかったり、**英語の情報ばかりだったりすることがあります**。情報が少ないと、エディタが思うように動かない場合、調べて解決するのが難しくなるでしょう。そのため、なるべく*ネットに情報が多く掲載されているHTMLエディタを選ぶ*のがポイントです。たとえば、サクラエディタは日本人が開発したHTMLエディタのため、日本語の情報が多く掲載されています。

HTMLエディタによっては、**一部のOSにしか対応していないものもあります**。たとえば、Notepad++などは、Windowsでしか使うことができません。*公式サイトのダウンロードページを確認すれば、どのOSで使えるのかは分かります*。自分が使っているOSに対応しているか必ず確認しましょう。

### 拡張機能を使わなくても機能が充実しているか

HTMLエディタの中には、拡張機能（プラグイン）を使わないと機能がそこまで多くないものもあります。初心者は、できるだけ*拡張機能を使わなくても良いHTMLエディタ*を使いましょう。**拡張機能のインストールは初心者には少しハードルが高く**、どの拡張機能を使えば良いか調べるのも大変です。

## 自分に向いているHTMLエディタを選んで作業効率を上げよう！

本記事では、*おすすめのHTMLエディタを解説*しました。どういったHTMLエディタを選ぶと良いのか、お分かり頂けたかと思います。HTMLエディタはなるべく軽くて使いやすいものを選びましょう。**本記事を参考に、自分に向いているHTMLエディタを探してみてください**。

今回はHTMLエディタを紹介します。HTMLエディタにはさまざまな種類があり、どれを使うべきか分からない方も多いのではないでしょうか。そこで、初心者におすすめのHTMLエディタを5つ厳選しました。HTMLエディタ選びに迷っている方は、ぜひ参考にしてください。

HTMLエディタはテキストを編集するためのソフト

メモ帳と違いHTMLエディタは開発がスムーズになる機能が豊富にある

初心者は日本語の情報が多く使いやすいHTMLエディタを選ぶのがおすすめ

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

- [Rubyとは何か？Rubyの特徴やできることについて解説](https://and-engineer.com/articles/YOmYWBEAACcA0Hh8)

- [Rubyでできること・できないことを紹介！特徴についても解説](https://and-engineer.com/articles/YPUc2hIAACEAbTCP)

- [Ruby初心者向けに概要・特徴・作れるもの・勉強方法を解説！](https://and-engineer.com/articles/YR9sERAAAGEhAjPT)

## Rubyは独学でも勉強できるのか？

**Rubyとはまつもとゆきひろ氏により日本で開発された、国産のプログラミング言語のことです。**そのため他のプログラミング言語にはないような特徴もあります。ここではRubyの概要と特徴を説明するとともに、Rubyは独学で勉強できるのかについて解説します。

**Rubyは1995年にリリースされた、オブジェクト指向型のプログラミング言語の1つです。**また国際電気標準会議において、日本で開発されたプログラミング言語として国際規格に認定を受けた言語でもあります。

Rubyはフリーソフトウェアであるため、無償で使用でき、ユーザーが自由に複製・改変・再配布などを行うことが可能です。また*Rubyは短いコードでプログラムを記述できるため、可読性の高さが特徴です。*さらに*文法がシンプルであるため、プログラミング初心者におすすめされる言語の1つ*と言えます。

**「Ruby on Rails」という便利なフレームワーク**を使用すれば、簡単にWebアプリケーションの開発などを行うことが可能です。Rubyでできることは数多く、汎用性の高さも特徴と言えます。

Ruby on Railsとは？特徴やできることを徹底解説！

このような特徴から、**Rubyは開発スピードの向上やコストの削減が期待できるため、スタートアップ企業や自社開発企業などでよく使用されています。**またオランダのTIOBE Softwareが毎月公表している、プログラミング言語の人気ランキングを示すTIOBE Indexによると、2021年9月において、Rubyは13位に位置しており、GoやSwiftなどと同レベルの順位です。
（ 参考：https://www.tiobe.com/tiobe-index/ ）

### Rubyは初心者でも独学で勉強可能

*Rubyは国産のプログラミング言語で、シンプルな文法が特徴であるため、初心者でも独学で勉強しやすい言語の1つです。*例えば独学で勉強を進めている場合、エラーやバグが発生したときは自身で対処しなければなりません。

しかし、**Rubyであれば日本語で記載されているWebサイトや、解説本が豊富にあるため、問題の自己解決が比較的しやすいです。**海外で開発された言語の場合、英語で解説されている記事などが多い傾向にあり、学習コストが多くかかります。そのためRubyは独学で勉強を始めるのに、おすすめの言語と言えるでしょう。

## Rubyを独学で勉強するメリット

Rubyの特徴や独学におすすめのプログラミング言語であることは理解できたでしょうか。ここでは、Rubyを独学で勉強するメリットについて詳しく紹介します。

### プログラミング初心者でも独学しやすい

**Rubyの文法はシンプルであり、他のプログラミング言語では長文になるコードを短いコードで記述できることもあります。**また可読性が高く、どの部分が間違っているか見つけやすいのも特徴です。さらに*Rubyは日本語で解説されている本や記事が数多くあり、プログラミング初心者でも挫折することなく、勉強を継続できるでしょう。*このように、Rubyは習得難易度が他のプログラミング言語と比較して低いため、プログラミング初心者でも独学しやすいというメリットがあります。

**Rubyに限らずプログラミング言語を独学で勉強する場合、費用コストを抑えられるというメリットがあります。**近年では数多くのプログラミングスクールが登場していますが、一般的にスクールに通うと最低でも数十万円の費用がかかります。一方*本や学習サイトなどを利用して勉強すれば、費用はほとんどかかりません。*また無料で利用できる学習サイトや中古本を活用すれば、さらにコストを抑えることが可能です。

**Rubyはシンプルな文法やフレームワークが充実していることから、開発効率の向上が期待できるプログラミング言語の1つです。**Webアプリ・ECサイト・SNS・スクレイピングなどは、Rubyを使用すれば、比較的簡単に開発を行うことが可能です。そのため*Rubyは、スタートアップ企業や自社開発企業でよく使用されています。*

Rubyの開発スピードの早さは魅力的です。*独学でインプットした知識をアウトプットして成果物がスムーズに作成できると、モチベーションの向上にもつながるでしょう。*このように、開発スピードの早さも独学するうえでのメリットの1つ言えます。

Rubyを使用して開発を行っている企業は、スタートアップ企業から大手企業まで数多くあります。またRubyでできることは多様であり、汎用性の高さも特徴です。**近年では新しいWebサービスやWebアプリが数多く開発されており、Rubyの需要は高い傾向にあります。**そのためRubyのスキルを習得すれば、仕事がないという状況は考えづらいと言えるでしょう。

Rubyを使用して成果物を作成した経験があれば、就職や転職で役立ちます。また*独学で試行錯誤した経験は、会社で働く際の不具合やトラブルが発生したときに活かせます。*

Rubyを独学で学習するメリットは理解できたでしょうか。ここでは、Ruby独学のロードマップとして勉強方法について詳しく紹介します。

**Rubyを独学で勉強して、Webアプリケーションが開発できるまでの目安として300時間程度と言われています。**これは基本情報技術者試験や応用情報技術者試験などのIT資格を取得するまでに必要な勉強時間と同等であるため、Rubyは初心者でも勉強しやすいプログラミング言語と言えます。

ただし、これまでのIT経験や勉強方法によって勉強時間が異なるため、きちんとした手順で勉強するのが大切です。*まずはRubyを勉強して何を成し遂げたいかを明確にすることから始めましょう。目的を設定すると、やるべきことが明確になり、勉強効率が向上します。*

### 本を活用して体系的な知識をインプットする

Rubyを勉強するにあたって、プログラミング経験がない方の場合、本を活用してITやプログラミング言語の基礎から勉強する必要があります。そのため**初心者向けのRubyの学習本を選び、体系的な知識を学習することが大切です。**

一方プログラミング経験がある方ならば、サンプルコードや環境構築方法が細かく記述された本を選び、手を動かしながら勉強するのがおすすめです。このように、*これまでの経験に応じて選択すべき本は異なるため、自分に合った参考書を購入して勉強を始めましょう。*

また**Rubyを使用して開発を行うにあたって必須とも言われる「Ruby on Rails」についても解説されている書籍を選ぶようにしてください。**Ruby on Railsを使用すれば、短いコードでWebアプリケーションを開発することができます。注意点として、*IT技術のトレンドの移り変わりは激しいため、できる限り新しい本や改訂版で学習するようにしましょう。*

### 学習サイトを活用して習得した知識をアウトプットする

**近年ではオンライン教材が発展しており、Rubyを学習できる学習サイトは数多くあります。**例えば、Progate・ドットインストール・Udemyなどが挙げられます。学習サイトの特徴は様々であり、環境構築が不要なものや、動画解説が付いているものもあります。*自分の目的に合わせて使用する学習サイトを選択するのが大切です。*

将来的にRubyを使用したエンジニアへの転職を考えているのであれば、環境構築の作業は重要です。その際、コミュニケーションスキルも磨くことも大切と言えます。Rubyの学習に合わせて、エンジニアに必須なスキルを磨きましょう。

また、**学習サイトと本を併用して学習するのもおすすめと言えます。**本でインプットを行い、学習サイトを活用してアウトプットすると効率よく学習することが可能です。プログラミングは実際に手を動かすことで、スキルが身に付きます。そのため*インプットよりもアウトプットを重視して勉強に取り組みましょう。*

**Rubyの基礎が身に付いたら、実際にサンプルの成果物をゼロから作成してみましょう。**オリジナルではありませんが、サンプルの成果物を作成すれば、これまで勉強した知識やスキルを深めることができます。ただし、基礎を習得しないうちに成果物を作成しようとすると、挫折してしまう方も少なくないため、まず学習サイトや本で基礎をきちんと身に付けてから取り組みましょう。

### オリジナルのWebアプリを作成する

**サンプルの成果物が作成できたら、改良を加えオリジナルのWebアプリを作成してみましょう。**まずはRubyの開発環境の構築ができるところから始めるのがおすすめです。ここでつまづいてしまった場合は、本や学習サイトの基礎に立ち返りましょう。

*Rubyであれば、日本語でインストール方法を解説している無料のWebサイトもあります。*実際にオリジナルのwebアプリが作成できたらポートフォリオとして利用できるため、転職時に役立ちます。

## Rubyは初心者におすすめ！独学で勉強できるプログラミング言語

これまでにRubyは独学で勉強できるのか、独学で学習するメリット・勉強方法について解説しました。

**Rubyを独学で勉強するにあたって、本と学習サイトを併用し、インプットとアウトプットを繰り返すのがおすすめです。**またプログラミングは手を動かすことで、スキルが身に付くため、アウトプットを重視して学習するのが大切と言えます。Rubyの基礎が勉強できたら、サンプル作品を参考に成果物を作成し、最後はオリジナルのWebアプリを制作してみましょう。*オリジナルのポートフォリオは就職や転職の際に大いに役立ちます。*

Rubyとはまつもとゆきひろ氏によって開発された国産のプログラミング言語です。Rubyを独学で勉強する際は、本や学習サイトを活用するのがおすすめです。当記事ではRubyは独学で勉強できるのか、独学で学習するメリット・勉強方法について解説します。

Rubyはシンプルな文法が特徴であるため独学におすすめのプログラミング言語

Rubyを国産のプログラミング言語であるため情報取集しやすいのが特徴

Rubyを独学で勉強するにあたって本と学習サイトを併用するのがおすすめ

Rubyは独学できる? 勉強するメリットやおすすめの学習方法について解説

- [HTML・CSSとは何か？使い方やできること、独学方法を解説！](https://and-engineer.com/articles/YUbmNRAAACUAyIm5)

- [HTML5とは？特徴や変更点・関連用語・対応ブラウザを解説！](https://and-engineer.com/articles/YTsTCBAAACIAk0be)

まず始めに、*HTMLとは何か*について初心者の方でも分かりやすいように解説します。HTMLは何をするためのものなのか、どういった場面で使われるのかみていきましょう。

### HTMLはWebサイトを作成するための言語

*HTMLはWebサイトを作成するための言語*です。Webページ上に表示される文章・写真・リンクなどの情報は、HTMLによって作成されています。HTMLによって「この文章を表示する」「画像を挿入する」などを具体的に表現することが可能です。

また、HTMLでWebページの構造を書き表したファイルを「HTMLファイル」と呼び、**HTMLファイルをサーバにアップロードすることで、Webページをネット上に公開することが可能**です。

### HTMLはタグを使ってWebページの構造を表す

**HTMLでは「タグ」というものを使って、Webページの構造を表します**。タグとは文章や画像をどのように表示するか、コンピュータに指示を出すためのものです。たとえば、``````というタグがHTMLにはあります。特定の文章にこれを使用してタグ付けすることにより、その文章を太字にして表示することができます。このように、*タグを使うことでコンピュータに表示方法の指示を出すことが可能*です。

ここでは、*HTMLでできることの一覧*をまとめました。Webアプリケーション開発において、HTMLがどのように活躍するのか解説しています。これからHTMLを勉強する方は、HTMLでできることを予め抑えておくと良いでしょう。

まずできることが、*Webページ上に記載された文章の作成*です。コンテンツの文章、ヘッダーやフッターに記載されている文章などは、全てHTMLによって作成されています。また、**Webページのタイトルやその他のメタ情報など、表には出ない文章もHTMLで作成可能**です。

HTMLを使うことで、*Webページをデザインする*ことも可能です。たとえば、Webページを2分割し、それぞれ別内容のコンテンツを表示させることができます。さらに、Webページの文章を太字にしたり、文字色を変えたりといった調整も可能です。

ただし、こういったデザイン調整は**HTMLではなくCSSが使われることもあります**。CSSは、Webページのデザイン調整を専門に担当する言語です。HTMLだけでもデザイン調整は可能ですが、CSSを使った方が調整にかかる時間を減らすことができます。そのため、HTMLを習得する場合、CSSも合わせて習得しておくと良いでしょう。多くのHTMLの書籍には、CSSの使い方も合わせて記載されていることが多いです。

HTMLはWebアプリ開発以外でも活躍します。たとえば、HTMLをメールで使用することができ、**メールの文章の色を付けたり、画像や動画をメール上に埋め込んだりする**ことができます。こういったデザイン調整を行うことで、より多くの情報を視覚的に伝えることが可能です。普段の業務でHTMLメールを使うことは少ないかもしれませんが、ユーザーにメール配信を行う場合などで活用できます。

## HTMLだけではできないこと一覧

続いて、*HTMLだけではできないこと*を解説します。HTMLだけではどうしても限界があり、JavaScriptなど他のプログラミング言語の力を借りないと難しいことも多くあります。

HTMLだけでは動的なWebページを作成することはできません。動的なWebページとは、*ページを開く度に表示内容が変更されているページ*のことです。具体的には掲示板やSNSなどが挙げられ、掲示板はページを開く度に書き込み内容が変更されています。

動的なWebページを作成する場合、Webページ上の変更されるデータを別途作らないといけません。データの作成はブラウザではなく、Webページを管理するサーバ上で行われます。サーバでプログラムが動いてデータ作成を行い、そのデータをブラウザに渡しているのです。

**サーバで動かせるプログラミング言語には、PHP・Python・Rubyなどがあります**。動的なWebページを作るなら、これらの言語の知識が必要です。

### アニメーションがあるWebページ

*Webページにスライドショーなどのアニメーションをつける*のも、HTML単体では難しいです。Webページにアニメーションをつける場合は、JavaScriptという言語を使います。そのため、Webページ制作の業務に就く場合、**HTMLだけではなくJavaScriptの知識も必要**です。JavaScriptはHTMLよりも難易度が高く、習得に時間がかかるため、HTMLの勉強に時間を取られすぎないよう注意が必要です。

### ユーザーが入力できるWebページ

お問い合わせフォームなど、*ユーザーに入力させるページもHTMLだけでは作成できません*。お問い合わせフォームは、入力された内容に問題がないかチェックする必要があります。入力内容のチェックはJavaScriptによって行われ、**HTMLだけでは入力内容のチェックはできません。**

続いて、*HTMLの代表的なタグを解説*します。HTMLのタグを活用して、Webページの見た目を整えます。HTMLはタグの使い方さえ覚えてしまえば、ほとんど使いこなせてしまいます。今回は、*初心者が最低限覚えたいHTMLタグをまとめました*。HTML初心者の方は、まずはこちらのタグをマスターしてください。

Webページに大きな文字で見出しが書かれているのを見たことがあるでしょう。*見出しはHTMLのh2タグを使うことでつけることが可能*です。たとえば、

と記述することで「タイトル」という見出しを作ることができます。また、**見出しの中に小さい見出しを作りたい場合はh3タグ**を使います。さらに小さい見出しを作りたいなら、h4、h5、h6タグも用意されています。

HTMLには文字のレイアウトを変更できるタグが多くあります。たとえば、*bタグを使うことで太字にすることが可能*です。また**iタグを使えば文字を斜体にできたり、uタグを使えば文字に下線を引いたり**できます。これらのタグはWebページ制作だけでなく、HTMLメールを作成する場合にも使えるでしょう。具体的には次のように書きます。

~~~ 
太字
斜体
下線
~~~

Webページ上に箇条書きを用意するためのタグもあります。*箇条書きを作る場合は、ulタグを使います*。ulタグは先頭に記号を付ける箇条書きを作成できます。さらに、olタグを使うことで、先頭に数字がつく箇条書きも可能です。また、**それぞれの箇条書きはliタグで囲う**必要があります。具体的には次のように書きます。
~~~ 
<ul>
<li>箇条書き1</li>
<li>箇条書き2</li>
<li>箇条書き3</li>
</ul>
~~~

Webページ上にリンクをつけて、*他のWebページに飛ばしたい場合はaタグを使います*。具体的には、次のように書く必要があります。

~~~ 
<a href="https://www.google.com/">Google</a>
~~~

こうすることで、Googleのページに飛ばす**リンクを作成できます。**

最後に、*HTMLを学習する方法をまとめました*。HTMLの習得は容易ではあるものの、タグの数が多く、覚えるのに時間を要します。また、Webアプリ開発を行う場合、HTMLだけでなくCSSやJavaScriptもマスターしないといけません。そのため、*なるべく効率的な方法でHTMLを素速く習得しましょう。*今回は、時間がない方でもHTMLを習得できる方法を解説します。

書籍を購入するのは、一般的な学習方法と言えます。*HTMLの書籍はWeb制作初心者向けのものが多く*、Webサイトの仕組みから丁寧に解説しているものが多いです。こういった書籍を1冊マスターすることで、Webサイト制作者としての基礎知識を身につけられます。

おすすめは**「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」**です。本書は、HTMLやCSSの基礎を体系的に学べる本です。また、レスポンシブ対応やFlexbox・CSSグリッドのレイアウトなど、最近流行中の技術についても解説されており、中級者以上にもおすすめできます。

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

2つ目の方法は、学習サイトを活用することです。*Progateやドットインストールなどのサイトなら、HTMLを手軽に学ぶことが可能*です。学習サイトは、月額1,000円程度で利用できるため、**プログラミングスクールに入会するよりもリーズナブル**でしょう。Progateやドットインストールは教材が分かりやすいのに加え、練習問題が多く掲載されているためおすすめです。

## HTMLでWebページの作成が可能！動的なページを作るなら他の言語も習得しよう

本記事では、*HTMLでできることについてまとめました*。HTMLを使うことで何ができるのか、お分かり頂けたかと思います。HTMLを使うことで、静的なWebページを作成することが可能です。ただし、入力フォームを作ったりアニメーションを作ったりするなどの動的なWebページは、HTMLだけでは作成することができません。

**Webアプリケーション開発に携わりたい場合、HTMLの知識だけでは不十分**なため、CSSやJavaScriptのスキルも抑えておくと良いでしょう。HTMLの勉強はなるべく時間をかけず、効率的に行いましょう。本記事がHTMLをこれから学ぶ方にとって、有意義なものとなれば幸いです。

今回はHTMLでできることについて解説します。HTMLはWebアプリ開発で使われる言語の1つですが、具体的にWebアプリのどの部分の開発ができるか、ご存知ない方は多いでしょう。本記事ではHTMLでできること・できないことをまとめました。

HTMLはWebページの文章の作成やデザイン調整ができる

HTMLだけでは動的なWebページの作成はできない

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

- [Linuxエンジニアとは？詳細や仕事内容、必要なスキルを解説！](https://and-engineer.com/articles/YFL5yxAAACMAp8BF)

- [インフラエンジニアはキツイのか？その仕事内容やスキル、将来性を解説！](https://and-engineer.com/articles/X_zyrRAAACcAGzKn)

- [インフラエンジニアに必要な資格は？スキルについても徹底解説](https://and-engineer.com/articles/YJXcvREAABL1WDjS)

**LinuCとLPICはLinuxの知識や技能を証明するための資格試験**であり、どちらの試験を受験するか迷われる方は少なくないでしょう。ここでは、LPICとLinuCそれぞれの試験概要について詳しく紹介します。

**LinuC（リナック）とはLPI-Japanが運営する試験であり、2018年から提供が開始されました。**2020年4月には出題範囲が改定され、クラウド時代に適応した現在の試験となっています。*LinuCは、難易度がレベル1（level1）からレベル3（level3）までの3段階があります。*上位レベルの認定を受けるためには、下位レベルの認定が必要です。例えばLinuCレベル2の認定を受けるには、LinuCレベル1の認定を受けている必要があります。

全ての試験でCBT方式が採用されており、コンピュータを利用して受験します。*受験料は全てのレベルで共通しており、1試験16,500円です。*ただしLinuCレベル3の試験では1回目が不合格であった場合、2年間同一試験を1度に限り5,500円で再受験できます。合格率や合格点は公表されていませんが、合格点の目安は公開されており、65%～75%程度の得点率で合格可能です。また*資格認定には有意性の期限があり、5年間とされています。*
（ 参考：https://linuc.org/faq/ ）

**LPIC（エルピック）とはLPIが運営する試験であり、2001年から資格の認定が開始されました。**LPIは20万人以上の認定保有者を誇るLinuxおよびオープンソースの認定機関であり、180カ国以上で試験が実施されています。また*日本語や英語だけではなく、様々な言語で受験できるのが特徴です。*
（ 参考：https://www.lpi.org/ja/ ）

*LPICもLinuCと同様で、難易度がレベル1（level1）からレベル3（level3）までの3つに分かれています。*また上位レベルの認定を受けるには、下位レベルの認定が必要です。全ての試験はCBT方式で実施され、認定の有効期間は5年間です。こちらも正確な合格率や合格点は公表されていません。*受験料については、受験者の居住国によって異なります。*

なお、LPI-Japanが実施していた2018年8月以前におけるLPICの受験や認定に関する履歴は、手続きをすればLinuCに移行させることも可能です。
（ 参考：https://linuc.org/linuc/lpic03.html ）

### LinuCとLPICのどっちを受験すべきか？

LinuCとLPICでは、試験内容・難易度・有効期限・受験方式など共通点が数多くあり、どちらも日本で受験することが可能です。そのためLinuCとLPICのどちらを受験すべきか気になる方も多いでしょう。

*LinuCは日本市場向けに作成された試験であるため、公式サイトなどが日本語で理解しやすいのが特徴です。*一方*LPICはLinuCより前から実施されており、数多くの国で実施されているのが特徴です。*そのため**LPICの方が、LinuCよりも国際的な認知度は高いと言えます。**

Linuxのスキルを高めたいと考えている方は、LinuCとLPICのどちらを受験しても問題ないでしょう。しかし*海外でスキルを証明したいと考えている方は、LPICの受験がおすすめと言えます。*

## LinuCやLPICの資格を取得するメリット

LinuCとLPICの共通点や違いは理解できたでしょうか。ここでは、LinuCやLPICの資格を取得するメリットについて詳しく紹介します。

### 就職や転職でアピールできる

**LinuCやLPICの資格を取得すれば、就職や転職の活動で自身のスキルをアピールすることができます。**特にサーバーエンジニアなどのインフラエンジニアでは、Linuxの知識や技能は土台となるスキルです。またアプリケーションエンジニアでも、Linuxに関するスキルがあるとインフラエンジニアとのコミュニケーションをスムーズにできるなどのメリットがあります。

さらに*未経験からエンジニアを目指すうえで、LinuCやLPICの資格を保有していると、エンジニアになりたいという意志を面接官に示すことが可能です。*

このようにLinuxのスキルは、エンジニアの業務など幅広い用途で利用できるため、就職や転職の際にアピールしやすいです。また*LinuCやLPICの資格を保有していれば、Linuxのスキルを客観的に証明することができます。*そのため就職や転職の活動で有利になることもあるでしょう。

他にも基本情報技術者試験・CCNA・ORACLE MASTERなど様々なIT系の資格があるため、将来のキャリアや目指す職種に合わせて、適した資格を取得するのがおすすめです。

### 資格手当や報奨金がもらえる

**LinuCやLPICの資格を取得すると、資格手当や報奨金として一時金を受け取ることができる企業もあります。**また昇進や昇格の条件としている企業もあります。そのためLinuCやLPICの資格はスキルアップやスキルの証明だけではなく、年収アップにもつながるでしょう。

### 実務で役立つLinuxのスキルを習得できる

LinuCやLPICは暗記問題で解ける問題も多く出題されるため、深い知識がなくとも合格できてしまうこともあります。これがLinuCやLPICの資格が「意味ない」と言われる理由の1つです。しかし**きちんとコマンドの意味やLinuxの操作知識を学習すれば、実務で役立つLinuxのスキルを身に付けることができます。**そのため参考書だけではなく、実際にLinuxの操作環境を用意し、検証しながら学習するのがおすすめです。

LinuCやLPICの資格を取得するメリットは理解できたでしょうか。ここでは、LinuCやLPICの資格を取得するための勉強方法について詳しく紹介します。

LinuCやLPICを勉強するにあたって、参考書を活用するのは最も一般的な方法です。ただし参考書を選ぶにあたって、*実務経験のない方であれば、実際にLinuxの操作環境の構築方法についても解説している本を選択するのがおすすめです。*OSの仕組みやコマンドの意味は、実際に実機を活用して操作しながら学習することで、理解が深まります。
ここからは、LinuCとLPICのレベル1におけるおすすめの参考書を1冊ずつ紹介します。

*[LinuCレベル1おすすめ参考書：Linux教科書 LinuCレベル1 Version 10.0対応](https://www.shoeisha.co.jp/book/detail/9784798167602)*
LinuCは2020年4月よりVersion 10.0にバージョンアップしており、**本書籍は新しいバージョンに対応したLinuCの参考書です。**また*試験の運営元であるLPI-Japanが認定したテキストであるため、信頼性の高さが特徴と言えます。*101試験と102試験の両方を対策でき、練習問題や模擬試験も搭載しています。さらにLinuxを操作できる環境を、翔泳社のWebサイトからダウンロードできるため、実際に実機で検証しながら学習を進めることが可能です。


*[LPICレベル1のおすすめ参考書：Linux教科書 LPICレベル1 Version5.0対応](https://www.shoeisha.co.jp/book/detail/9784798160498)*
**本書籍は新しいバージョンに対応しており、試験の運営元であるLPIが認定したLPICの参考書です。**101試験と102試験の両方を対策でき、練習問題や模擬試験も搭載しています。またLinuxの操作環境を翔泳社のWebサイトからダウンロードできるため、Linuxを実際に扱いながら勉強を深めることが可能です。

LinuCやLPICの学習に、勉強サイトを活用するのもおすすめです。**勉強サイトの代表例として「Ping-t」が挙げられます。**無料登録だけでもLinuCとLPICの101試験の対策を行うことが可能です。また有料会員になれば、LinuCとLPICの全てのレベルの対策を行うことができます。
（ 参考：https://ping-t.com/ ）

Ping-tには豊富な問題が提供されているため、問題集の代わりに利用することもできます。また通勤や休憩時間などの隙間時間を活用して勉強することも可能です。さらに*参考書と勉強サイトを併用すれば、効率よく学習することができます。*

### 通信講座やスクールを活用する

参考書や勉強サイトは独学向けの勉強方法です。独学で勉強するメリットは、コストがかからないことや自分のペースで学習できることなどです。ただし*疑問点や不明点がある場合、自身で解決しなければならず、途中で挫折してしまう方も少なくありません。*

**独学の苦手な方は、通信講座やスクールを利用するのがおすすめです。**費用は独学よりもかかりますが、サポートを受けながら学習できるため、確実な資格の取得を目指せます。このように様々な勉強方法があるため、自分に合った方法で学習しましょう。

## LinuCとLPICの違いを正しく把握して試験の対策をしよう

これまでに、LinuCとLPICの違い・資格を取得するメリット・勉強方法について解説しました。LinuCとLPICともにLinuxのスキルを証明するための資格試験です。**LinuCは日本市場向けの試験、LPICは国際的に認知されている試験ということもあり、海外で仕事を考えている方は、LPICの受験がおすすめと言えます。**

LinuCまたはLPICの資格を取得すれば、実務で役立つLinuxのスキルを習得することができ、特にインフラエンジニアの就職や転職で有利となるでしょう。勉強方法には参考書や勉強サイトなどが挙げられますが、*実際にLinuxの実機に触れながら学習するのが重要です。*まずはLinuCとLPICの違いを正確に把握して、自分に合った試験の対策を行いましょう。

LinuCとLPICは、共にLinuxのスキルを証明するための資格試験であり、どっちを受験したら良いか迷われている方は少なくないでしょう。当記事では、LinuCとLPICの違い・資格を取得するメリット・勉強方法について解説します。

LinuCは日本市場向けの試験、LPICは国際的に認知されている試験という違いがある

海外での仕事を考えている方は、LPICの受験がおすすめ

LinuCまたはLPICの勉強をするにあたって、実際にLinuxの実機に触れながら学習するとスキルが身に付きやすい

LinuCとLPICの違いとは？資格を取得するメリットや勉強方法を解説

HTMLのdivタグとは？読み方・目的・使い方などを解説！ 

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

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

この記事ではHTMLの勉強法について解説しますが、その前にHTMLを学ぶ必要性や目的について確認しておきましょう。学ぶには明確な目的が必要です。「何となく」「後学のために」といった軽い気持ちで学んでも身に付きません。
学ぶ以上は、「*HTMLを学んで何をしたいのか*」「*自らの人生設計にどう役立てるのか*」を明らかにすることが先決です。

### エンジニアにHTMLの知識が必要な理由

*Webサイトは基本的にHTMLで作られています*。「ブログを作ったことはあるけれど、HTMLは使わなかった」という方は多いです。最近はCMSと呼ばれる、テキスト入力やWord操作の感覚でWebサイトの作成や更新ができるツールが増えました。
誰もが知っているWordPressではHTMLの知識が皆無でもWebページを作れますが、WordPressのアウトプットはHTMLです。つまり、Webページを作るだけなら、HTMLの知識は無くとも困ることはありませんが、次の理由から*ITエンジニアにとってHTMLは必要不可欠の知識*と分かります。

**1.Webページの最終調整にはHTMLスキルが求められる**

WordPressの操作で、シンプルなWebページは作れますが、特徴的なWebページを作るのに限界があります。仮にWordPressで作成できても、最終的な*Webページの微調整・動き・色合い整など、デリケートな調整はHTMLで直接記述することがあります*。

**2.HTMLの知識があると具体的な指示を出せる**

システムエンジニアがWebプログラマーやWebデザイナーに開発の指示・修正・微調整の指示を出す際に、*HTMLを知っているか否かによって、指示の具体性が大きく変わります*。

**3.フルスタックエンジニアへの近道**

複数の領域のスキルを持ち、オールラウンドに活躍できるエンジニアをフルスタックエンジニアと称しますが、*HTMLのスキルを持ったエンジニアは、フルスタックエンジニアを目指せる可能性*があります。
例えば、*フロントエンド開発の領域ではHTML・CSS・JavaScriptの3つを習得していれば、ほぼ独力でフロントエンド開発を担えます*。
さらにPHPやPythonなどの言語スキルを身に付け、*フロントエンド開発に加えてバックエンド開発を担えると、フルスタックエンジニアとして活躍の機会*が広がるでしょう。

HTMLは"Hyper Text Markup Language"の略語です。Languageは言語と訳されることが多いため、プログラム言語の一種と思いがちですが、プログラム言語ではありません。

HTMLのLanguageは言語の意味ではなく、文法やルールの意味合いです。*HTMLはプログラミング言語ではなく、マークアップ言語なのです*。

私たちが日常利用しているWebページは、視覚的に分かりやすくタイトル・文字・画像などが配置されています。一方、コンピューター側からWebページを見てみると、単なるコードの羅列です。
実は**HTMLがコンピューターと人間を取り持ち、翻訳者の役割を果たしています。**
HTMLがコンピューターに対して、Webページに表示する文字・画像のサイズ・配置を教え、その指示を受けたコンピューターが人間の視覚に訴えるページを作成します。
次に、HTMLのHyper Text （ハイパーテキスト）について確認しておきましょう。

### ハイパーテキスト（HyperText）とは

「HyperText」のHyperは直訳すると「超」です。「HyperText」はテキストを超越するテキストという意味になります。では、何が「超」なのでしょうか？

Webページには「ハイパーリンク」というものが頻繁に登場します。このハイパーリンクには、元の語句から直接、関連文章や説明文書を呼び出す機能があります。
このように*語句や文章を「関連づける」ことをハイパーリンク*と呼び、**ハイパーリンク機能を持っている文書を「ハイパーテキスト」と呼んでいます**。この「ハイパーテキスト」から成り立っているのがHTMLの特徴の1つです。

HTMLがハイパーテキストで構成されていることは理解できました。ではマークアップ"Markup"とは何を意味するのでしょうか？

「タグ（Tag）」と呼ばれる記号によって文章を囲い、**「マークアップ（Markup）」は文章に「目印をつけて」意味を持たせること**です。

*「タグ」（Tag）とはWebページ上での表示のさせ方を指定する「命令文」*であり、テキストをその意味ごとに"&lt;&gt;"で囲みます。

この**タグをコンピューターが読み取り、人に分かりやすい表示に変えてくれる**という仕組みです。

たとえば、見出しであれば階層の上から&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;の様に記述*します。

Webページの作成において、HTMLと切ってもきれない関係にあるのがCSSで、CSSは"Cascading Style Sheets"の略語です。
CSSは化粧に近いものと考えてください。**HTMLだけで作られたWebページに見栄えよく化粧を施したり、動きを付ける役目**を持ちます。HTMLを学習する際には、ぜひCSSも学びましょう。

HTMLが主にWebページの作成に使われていることは理解できましたが、実はHTMLはWebページ以外にも活用されています。ここでは、*HTMLが利用されている主な3つの領域*について紹介していきます。

世界中のWebサイトのほとんどがHTMLによって開発されています。それを確認する方法があります。

HTMLで記述されているソースコードを確認するには、*Windowsパソコンなら「Ctrl+U」、Macの場合は「⌘+Option+U」を同時に押すことでソースコードが現れます。*

**Webサイトの裏側はすべてHTMLで記述されている**のです。

普段利用している*EメールでもHTMLが使われているケースが増えています*。特に多いのは、広告メールです。メールを開くと、あたかもWebページのように画像やアニメーションが見られるメールを受け取ったことがあるでしょう。
ビジネスメールではテキストメールが主流ですが、**メルマガや登録サイトのお知らせメールなども「HTMLメール」が大半**です。

言語・開発の記事（103ページ目）