HTML < CSS < JavaScript な書き方へ

HTMLを学ぶときCSS併用が求められる理由

はてなの利用によるHTMLの経験者も多数いるかと思われる。

20世紀時代のWeb企画では、CSSやJavaScriptに関する、大きな注目を浴びる機会がなく、すべての処理をHTMLに任せようとした仕様でもあった。

大きなタグ要素としては<marquee>タグや<font>タグなどが含まれるであろう。

HTMLとは本来、文章の形を定義するために用いられるものである。それは同時に読み込み速度の向上化をはかるための物でもあった。

HTMLを始めに用いだした人の中でよくしれかす内容は次の項目だ

• タグの意味を理解せずに用いる
• 無駄なソース記述が多くみられる
• HTML5で廃止されるタグも併用して覚えてしまう

 タグの意味を理解せずに用いる例だが、<h1>が代表的なものとなる。

<h1>は普通ページの見出しとして用いられる。しかし<h1>が大きな文字表示をパフォーマンスとして示すため

単に文字を大きくするタグと勘違いしてしまう傾向がある。

そのため、大きな文字を出したい度に、<h1>タグを使ってしまうのである。

これは大きな間違いである。

無駄なソースを書く例だが、もしあるWeb開発者がHTMLしか知らなかったら!?

Sample1 (HTML)


<table>
 <tr>
  <td bgcolor="#F00">要素1-1</td>
  <td bgcolor="#F00">要素1-2</td>
  <td bgcolor="#F00">要素1-3</td>
  <td bgcolor="#F00">要素1-4</td>
  <td bgcolor="#F00">要素1-5</td>
 </tr>
 <tr>
  <td bgcolor="#F00">要素2-1</td>
  <td bgcolor="#F00">要素2-2</td>
  <td bgcolor="#F00">要素2-3</td>
  <td bgcolor="#F00">要素2-4</td>
  <td bgcolor="#F00">要素2-5</td>
 </tr>
 <tr>
  <td bgcolor="#F00">要素3-1</td>
  <td bgcolor="#F00">要素3-2</td>
  <td bgcolor="#F00">要素3-3</td>
  <td bgcolor="#F00">要素3-4</td>
  <td bgcolor="#F00">要素3-5</td>
 </tr>
</table>

なかなか長くてソース自体がカッコ悪い文体となってしまっている例である。

なぜカッコ悪いのか!?それは無駄に同じコードを記述する点である。

本来なら、背景色を変えるならばCSSで定義する。むしろHTMLで文書定義以外の事をやるのは、邪道であるからだ。

改善してみよう

Sample2 (HTML&CSS)


<style type="text/css">

td{
     background-color: #F00;
}

</style>

 <table>
 <tr>
  <td>要素1-1</td>
  <td>要素1-2</td>
  <td>要素1-3</td>
  <td>要素1-4</td>
  <td>要素1-5</td>
 </tr>
 <tr>
  <td>要素2-1</td>
  <td>要素2-2</td>
  <td>要素2-3</td>
  <td>要素2-4</td>
  <td>要素2-5</td>
 </tr>
 <tr>
  <td>要素3-1</td>
  <td>要素3-2</td>
  <td>要素3-3</td>
  <td>要素3-4</td>
  <td>要素3-5</td>
 </tr>
</table>

CSSを一行記入することで、ソースが簡略化して無駄に記述する必要性がなくなるのである。

このCSSの記述方法も一般的とは言えないが、あえて分かりやすいようにこのように表示してみた

実際ならばclass名で各要素にアクセスするのが一般的となる。

しかしまだ長い、もっと簡略化してみよう。

Sample3 (HTML&CSS&JavaScript)

<style type="text/css">
.table_color{
     background-color: #F00;
}
</style>
<script type="text/JavaScript">
document.write('<table border="1">');
for(i=1;i<=3;i++){
        document.write('<tr>');
        for(j=1;j<=5;j++){
                document.write('<td class="table_color">要素'+ j + ' - ' + i +'</td>');
        }
        document.write('<tr>');
}
document.write('</table>');
</script>

JavaScript内にHTMLを記入したものである。

ここでは有名な繰り返し分で、無駄に<td>や<tr>タグを記入するのを防いでいる。

そしてclass名もつけてみた。

Scriptで回さなかった場合これらの計25個のセルにclass名を定義しなければならなかったのである。

このように、動的表現や色を表示する以前にHTMLでは簡略化が難しく、極めて作業がしんどくなるのが分かっていただける例だと思う。

また発展するとJavaScriptにもさらに同じコードを引数で分けて処理する関数など、簡略化を目指せる要素は幾度とある。

After