HTML、CSS、JavaScript、３つの違いを顔に例えてみた

皆さんはHTML、CSS、JavaScript、の違いを説明できますか？

WEB制作をする上で欠かせないこの3つの違いを説明するとき、私は”顔”に例えて説明します。

HTML

HTMLは”顔”の骨格です。目や鼻、口などの部位を決めます。しかし、これだけだと、複数の”顔”を作っても、全ての同じ”顔”になってしまいます。

CSS

そこで”顔”に個性を出すために必要になるのがCSSです。HTMLで決めた部位（目や鼻、口）の大きさや色、形を決めます。もちろん、髪型も自由にできますし、化粧だって可能です。これで、様々な”顔”が出来上がりました。しかし、まだ何かが足りません。何が足りないのでしょうか？そう表情です。

JavaScript

表情豊かな”顔”にするためには、”顔”の動きが必要です。そのためにはJavaScriptが必要です（厳密にはCSSでも少しできる）。コミュニケーションを取っているのに相手の”顔”が無表情だと悲しいですよね。なので、喜怒哀楽、その”顔”が持つ素敵な表情を創り出して、より魅力的な”顔”に生まれ変わらせます。

まとめ

今回は、HTML、CSS、JavaScript、この3つの違いを”顔”に例えて説明しました。これらをWEB制作に置き換えると、HTMLはWEBサイトの骨格を形成し、CSSでWEBサイトの装飾を行い、JavaScriptでWEBサイトにインタラクティブな動きを加えます。

この記事を通して、皆さんの理解の手助けになれば幸いです。