HTMLの学習方法についてご紹介します。
HTMLとはハイパーテキストマークアップランゲージの頭文字で、ホームページの文字列を表現したり、ホームページの内部情報を記述するために使われるプログラミング言語です。HTMLの学習方法をまとめました。
目次
パソコン
HTMLはサイトを構成するファイルですが、基本的には、パソコンを使ってHTMLファイルを作成します。パソコンを持っていない場合、パソコンを購入しましょう。
HTMLの理解を深めるために必要な基礎知識
HTMLに限った話ではないですが、プログラミング言語は英語圏で開発されます。そのため、HTMLは英単語に即した言語となっています。HTMLの理解を深めるためにある程度英単語に詳しくなっておいて損はありません。例えば、段落を表すタグである<p>は、Paragraphのpです。Paragraphは段落を意味しています。
その他にも、ブラインドタッチ（キーボードをみないで文字を打つこと）ができたほうが学習のHTMLのスピードがあがります。
HTMLを学ぶとできるようになること
HTMLを学ぶと次のことができるようになります。
- HTMLテンプレートを使用してサイトを制作する
- 企業が管理しているウェブサイトの更新
- SEO対策に有効なHTMLタグを理解する
HTMLはホームページの文字列を表示するのが基本的な使い方です。HTMLのみでホームページを作った場合、文字だけのサイトになってしまうため、HTMLとCSSを一緒に学ぶことをお勧めします。
本で学ぶ
AmazonでHTMLについて検索し、興味のある本を購入しましょう。
本で学ぶメリット・デメリット
本で学ぶメリットは、本を開いた状態でパソコンを触れることや、学校の勉強と同じ感覚で学習することができるということです。本で学ぶデメリットは、本の保存場所が必要であること、本を買うための費用が必要であることです。
WEBメディア
WEBメディアとは、HTMLについて紹介しているブログなどのことを指します。
WebSite Factory
当ブログが管理しているWEBに関するメディア。HTMLでサイトを作る方法やCSSなどについてまとめています。
特徴
- HTML・CSSなどの各言語についてまとめている
- 無償で使える
- Youtubeチャンネルを開設している
プログラミング学習サービス
プログラミングをオンラインで学習できるサービスを紹介します。
Udemy
Udemyは、動画等の教材でプログラミングについて学べるサービスです。教材や動画はすべて有料ですが、有料ということもあって高品質な教材が提供されます。
Progate
Progate（プロゲート）は、実際にHTMLのコードを書いて学習するサービスです。無料のプランと月額1,000円ほどの有料プランの2プランが存在します。
ドットインストール
ドットインストールは、動画と教材をつかってオンラインでプログラミングについて学べるサイトです。無償で学べる教材と、有料のものが存在します。
プログラミングスクール
HTMLはプログラミング言語のひとつであるため、プログラミングスクールで学ぶことができます。プログラミングスクールにも、オンラインのみで完結するもの、通学して学ぶものなどさまざまな種類があります。高額ではありますが、転職をサポートしているプログラミングスクールも存在しています。
メンター
メンターは、プログラミングの先生のような存在として、プログラミングを教えてくれる職業です。プログラミングの先生ではないので、0から手取り足取り教えるわけではありませんが、必要に応じてプログラミングの質問が可能な存在としてプログラミングを教えています。メンターとマッチングできるサービスや、メンターを提供しているサービス会社などが存在します。必要に応じて活用しましょう。
HTMLで実際にサイトを作る
HTMLを使用して実際にサイトを作成しましょう。HTMLでのプログラミングをやりやすくするためにテキストエディタとGoogle Chrome（グーグル・クローム）を導入します。
Visual Studio Code（テキストエディタ）
Visual Studio Codeは、Microsoftが提供しているテキストエディタです。HTMLファイルはWindowsのメモ帳でも作成可能ですが、HTMLファイルを編集するのにテキストエディタを用いたほうが利便性が高いです。HTMLでサイトの構築、編集を行う場合はテキストエディタを使用しましょう。
Google Chrome（ブラウザ）
Google Chromeは、Googleが開発したブラウザです。日本でのユーザーのシェアが最も多く、安定感が高いのが特徴です。
模写
HTMLの学習用に、HTMLで書かれたソースコードをあらかじめ公開しているサイトがあります。それらのソースコードを参考に、HTMLを模写してみましょう。模写することでHTMLの構造を理解する助けになります。
Googleで検索する
HTMLで作ったサイトに実装したいものをGoogleで検索します。例えば、箇条書きを追加したい場合、「HTML 箇条書き」などと検索しましょう。Googleは日本、世界どちらでも最もシェアが高く、Googleで検索することで多くの情報にアクセスすることが可能です。
検索能力とエンジニア
Googleで検索する能力は、HTMLを使う現場でも重要な能力です。HTMLの学習を通じて検索する能力を向上させましょう。
作ったサイトをウェブ上に公開する
HTMLで作成したサイトをウェブ上でだれでも見られる状態にするには、レンタルサーバーを契約する必要があります。サーバーは、常にインターネットにつながっているコンピューターです。サーバーにHTMLで作成したデータを保存し、誰でも見られるようにします。
HTML・CSSで作ったサイトのデータを自分のパソコンに保存している状態では、自身のパソコンからしか閲覧することができません。
さくらのレンタルサーバーは、国内シェアナンバー３に入るサーバーの中で最も安価に使用することができます。初めてHTMLで作ったサイトをインターネット上で公開する場合下記リンクからレンタルサーバーを契約しましょう。
公開したウェブサイトの使い道
一般公開したウェブサイトを、未経験でWEB制作会社に就職する際のポートフォリオとして使用することができます。クオリティの高いサイトに仕上げ、就職活動や、転職活動に活かしましょう。
HTMLを使う場面
企業のサイトを更新する際に、HTMLの知識が必要になります。段落を表すタグ、<p>や、改行を表すタグ<br>、見出しを表すタグ、<h1>などはよく使うため、暗記しておいて損はありません。
HTMLテンプレートなどを作成しているWEB制作会社に就職する場合、HTMLで作ったサイトをポートフォリオとして提出する必要があります。
CMSの使用
CMSとは、コンテンツマネジメントシステムのことで、ホームページやECサイトなどの制作や管理を簡単にするソフトです。CMSで制作されたサイトであっても、HTMLをベースとしてページを構成しているので、CMSにより精通することができます。
HTMLについて学んだあとに学びたいもの
HTMLについて学んだら、CSSやWordPressの学習をすることでよりスキルが広がります。
CSSは、HTMLで記述した文字列に色などの装飾を加えるためのプログラミング言語で、HTMLとCSSはセットで動作します。WordPressは、世界で最も使われているCMS（コンテンツマネジメントシステム）でホームページの制作管理を容易にしたソフトです。WordPressでサイトを制作する場合にも、HTMLの知識が必要になります。
まとめ
HTMLは、ホームページの制作や管理を行う場合必ず使うプログラミング言語です。学生で時間がある場合は学習しておくとよいでしょう。