これからプログラミングを学ぼうとしている皆さんの中には、プログラミングよりも先にHTMLやCSSを学んだほうがいいのかどうか迷っている人も多いと思います。
もし必要がないのなら、HTMLやCSSの学習に割く時間をそもそもプログラミングの学習割いたほうがいいのでは？
学習に取り掛かる前段階で、このように考えることもあるでしょう。私が初心者の時期も同じでした。
この記事では、みなさんが少しでも効率のよいプログラミング学習の指針を立てられるよう、HTMLやCSSの概要や学ぶメリット、注意点などを紹介していきます。
HTMLとCSSの基本はプログラミングより前に勉強しておくのが吉
HTML/CSSって何？
初心者がプログラミング学習の最初に学ぶ理由を述べる前に、そもそもHTMLやCSSとは何であるのか簡単に触れておきましょう
１）HTMLとは
Hypertext Markup Languageの略で1991年頃に登場しました。
HTMLという言語の書き方のルール（文法）に則って記述することで、文章や画像を意図したレイアウト通りに表示させることができ、サイトの骨組みを構築できます。
タグを用いて記述します。タグとは<>(小なり)で囲まれたものです。代表的なものをいくつか紹介しましょう。
＜br＞
このタブが文中にあると、以降の部分が改行されて表示されます。
<strong></strong>
強調したい文章や文字をこのタブで挟むと
<strong> 文字が太く </strong> 表示されます。
<h1>任意の文章</h1>
見出しにしたい文をこのタブで挟むと、
ほかの部分よりもフォントが大きく表示されます。
h1～h6まであり段階的にサイズが変わります。
<table><tr> <td>任意の単語</td> </tr></table>
学習サイトではないため詳しくは解説しませんが、これらのタグを組み合わせて、それぞれのタグに任意の文字や文章を入力すると、表形式になって表示されます。
２）CSSとは
Cascading Style Sheetsの略で、HTMLで作ったサイトの見た目を整えるのに使われる言語です。
色を変えたり画像や文字のサイズ、ここにもうちょっとスペースを空けたいといった細かい部分の調整ができます。簡単に書き方の例を載せておきます。
変化をつけたい要素を先頭に置きます。その後の指示を中かっこで囲みます。
要素{
Color:red
}
たとえば、上記のようなコードを打つと対象となっている要素が赤く色づいて表示されます。
HTMLとCSSの基本をプログラミングより前に勉強すべき理由
ここまで読んでくださった皆さんは、簡単な説明ではありますが、HTMLとCSSとはどんな言語であるのか少し理解ができました。
何ができるのかを踏まえたうえで、ここからは初心者がHTMLとCSSを最初に学ぶべき理由について述べていきます
理由１：文法が圧倒的に易しくて覚えやすい
プログラミングを学ぶということは、言語の文法を学ぶということです。
文法に沿ってコードを記述する、そのコードが変換されて画面に表示されたり動きが生み出されますHTMLやCSSは厳密にはプログラミング言語ではありませんが、上記した原理はどの言語にも共通しています。
この一連の流れを、一番気軽に体験ができるという意味で最初に学んでみるのはおすすめです。学習するにおいては文法が簡単な方がストレスは少ないでしょう。 簡単なものから入ればモチベーションの継続にもつなげやすいです。
理由2：簡単に環境が整えられるため始めやすい
簡単なのは文法だけではありません。プログラミング学習において厄介なのは、学習する以前に立ちはだかる環境構築です。これが大変くせ者です。
環境構築に躓いて挫折してしまうこともザラにあります。私も何度も挫折仕掛けました。環境構築で躓くこともエラーに対処することも同じようなものなので、そもそもここで諦めてしまうようであれば向いていないといえますが。
脅すようなことを述べてしまいましたが、HTMLとCSSに関してはご安心ください。極論メモ帳とグーグルがあればできます。つまりパソコンがあれば学べてしまいます。
ブラウザとエディタがあればOK
もう少し丁寧に説明すると、ブラウザとエディタを用意すれば環境構築は完了です。
ブラウザとはGoogleChromeやInternetExplolarなど私たちが普段WEBサイトを閲覧するのに使うもの。
エディタはパソコンに最初から入っているメモ帳でもなんでもいいですが、HTMLやCSSのコードを記述するためのツールです。
なので、メモ帳やテキストファイルにコードを書き、ブラウザに表示させるということの繰り返しで作る流れになります。
理由3：フロント部分であるので、視覚情報が多く楽しく学びやすい
フロントとは文字通り見た目のことですが、プログラミング言語でできることの大きな違いはここです。
HTMLやCSSは見た目のレイアウトや色などを意図したとおりにデザインするものです。
コーディング作業自体は地味なものですが、一行コードを記述しただけで文字が大きくなったり、画像のサイズが変わったり、表が現れたりします。
コーディングした結果はすぐに表示され、わかりやすいため「楽しい」と感じることが多いです。
何よりもプログラミングで詰まってしまう最大の敵である”エラー”に悩まされることがほとんどありません。
何かしらが間違っているため意図した表示にならないこともありますが、先に述べたように文法自体は簡単なのでエラーの原因の特定もそれほど難しくありません。
理由4：教材が充実している
どんなアプリやサイトを作るにも、ユーザー目線を考えるとやはり見た目（フロント）は重要。
フロント部分はユーザーの使いやすさに直結するのです。そのため、どんなプログラミング言語を選んで学習していくにしても触れることになります。そんな需要の高さが故に、教材は無数に存在しています。
サイト上でハンズオンで学習したり、動画視聴メインで学習するなど方法は様々ですが、教材や文法に関しての記事など初心者にとっては迷ってしまうほど充実しています。
プログラミングの学習について検索すると、必ずProgate、ドットインストール、Udemyといった学習サイトやそれらをお勧めしている記事が出てきます。
実際にサイトを見てみればわかりますが、HTMLとCSSは一番上に表示されています。これはやはり初心者向きであることが関係しています。
理由5：選択肢を広げられる
皆さんがプログラミングを学びたいのはなぜでしょうか。
単純に興味と時間があるから何んとなくという方もいるかもしれませんが、将来の仕事にしたい、あるいは転職したいから学ぶ方も多いでしょう
であれば、エンジニアやプログラマーが一体どんな仕事をしているのか知る必要があります。
学習においてわかりやすいため、広義的にフロント側/サーバー側と区別されているのは事実ありますが、結論から述べると実際にはフロント（見た目）も機能の部分（サーバー側）も兼任することの方が多いです。
求人などでコーダーと称されHTMLやCSSメインで業務を行っている会社や職種も存在しているので、HTMLやCSSを学んでその道のスペシャリストとなるという選択肢もあります。
どちらにせよ、自分の業務範囲や価値を広げる基礎となるので、いったんHTMLとCSSの基礎には触れておいた方がよいでしょう。
まとめ
HTMLとCSSは、そもそもプログラミング言語ではない。たしかに、この事実は紛らわしい衝撃です。
しかし、この記事を読んだあなたは、プログラミング言語を学ぶ前にHTMLやCSSの基本を学ぶ理由がわかったと思います。今後の学習プランを考える際に参考にしていただければ幸いです。