HTML講習7 - tsuge development page

一つ前

[id:tsugehara:20060627:1151406427]

概要

どうでもいいけど「定義済み属性」と言ってカスタム属性に全く触れていないのも変な話だな、という気がしてきた。講習資料に清書する時（既に始めているが）ちょっとタイトルを変えるかもしれない。
今回は「CSSとJavaScriptの用法を理解する」という、突然文章っぽくなった章だし。構成が下手ということだな。
ちなみに一応記述はするが、今日記述する文書は最終的にカットすることになるかもしれない。

CSSとJavaScriptの用法を理解する

はじめに

本書の目的は、HTMLという軽く見られがちな言語に対して考える必要があるという事を理解し、その際ポイントをあげていくつか解説してHTMLの出発点に立つことを目標としています。
中でも特に重要なのはブロック要素とインライン要素の関係と、CSSとJavaScriptとHTMLの関係です。
これらの基本的な関係についてはこれまでの文書で一通り解説をしてきました。
本項ではもう一歩進み、CSSとJavaScriptを意識したHTMLの作り方というのを簡単にレクチャーします。

CSSの用法

まず、CSS自体は外部のCSSを使いましょう。この際使用するのはLINK要素で、ヘッダ（HEAD要素内）に次のように記述します。

<link rel="stylesheet" type="text/css" href="CSSファイルのパス" />

「CSSファイルのパス」を該当パスに書き換えることで、そのHTMLにCSSを適用出来ます。
終了タグは前述の通り禁止されている要素なので、つけるかどうかは個人で判断してください。
これ以外にもSTYLE要素内にスタイルシートを定義する方法や、style属性にスタイルシートを記述する方法も使えますが、理想は外部スタイルシートを使う事です。
HTMLの文書とスタイルシートを分離することで、別のスタイルシートで同じ文書を表示する、といったことが可能になるためです。

CSSに関連付けやすいHTMLを構築する時に、HTMLで注意するべき事は次の属性を正しく使用する事です。

ID、またはCLASS属性を正しく適用する
align等を使用してHTMLでレイアウトは行わない
HTMLの階層構造を正しく作る

1は、CSSの規定で要素ごとにスタイルを割り振る場合、CLASSやIDでさらに分けることが出来るためです。
例えば次のHTMLがあったとしましょう。

<p class="level1">今日は<span class="markup">暑い</span>ですね</p>
<p class="level2">私の国はもっと<span class="markup">暑い</span>です</p>

この際、CSSでlevel1のクラスはフォントのサイズが140％になり、level2のクラスはフォントのサイズが120%になり、markupというクラスはフォントの色が赤になるとすると、同じPとSPANで構成される段落でも表示結果を変えることが出来ます。
IDとCLASSはどちらを使用しても個別にスタイルを指定することが出来るのですが、IDはHTMLの文書内で一意である必要があるので、単純にスタイルを指定するならclassを指定しておくのが無難でしょう。

2は既に記述済みと言えますが一応補足をすると、HTMLでレイアウトを行わなければスタイルシートで変更できる箇所も多くなるので、その分スタイルシートだけでレイアウトのバランスを整えやすくなります。
HTMLでフォントのサイズを32と決め打ちされていると、スタイルシートを変えて全体的に小さめのフォントでデザインしたページは、その32ポイントの場所だけ浮いてしまいますよね。

3はこれもCSSの規定に関連することで、CSSでは階層構造も認識してレイアウトを整えることも出来ます。
例えば、次のようなHTMLがあったとします。

<div class="code">
 <span class="keyword">If</span> a = 10 <span class="keyword">Then</span>
 <span class="keyword"End</span> <span class="keyword">If</span>
</div>
<p>
 上記の<span class="keyword">ソースコード</span>は、<span class="keyword">Visual Basic</span>でいうところの「変数aが10なら」という<span class="keyword">IF文</span>です。
</p>

