今回はHTML＆CSS完全攻略ロードマップ第2弾ということで、HTML＆CSSって何？実際にどこで使われている？といったことについて説明していきます。
第1弾を読んでない人は、この第2弾を読む前にできれば1度読んでみてください。第1弾では、HTML＆CSSを学習するにあたって、挫折してしまう人が非常に多い現状はなぜなのか、またほとんどの人が間違えて認識してしまっているプログラミングの勉強法について、解説しています。これらのプログラミングに対する考え方を知っておくだけで、これからのプログラミング学習の効率が2倍にも3倍にもなってくるので是非読むことをオススメします！
- HTML＆CSSで何ができるのかが分からない
- HTMLとCSSの違いがよくわからない
- 実際どこで使われてるのかが知りたい
Contents
HTML＆CSSとは
Rawpixel.com – jp.freepik.com によって作成された background ベクトル
これまでHTML＆CSSとセットにして紹介してきましたが、この二つはまったく別の言語です。
このように思われた方がいるかもしれませんが、私はこの2つの言語は同時進行で勉強をすすめていくことをオススメします。というのも、この2つの言語はとても密接な関係があって、「HTMLできます！」だけだとなかなか仕事をもらうのも難しいし、「CSSできます！」だけだと、これまた仕事をもらうのが難しいという現状があります。
このような理由から、HTML＆CSS完全攻略ロードマップでは、同時にこれらの言語の学習を進めていきますが、プログラミング未経験者の方でも着実に案件がもらえるようになるまで、段階を踏んで一緒に学習を進めていけるようなコンテンツを提供しているため安心してください。
それでは、HTMLとCSSの各言語について解説していきます。
HTML
HTMLとはWebページを作成するために作られたマークアップ言語です。
って思われた方も多いと思います。一応定義として、上記のように書かせてもらいましたが、この後でわかりやすく説明しますので気にしないでください！ただ、マークアップ言語という言葉自体は知っておいてもいいかもしれません。と言いますのも、先日、仕事で使用可能なプログラミング言語の話をしているときに「使えるマークアップ言語とかあったりします？」と聞かれたので。頭の片隅にでも置いておくといいでしょう。
マークアップ言語とは、コンピュータによって処理される人工言語の種類の一つで、データ中に特定の記法を用いて何らかの情報を埋め込むためのもの。テキスト（文字）データ中に特定の記号で囲まれたタグ（tag）と呼ばれる表記を用いて構造や見栄えなどを記述するものがよく知られるが、バイナリデータ中に埋め込むものなど、様々な種類がある。
出典：IT用語辞典
簡単に言うと、日本語や英語をタグ（<html>内容</html>など）で囲むことで見栄え良く見せられるようにしたプログラミング言語です。
HTMLって何に使われている？
それはもうもちろんWebサイトです。
HTML＆CSS完全攻略ロードマップを見ている方も、「Webサイトを作りたい！」→「HTMLを勉強しよう！」と思われてここにいる方も多いのではないでしょうか。
と言っても実感湧かないなあ。。。って方は、
「右クリック」して「検証」というところをクリックしてみてください。
右側にこのような画面が表示されましたでしょうか？
右側の上と下に二つなにやら、ソースコード（プログラム）が書かれている画面が見えると思います。実はこの上側のソースコードがHTMLなのです。「<>」の記号で囲まれているプログラミング言語という話もなんとなくイメージできるようになったでしょうか？
初心者でもHTMLを簡単に習得できる理由
第1弾を読んで頂けた方なら分かると思うのですが、「HTMLはプログラミング言語の中でも最も簡単な言語の1つです」のような表現をこれまでに何度かしてきたのですが、その理由についてここでは説明しようと思います。
その理由は、HTMLは「積み木」だからです。
基本的にプログラミング言語は、上からどんどんソースコード（プログラム）を書いていきますが、そのプログラムを実行させるときに、同じ処理を指定回数だけぐるぐる回ったり、処理が分岐したりします。
例として、PHPというプログラミング言語で書かれた以下の写真をごらんください。白色の矢印は、コンピュータがプログラムをどのように実行していくかを表現したものです。
もちろんここではHTML&CSSを勉強してほしいので、内容については理解する必要はありません。もし、PHPについて興味がでてきた方は、コチラを見てみてください。
白色の矢印を見てもらうと、くるくると回っていたり、矢の方向が2方向に分かれていたりと複雑になっているのが分かると思います。
しかし、HTMLでは基本的にこの矢印は１本しかありません。
コンピュータはHTMLを読み込むとき上から下まで一回読み込んで、ブラウザ（Google Chromeなど）に表示するだけなのです。
もちろんこれは、コンピュータにとっても楽かもしれませんが、正直コンピュータさんは頭の回転が1秒間に2億回くらいなので、ほとんど関係ありません。（これはイメージです笑）
この処理の矢印が一本であることで、一番楽な思いをするのは、人間です。先ほどの写真のように複雑になった処理の流れを考えるのは、非常に困難ですよね？しかし、HTMLは処理が単純なので、人間にも簡単に処理が理解できます。
先ほど、「積み木」という言葉を使った意味がなんとなく分かってきたでしょうか？HTMLは、上からどんどんパーツを積んでいくだけで、立派なWebサイトが完成してしまうという意味です。
それでは、CSSについて見ていきましょう。
CSS(Cascading Style Sheets)
CSSとはウェブページのスタイルを指定するために作られた言語です。
HTMLもプログラミング言語の中では、簡単な分類に分けられますが、CSSはさらに簡単なプログラミング言語です！
CSSって何に使われているの？
それはこれまた、もちろんWebサイトです。
こう思われた方もおられると思いますが、HTMLとの最もおおきな違いはこのポイントです。
CSSは飾り付けをするだけ！
ここで飾り付けとは、「色や大きさなどを指定すること」です。詳しくは次節で説明していますので、このまま読み進めてください。分かりやすい例を挙げますと、
HTMLは作家で、CSSは編集者のような関係にあるということです。作家は、原稿用紙にひたすら内容を書いていきますよね？その後、編集者が、読者に見やすいような形にして読者に提供すると思います。この違いがHTMLとCSSの違いと思ってもらって大丈夫です。
CSSは初心者にとって簡単な言語であるかどうか
HTMLは簡単な方のプログラミング言語だけど、CSSはもっと簡単であるということを書きましたが、CSSにはひとつだけ考慮しないといけない注意点があります。それは、基本的にHTMLがなかったら何の役にも立たないプログラミング言語でもあるということです。というのも、先ほどの例で考えると、CSSは編集者の役割をしているのですが、作家（HTML）がいないとなにも編集するものがなくなってしまいます。具体的に説明すると、HTMLでは、
<〇〇 class="クラス名">内容</〇〇>
のように、「class=”名前”」という形で、それぞれの積み木のパーツに名前をつけることができるのですが、この名前がついたそれぞれの積み木のパーツに対して、「大きさはこのくらいで、色はこの色で」という風に指定していくのがCSSの役割なのです。
例えば、上記のHTMLに対して、横幅を500px、縦幅を300pxにしたいのならこのように記述することで、コンピュータは横幅500px、縦幅300pxの箱を積み木のパーツとして準備し、その中にHTMLのソースコード内の内容を打っていくことになります。
例として以下の写真を見てください。
なにやら、「.input0」やら「.input2」やらいろいろなものが書かれていて、その下に「width:100px;」のようなことがいろいろ書かれているのが分かると思います。実は、この「input0」や「input2」が先ほど説明したクラス名にあたるところで、「width:100px;」というのが、大きさはどのくらいでという指定になっています。
詳しくは、今の段階では分からなくても大丈夫で、このままHTML＆CSS完全攻略ロードマップを読み進めてください！次節から、そのような基本的なところの勉強方法についてもまとめていきます。
HTML＆CSSの需要
まず、結論から申し上げますと、HTMLとCSSの需要は…
めちゃくちゃあります！
そのため、需要の面から考えてもHTML＆CSSを学習する初めてのプログラミング言語として選択するのはなかなか良い選択だと思います。
しかし1点だけ注意点があります。
HTML＆CSSを仕事にする上での注意点
HTMLとCSSを使って案件を獲得していくときの注意点は、ずばりこの点です。
供給が多いこと
先ほど述べたように、HTML＆CSSの需要はとても高いというのは事実なのですが、それと同じくらい供給が多いという現実があります。というのも、HTML＆CSSはプログラミング初心者でも扱いやすいので、学習する人もそれだけ多くなってくるからです。そのため、HTML＆CSSだけで仕事を受注することは十分に可能ですが、単価が安くなってしまったりといった問題点もあります。
少し待ってください。今言ったことは現実の話ですが、HTML＆CSSができるとできないでは、大きな差が生まれてきて、HTML＆CSSを知っていると、仕事を受注するときの受注できる仕事の幅、単価が大きく上昇します。
一見矛盾しているように見えると思うのですが、HTML＆CSSを使って、受注できる幅も広くして、単価もあげたい方は「多言語と組み合わせて」HTML＆CSSをできるようになる。という必要があります。特に、先ほど少し登場した、PHPというプログラミング言語なんかはHTML＆CSSと組み合わせて、使用することができ、「PHPだけでも、HTML＆CSSだけでもダメだけど、組み合わせることで作れるものの幅が無限大になる」ということを頭の片隅に置いておいてください。そのため是非HTML＆CSS完全攻略ロードマップが終わった暁には、新たなる言語として「PHP」を「PHP完全攻略ロードマップ」
きっと、ここまでの話を聞いたみなさんの中には、「３つの言語なんて自分にはちょっと無理・・・」と思われた方もいると思います。そうです、最初からPHPも含めて勉強するのはやめることをオススメします。というのもPHPはHTML＆CSSと比べて、少しハードルが上がります。まずは、HTML＆CSS完全攻略ロードマップを使って、段階を踏んでから、PHPに学習を移しましょう。
追記：ちなみにHTML＆CSSでも生活費を養うくらいの収入を得ることは、HTML＆CSS完全攻略ロードマップを最後まで勉強された方であれば可能なので安心してください。（嘘だと思った方はLancersなどで案件の単価を見てください）
HTMLとCSSを組み合わせるとどうなるの？
Katemangostar – jp.freepik.com によって作成された banner ベクトル
これまで、HTMLがどのような働きをして、CSSがどのような働きをしているのかを解説してきましたが、実際に組み合わせることで、どの程度見た目が変わるのかを説明したいと思います。きっと直観的にCSSの重要性が分かって頂けると思います。
ちなみにこれから例として挙げるWebサイトは、私自身が以前に勉強の一環で自作したものです。（今後、例題で登場するかも！？）
HTML＆CSSでの見え方
画像をクリックしていただくとこのページにアクセスできます。
このWebサイトは2週間程で作成しましたが、白紙の状態からここまでできるようになれば、あとは時間をかけて細部にこだわっていけば、「プロだね」って言われるくらいのクォリティにすることは十分に可能です！もちろん、HTML＆CSS完全攻略ロードマップを利用して頂ければ、このレベルの制作物を作れるくらいには成長できますので、期待していてください！
これが、HTMLとCSSの両方を使ったWebページの見え方です。では、HTMLのみだとどうなるでしょうか。
Webページのブラウザでの見え方(HTMLのみ)
そう言ってしまいたくなるほど、見栄えが悪いですよね笑
一応言っておきますが、先ほどのWebサイトから「CSS」を除いただけです。
CSSの威力分かって頂けたでしょうか？
案件をもらうためには事前に会員登録をしておく
また、完全攻略ロードマップを見ているみなさんは、フリーランスとして案件をもらったことのない人が多いのではないでしょうか。まだ、案件獲得をしたことのないプログラミング学習者のみなさんは、以下のような登録していると案件をもらえるサイトに会員登録を事前に済ませておくことをオススメします！と言いますのも、フリーランスエンジニアとして活動する際に、スムーズに案件がもらえるようになると思うので、会員登録だけでも先にしておくと良いと思います！
私自身も、プログラミングの勉強を始めるとほぼ同時に、案件を獲得するための活動を行っていた結果、スムーズに案件獲得ができました。
まとめ
今回のHTML＆CSS完全攻略ロードマップ第2弾では、HTMLやCSSって一体何なの？どこで使われているの？といったところを解説していきました。HTML＆CSSのイメージはなんとなくつかめてきたでしょうか。それだけでなくHTML＆CSSの需要や、次に勉強するべきプログラミング言語なども見えてきたでしょう。ここで1点だけ注意点。
絶対に中途半端に学習を止めて、次の言語の学習に移らないでください
途中で、他の言語も勉強したいと思うときがあると思いますが、中途半端にできても仕事ももらえず、その言語もちゃんと使えないという状況になってしまうので、この点だけには注意してください。
次回のHTML＆CSS完全攻略ロードマップ第3弾では、実際にHTML＆CSSを学んでいく過程に入ります。まずは基本的なところをしっかりと押さえることが最も重要になってくるので、どうやって基本的なところを勉強していくのかについて解説します。ほとんどのプログラミング初学者の方は間違って、基本事項の勉強を進めてしまっている現状があるので、必見です。
今回は、以上になります！質問や疑問点などございましたら、ぜひぜひ「お問い合わせ」の方からご連絡ください！Twitterも是非フォローよろしくお願いします！
その他、勉強法や就活、プログラミングに関する相談なども受け付けています！
