HTMLとCSSとJavaScriptの関係の正体
3つはそれぞれ個体で存在しているのか!?
よくHTMLの上にCSSが立ち、その上にJavaScriptが成り立つという考えがあります。
一応自分もその案に賛同しているわけですが、なかには「3つが個体で成立している」という考えもあるようですし一理言える節もあります。
しかし基本的にそれはJavaScriptやCSSが序の口だから使用することができるのです。その例を挙げましょう
Sample1
alert("HTMLなんて使わない");
おなじみJavaScript第一歩のalert関数です。確かにこれを見てどこにHTMLがあるの!?
という結果に終わります。では次の例を見てみましょう。
Sample2
document.write("ようこそflandlescarletの記事へ,今日は様々なJavaScriptの考えについて記述していこうと思います。");
上記の場合もJavaScriptだけです。しかしこのあたりからHTMLの土台が要されてきます。
上記のソースでは基本的に文が長くなります。ではどうするべきか!?
Sample3
document.write("ようこそflandlescarletの記事へ<br>今日は様々なJavaScriptの考えについて<br>記述していこうと思います。");
<br>タグをつけるという考えになります。これは完全なHTMLです。
JavaScriptやCSSにHTMLを個体として考えてみてください。
確かに我々は、HTMLを通してJavaScriptを学んでいるはずです。だからすぐに<br>という概念に結びつきますが
JavaScriptを即座に初めた人には<br>どころかタグという概念すらもないんですね。
これはCSSも同様です。
Sample4
h1{
background: #000;
color: #FFF;
}
これはHTMLの要素にあたいする部分です。CSSだけを直に始めたとしても
HTMLをやらざるをえないのです。
もしCSSだけを始めようという意気込みで、必要な部分をリファレンスから探す方針で行くと
CSSの場合必要な要素が出るたびに頭を抱えることになります(HTMLタグを完全にマスターしていないため搜索に時間がかかる)
Sample5
<font color="red">
HTMLだけをやっている人に見受けられる書き方です。
HTMLは本来、文書定義を行うだけでデザインいわゆる見た目に関することを定義させるものではないです。
しかしCSSをやるまでそんな事知らなかったという人もいるでしょう。
つまりHTMLの文書定義の上にCSSが成り立っているのです。
これを考えればHTMLとCSSはセットに覚えていくのがベストという考え方もあるでしょう。
Sample6
document.getElementById("hoge").style.display = "none";
ではCSSとJavaScriptの関係も見てみましょう。
JavaScriptとCSSが全く別物という考えはありません。
DOMの考えですが、CSSはstyleの直下にて編集できます。
これを使うことにより(自分ならsetTimeoutでフェード効果をよく作る)静止的なCSSを動的なCSSに変える事ができるのです。
これがJavaScriptのCSSの上に立った高度な編集とも言えるだろうと思います。
さらにCSSでも汎用的な要素でのドック作成(自分のブログの場合spanで下のドック土台を作ってます)
つまりHTMLとCSSの土台がなければ作れないわけです。
結果
それぞれ単体の場合
- HTML単体では記述できる内容に制限がかかる。
- CSS単体では何もできない。
- JavaScript単体では文書外の動的操作しか出来ない。
二つだけある場合
- HTMLとCSSでデザイン性ある見た目になるが静止的。
- HTMLとJavaScriptで文書におけるダイナミック表現はできるがデザイン性に欠ける。
- CSSとJavaScriptがあっても編集内容はJavaScriptの時と同じ。
3つ揃ってDHTML化した時
- HTMLとCSSとJavaScriptでようやく完成度高まるサイトが完成する。
また話は変わるが、ここにデータ受信にゲーム関連にアプリ
それぞれを加えて、PerlやPHPにJava,Flashなどが加わってくる。