html_css_js_jq

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

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

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

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

HTMLとは

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

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

HTMLは人間に例えると…
html
ということですね。

CSSとは

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

HTMLとCSSを組み合わせてブラウザで表示させるとこんな感じ
CSS
わお!色がついたり文字の大きさや並び方が変わりました!
どんな装飾を施そうかワクワクしてきます。何者にでもなれる、そんな気さえしてきますー…。

CSSは人間に例えると…
CSS
ということですね。

JS/jQとは

Java(じゃば)
Script(すくりぷと)
/jQuery(じぇいくえり)
JSが親jQが子の様な関係。JSの膨大なライブラリを呼び出すjQは記述が少なくシンプルでわかりやすいのが特徴。
本当に未経験で勉強し始めの頃、JSとJavaはどこか似ているのかな、と思っていましたが全く関係ありません。
というか一緒にするとJavaエンジニアさんに怒られるので注意。
JavaScriptを略すときはJS(じぇーえす)と略しましょう。

HTMLとCSSとJavaScriptを組み合わせるとこんな感じ
JS/jQ
ロゴ画像をクリックしたら、ポップアップ表示されました!
動的な処理ができるんですね。地平線の果てまでいける、そんな気さえしてきますー…。

JavaScriptは人間に例えると…
JS
ということですね。

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

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

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

作者情報
最近フロントエンドやwebの勉強を始めた黒い服ばかり着ているデザイナー。
趣味はホラー作品鑑賞と怪談話を聞く事。激辛グルメが好き。