始める前に知っておこうHTML/CSS/JS/jQとは？

英語ができない黒い巨匠です。
スペルミスや読み間違えをしょっちゅうするので恥ずかしいです。

今回はHTML/CSS/JSの学習をする前にそれぞれがWEBページを構成するにあたって、どのような役割を持っているのかご説明したいと思います。
超基礎的な事ではありますが、役割をしっかりと知っていると学習の進め方や理解のし易さが変わってくるのでここはかなり重要。
ほわっとしている方も、知ってらーい！と言う方も改めてご一読いただきたいです。

使用している画像は、社内講習会用のスライドから流用しています♪

HTMLとは

Hyper（はいぱー）
Text（てきすと）
Markup（まーくあっぷ）
Language（らんげーじ）
の略です。
マークアップ言語の一種です
マークアップ言語というのはコンピュータ言語のうち「文章を構造化」する役割を持つ言語の事です。
HTMLの他にもSGML、XML、XHTML等があります。

HTMLだけをブラウザで表示するとこんな感じ

シンプルですね、ブラウザに表示はされていますけど味気ない。
ですが、HTMLを綺麗に記述しておくといざCSSやJS/jQが出てきた時に生きてくるので見た目は味気ないですが、全体を意識して記述しましょう。

HTMLは人間に例えると…

ということですね。

CSSとは

Cascading（かすけーでぃんぐ）
Style（すたいる）
Sheet（しーと）
の略です。
HTMLに色や線をつけたり大きさを変えたりと、装飾を施すことができます。
カスケーディングというのは１つの要素に対して宣言が複数あるとき、宣言の強さの関係を定め、一つの宣言だけが有効になる仕組みの事です。
簡単に言うと私に対して何人もが愛の告白をしてきたとき、一番声の大きい人と結婚するワ…ってことですね。（もてる女は辛い…）
名前についているだけあってCSSを記述する時はこの仕組みを常に意識しなければいけない事を覚えておきましょう。

HTMLとCSSを組み合わせてブラウザで表示させるとこんな感じ

わお！色がついたり文字の大きさや並び方が変わりました！
どんな装飾を施そうかワクワクしてきます。何者にでもなれる、そんな気さえしてきますー…。

CSSは人間に例えると…

ということですね。

JSとは

Java（じゃば）
Script（すくりぷと）

勉強し始めの頃、JSとJavaはどこか似ているのかな、と思っていましたが全く関係ありません。
というか一緒にするとJavaエンジニアさんに怒られるので注意。
JavaScriptを略すときはJS（じぇーえす）と略しましょう。

また、学習当初JSとjQとの違いがよくわかっていなかったのですが、jQというのはJSをベースにして生まれた子供のような存在で、JSを扱いやすくした別の言語にです。もちろん所詮子供ですのでJSより自由度はありません。
（フレームワーク/ライブラリなど詳細な説明は今回は省きます）

HTMLとCSSとJavaScriptを組み合わせるとこんな感じ

ロゴ画像をクリックしたら、ポップアップ表示されました！
動的な処理ができるんですね。地平線の果てまでいける、そんな気さえしてきますー…。

JavaScriptは人間に例えると…

ということですね。

HTML/CSS/JSでwebサイトを作ろう

それぞれの役割を意識できると学習する順番やwebサイトの製作過程が想像しやすくなったのではないでしょうか。
特にHTML/CSSはプログラミング未経験の方におすすめです。
摩訶不思議な英数字の羅列がどのように影響し合って表示されるのか、構成がわかりやすいので他の言語を勉強したい方もHTML/CSSを軽く触ってから目的の言語に行ってみるのもオススメです。

次はHTMLの基本について書きたいと思います！