[持論] HTMLとCSSとJavaScriptのざっくりした図解

この記事は2017年4月21日に更新したものです。情報が古くなっている可能性があるのでご注意ください。

タイトルの表記を少し変更しました

一番最初にWEBデザインを勉強しようと思ったときに、まず勉強しようとするのがHTMLとCSSじゃないかなと思います。今回はその2つとJavaScriptをあわせた3つの関係性を図示しようかと思います。

※あくまで私の中の関係性のイメージですので、厳密には違うかもしれません。

 

HTMLは身体

ホームページを作る基礎となるHTML(HyperText Markup Language)。<>で囲まれたタグで構成されるマークアップ言語です。

ホームページの構造を表しているので、私の中のイメージとしてはすっぽんぽん・すっぴんの人の身体かなと思っています。

ちなみに、これまでHTML4やXHTMLが使われていることが多かったのですが、これらの規格を統一したHTML5と呼ばれる規格改定が2014年にありました。記述の仕方もかなり簡単に分かりやすくなっているので、これから学ぶ人はHTML5の記述の仕方を参考にするのが良いと思います。

 

CSSは洋服

CSSはCascading Style Sheetsの略で、HTMLのスタイルを装飾するスタイルシートです。

なにも着ていないし化粧も指定ない状態から、洋服を着て化粧をした状態だと考えています。

個人のブログだったり、クリニックのホームページだったり、パン屋さんのホームページだったり…
同じホームページでもジャンルによって、「それらしい装い」(制服)やファッションと同じように「流行り」があるので、同じようなHTMLの構造を持っていても十人十色なデザインになってくるのです。いわゆるセオリーというやつです。
(逆も然りで、ジャンルが同じだとデザインも似てきてしまうことがある訳です)

ちなみにHTML5と一緒に耳にするが多いCSS3。ネットワークの高速化やコンピュータの高性能化によって、これまで画像で無理やり表現していた角丸やグラデーション、影といった効果を、コードによる記述で表現することができるようになりました。

 

JavaScriptは動作や表情

最後はJavaScript。似た名前でJAVAというものがありますが、全然別物です。

Javascriptはブラウザに使われるスクリプト言語で、オブジェクトの動きやアニメーション、動的なコンテンツを取り扱うことができるようになり、表現がぐっと広がります。
※実はアニメーションについてはCSS3でも使用することができますが、ここでは見なかったことにします(笑)

人で例えるなら動作や表情が当てはまるんじゃないかと思っています。CSSで挙げたように、ジャンルに適した「振る舞い」を考えて構成するのが大事です。

できることが多く、複雑になりがちなJavaScript。そんなJavaScriptをより簡単に扱えるようにしたJQueryと呼ばれるライブラリを用いることが最近では多いです。

 

HTMLとCSSとJavaScriptのざっくりした図解まとめ

HTMLとCSSとJavaScriptのまとめです。

  • HTML … 身体の構造そのもの
  • CSS … おめかしして飾ったところ。ジャンルによって「それらしい装い」や「流行り」がある
  • JavaScript(jQuery) … 動作や動き表情の変化

今回は、WEBデザインの中でも直接ユーザーが触れるフロントエンドについて図解してみました。WEBデザインの中でも設計の考え方が強いデータベースやサーバーといったサーバーサイドまで考えていくと、もっと違う例え方になるかもしれません。

むちゃくちゃ個人の主観による図解になってしまいましたが、WEBデザインを勉強しようと思っている人の理解を深めるきっかけになったら嬉しいなと思います。


関連記事

ブログ

2016年10月19日

[食レポ]タイ北部・チェンマイのグルメの話。

ブログ

2016年5月5日

要素の高さをそろえるJQuery「jquery.tile.js」で記事一覧やギャラリーを見やすくする

ブログ

2017年4月21日

[WordPress]記事の更新日を表す関数the_modified_date()を使って古い記事に警告を出す

Copyright© goo-yan.com All Rights Reserved.