flandlescarlet's diary【情報工学生の備忘録】

元機械工学科所属だった情報工学生です。JavaScriptで適当に何かを作ったり、絵を描いていたりします。

HTMLとCSSとJavaScriptの関係の正体

3つはそれぞれ個体で存在しているのか!?

よくHTMLの上にCSSが立ち、その上にJavaScriptが成り立つという考えがあります。

一応自分もその案に賛同しているわけですが、なかには「3つが個体で成立している」という考えもあるようですし一理言える節もあります。

しかし基本的にそれはJavaScriptCSSが序の口だから使用することができるのです。その例を挙げましょう

 Sample1

 alert("HTMLなんて使わない");

おなじみJavaScript第一歩のalert関数です。確かにこれを見てどこにHTMLがあるの!?

という結果に終わります。では次の例を見てみましょう。

 

 Sample2

 document.write("ようこそflandlescarletの記事へ,今日は様々なJavaScriptの考えについて記述していこうと思います。");

上記の場合もJavaScriptだけです。しかしこのあたりからHTMLの土台が要されてきます。

上記のソースでは基本的に文が長くなります。ではどうするべきか!?

 Sample3

 document.write("ようこそflandlescarletの記事へ<br>今日は様々なJavaScriptの考えについて<br>記述していこうと思います。");

<br>タグをつけるという考えになります。これは完全なHTMLです。

JavaScriptCSSにHTMLを個体として考えてみてください。

確かに我々は、HTMLを通してJavaScriptを学んでいるはずです。だからすぐに<br>という概念に結びつきますが

JavaScriptを即座に初めた人には<br>どころかタグという概念すらもないんですね。

これはCSSも同様です。

 

 Sample4

 h1{

background: #000;
color: #FFF;

}

CSSにはセレクタと呼ばれる部分が存在しています。

これはHTMLの要素にあたいする部分です。CSSだけを直に始めたとしても

HTMLをやらざるをえないのです。

もしCSSだけを始めようという意気込みで、必要な部分をリファレンスから探す方針で行くと

CSSの場合必要な要素が出るたびに頭を抱えることになります(HTMLタグを完全にマスターしていないため搜索に時間がかかる)

 

 Sample5

 <font color="red">

HTMLだけをやっている人に見受けられる書き方です。

HTMLは本来、文書定義を行うだけでデザインいわゆる見た目に関することを定義させるものではないです。

 しかしCSSをやるまでそんな事知らなかったという人もいるでしょう。

つまりHTMLの文書定義の上にCSSが成り立っているのです。

これを考えればHTMLとCSSはセットに覚えていくのがベストという考え方もあるでしょう。

 

Sample6

 document.getElementById("hoge").style.display = "none";

ではCSSJavaScriptの関係も見てみましょう。

JavaScriptCSSが全く別物という考えはありません。

DOMの考えですが、CSSはstyleの直下にて編集できます。

これを使うことにより(自分ならsetTimeoutでフェード効果をよく作る)静止的なCSSを動的なCSSに変える事ができるのです。

これがJavaScriptCSSの上に立った高度な編集とも言えるだろうと思います。

さらにCSSでも汎用的な要素でのドック作成(自分のブログの場合spanで下のドック土台を作ってます)

つまりHTMLとCSSの土台がなければ作れないわけです。

 

結果

それぞれ単体の場合

  • HTML単体では記述できる内容に制限がかかる。
  • CSS単体では何もできない。
  • JavaScript単体では文書外の動的操作しか出来ない。

二つだけある場合

  • HTMLとCSSでデザイン性ある見た目になるが静止的。
  • HTMLとJavaScriptで文書におけるダイナミック表現はできるがデザイン性に欠ける。
  • CSSJavaScriptがあっても編集内容はJavaScriptの時と同じ。

3つ揃ってDHTML化した時

  • HTMLとCSSJavaScriptでようやく完成度高まるサイトが完成する。

また話は変わるが、ここにデータ受信にゲーム関連にアプリ

それぞれを加えて、PerlPHPJava,Flashなどが加わってくる。