この際、上のDIVではソースコードの参照を示し、下のPでは本文の解説をしていますが、内部で使われている「keyword」というクラスは両方に登場します。
上のDIVではソースコード内で定義されている予約語を「keyword」というクラスとして意味付けていて、エディタっぽく文字の太字化を行いたい。下のPでは既に解説した用語を「keyword」というクラスとして意味付けていて、文字の斜体化を行いたいとします。
CSSの具体的な書き方は省略しますが、こういった指定は「codeクラスの下のkeywordクラス」、「P要素の下のkeywordクラス」といった、階層的な識別方法さえあれば出来ます。
よって、HTMLのブロック要素にもインライン要素にもしっかりと意味を持たせて、綺麗に階層化されたHTMLを構築するよう心がけましょう。

CSS自体も色々なことが出来るのですが、より詳しいCSSの使い方は後日調べてみてください。
本書では入門用として簡単に例示したので、まずはこの辺りを気をつけつつ、同じ文書に違うCSSを適用してどう表示されるかといった実践を重ねて、より実用的な知識を身に付けることを期待しています。

JavaScriptの用法

JavaScriptはなるべく外部のJavaScriptを利用しましょう、とは言えないのが現実です。現在のHTMLではJavaScriptとHTMLは分離されておらず、JavaScriptはHTML内に記述しないと非効率な部分が多すぎるためです。
よってJavaScriptの参照場所は、別ファイルに分けてもよし、HTML内に直接書いてもよしとします。本書的にはHTML内に記述する方が覚えやすいと思うので、はじめはHTML内のみに記述することを推奨します。
JavaScriptの使い方は色々とありすぎて解説しきれないのですが、JavaScriptから見て使いやすいHTMLは以下の項目がしっかりと作られたHTMLです。

ちゃんと階層化されているHTML
ID属性が正しく適用されているHTML

階層化はCSSでも解説しましたが、要はHTMLではちゃんと階層化してあげれば意味付けも伝わりやすいので、JavaScriptを使う場合にもこれをやってあげた方がいいということです。
例えばimg要素にidを振って直接動かすのではなく、img要素をdivで囲ってから、そのdivのクラスを「character」にする等が、綺麗なHTMLと言えますね。divで囲えば、画像以外に名前を表示させたい場合でも、画像ファイルを直接編集せずにdiv要素内にテキストを追加するだけで目的を達成出来ます。
※蛇足：私の場合はidを「character」にして、ID要素の配列をまとめてdocument.allでとっちゃうんですけどね。

ID属性は、文書で任意の要素を識別するために使われます。
例えば次のHTMLがあったとしましょう。

<div id="headercontainer" class="container">
 <ul id="headlist">
  <li>メニュー</li>
  <li>サイトマップ</li>
 </ul>
</div>
<div id="maincontainer" class="container">
 <div id="contents">メニューです。</div>
 <div id="backtomenu">戻るためのリンクです。</div>
</div>
<div id="footercontainer" class="container">
 <address id="author">著者１</address>
</div>

この時JavaScriptでフッタを点滅させたいとした場合、footercontainerというIDを基にフッタのコンテナが参照できるので、あとはこのコンテナのスタイルを操作すれば実現出来ます。
IDがない場合、「このレベルにあるdiv要素の三番目の要素が多分フッタだと思う」という推測の基に記述したJavaScriptで、地道にHTMLを捜索するしか出来ません。途中にDIVが一つ追加されたり、最後にDIVが一つ追加されたりしたら、もうそのJavaScriptは動作しなくなってしまいますよね。
IDを指定しておけば、文書内に一意なのですからどう文書が変更されても、フッタの構造が変更されない限り同じJavaScriptで動かせるのです。

この二点を意識しておけばJavaScriptとの連動は大分しやすくなってくるでしょう。
あとは実際に何かテーマを出して、そのテーマに沿ったHTMLを作成→JavaScriptでHTMLを動かす→HTMLを改変→同じJavaScriptで動かす、といった流れで作業を進めてみれば、習得は少し早くなるかもしれません。
JavaScriptは年々機能が上がっているのでHTMLよりは手こずるかもしれませんが、頑張って下さい。

後書き

こんなところか。まあ頑張ってくれ、という感じの記述だ・・。
2時間じゃ限界あるなと思いつつ。