皆さんにとってインターネットはもはや日常のものとなり、日々、PCやスマートフォンを通してさまざまなWebサイトを閲覧されていると思います。
それらのWebサイトはそのほとんどが『HTML/CSS』で構成されています。
このHTML/CSSを学ぶことで、プログラミング言語の基礎力を向上させたり、自己発信につなげたりなど、多くのメリットがあります。
本記事ではHTML/CSSとは何か、その学習法について紹介させていただきます。
「HTML」と「CSS」とは？
皆さんは日々、ネットサーフィン等で、PCやスマートフォンを通して様々なWebサイトを閲覧していると思います（今まさに読んでいただけている、本サイトも同様です）。
この「Webサイト」を構成するのが、『HTML』と『CSS』です
HTML（Hyper Text Markup Language）
『HTML』は、Hyper Text Markup Languageの略で、Webページ作成のために開発されたマークアップ言語です。
Hyper Text、つまり通常のテキストにリンクなどの意味を持たせたり、またMarkup、タグ付けにより画像や表を表示させることにより、Webサイトの構造を作るための言語（Language）ということです。
HTMLにも3や4といったバージョンがありますが、昨今ではHTML5が標準的となっています。
CSS （Cascading Styles Sheets）
『CSS』は、HTMLと比較すると聞き馴染みがないキーワードかもしれませんが、Cascading Styles Sheetsの略で、HTMLと組みあわせ、Webサイトの見た目を整えるスタイルシート言語です。
例えば、テキストのフォントやサイズ、色などの表現方法はHTMLではなくCSSで構成します。
基本的なテキスト構造から構成されるHTMLを、皆さんが見やすいように装飾する役割と考えるとわかりやすいかもしれません。
HTML/CSSを学ぶメリット
ここまでHTML/CSSの紹介をしましたが、実は本サイトのようなブログを作成する場合、近年はテンプレートが充実しているため必ずしもHTML/CSSの知識は必須ではありません。
それにもかかわらずHTML/CSSを学ぶメリットはどこにあるのでしょうか。
プログラミング学習の一歩
前述のように、HTML/CSSは、いわゆるプログラミング言語ではありません。
しかし、プログラミング学習を始める方にとってはその第一歩として最適な言語となります。
理由は、HTML/CSSはWebページの「見た目」を構成する言語であるため、1行変更を加えるだけで見た目が変わる、構成が崩れるなど、アウトプットが把握しやすいためです。
プログラミング学習を通して身につく論理的思考力や問題解決能力も、サイト構成やエラー修正を通して身に着けることができます。
マネタイズに繋げやすい
HTML/CSSに強くなることで、マネタイズに繋げやすいというメリットがあります。
個人的には、HTML/CSSに強いことで、就職や転職の強みになることはないと感じますが、一方、中小企業主や個人事業主が会社のホームページを作成したいニーズは常に高いため、『Webコンサルタント』としての活躍のチャンスがあります。
それだけまだまだITリテラシーが十分でない経営者が多いということです。
また、自身のホームページやブログを持ち、自己発信したいなどの場合にも、オリジナルのWebサイトを構築することで、（集客のためには目立つことが必須であるWebサイトにおい、）他との差別化を図ることができます。
HTML/CSSの学び方
HTML/CSSは、プログラミング学習のはじめの一歩として学習を始めやすい言語です。
学習のスタートとしては、以下の2つが考えられます。
- Webプログラミング学習アプリ
- 書籍学習
オススメは、「Webプログラミング学習アプリ」です。
プログラミング言語学習であるため、Ｗebアプリで実際に稼働させることで、書籍学習とは圧倒的に習得スピードが異なります（構文が少しでも間違っていると正しく挙動しない、というのも実際に稼働させないと気づくことができません）。
プログラミング学習アプリ（Progate）
HTML/CSSを気軽に始めてみたい方向けに『Progate』という超オススメプログラミング学習アプリがあります。
プログラミングの最初の難関は環境構築で、ここで挫折する方も少なくないですが、『Progate』は環境構築を行う必要なく、Web上の紙芝居形式で実際のケースを通してHTML/CSSをはじめとした多様なプログラミング言語の基本を学ぶことができるアプリです。
なお費用は月額980円、HTML/CSSコースだけであれば15時間程度で完了しますので月額料金を最大限にいかしたい方はこのタイミングで他の興味ある言語（Web系であればJavaなど）の基礎コースを学ぶのもよいかと思います。
書籍学習
書籍学習のオススメポイントは長期的に使えることです。
教科書とする書籍は絶対コレ！というものはありませんが、私が所有しているものが使いやすいのでオススメの一冊として紹介させていただきます。
まとめ：次のステップとしてJavaScriptがオススメ
本記事ではHTML/CSSとは何か、その学習法について紹介しました。
上記でご紹介したWebアプリや書籍である程度学習を進めていくと、静的サイトは作れるようになったものの、次のステップとして今度は動的なサイトを欲するはずです。
動的サイトを実現するのが『JavaScript』となります。ご興味があれば合わせて学んでみてはいかがでしょうか。
コメント