ということで今週は勉強会週間ということで、前々からネタとして上がっていた「HTMLと私」を話すことになった。さすがにそれはきついので、とりあえず普通のHTML勉強会を開いた。
さて、HTML勉強会では何から教えるべきなのだろうか。すみけんさんの本みたいに「ももたろう」のマークアップをしながら必要な要素について解説していくのがよいだろうか。それともHTMLの要素群を<html>から順番に解説していくのがよいだろうか。そもそも教えるべきはHTML3.2なのかHTML4.01なのかXHTML1.0なのかXHTML1.1なのか、はたまたISO-HTMLなのか。HTML4.01やXHTML1.0だとしたらTransitionalな要素や属性に触れるべきか――
みんなに何が知りたいか訊いて、あと後輩が書いたHTMLを見て思ったこともあったので、とりあえず文法から話すことにした。件のHTMLはliがbody直下に出ていたり、h3がdl直下にあったりして、とりあえずここら辺を重点的に話した方が良いだろうと思った。HTMLの基本的なところはみんな1年生の講義で習っているはずだしね。この世にはブロック要素とインライン要素がありましてね、という話をしたら、まずブロック要素とかインライン要素とは何だということになった。XTHML1.0 StrictのDTDファイルをプロジェクタに大写ししながら説明を始めた。文字ばかりのDTDファイルが出てきた時点でｄｎｂｋか? サーセン
テキトーに解説すると、ブロック要素は段落。矩形。インライン要素はその一部。下線。で、ブロック要素には、(1)ブロック要素しか子供にしないのと(2)インライン要素しか子供にしないのと、(3)特別な要素しか子供にしないのと、(4)ほとんど全ての要素を子供にできるものがあって、(1)はbodyやnoscriptやblockquoteで、(2)はh1とかpとかaddressで、(3)はulとかtableとかで、(4)はliやdd (どちらも%block;には含まれていないのでブロック要素として教えるのは不適当か?) やdivがあると。ここに挙げたのは「引用段落」だとか「大見出し」だとか「テーブル」だとかみたいな文章を構成する大きな枠組みで、これがブロック要素。インライン要素というのは、強調語句をあらわすemや上付き文字をあらわすsup、プログラムコードの断片をあらわすcodeなどのように、段落の中の一部分を指定するもの。……ってこんな説明で良いのだろうか。確かに、人に教えることは自分の無知を確認することだと思った。
ついで質問があったのが、divとかspanとかって何だという話。divは汎用ブロック要素でspanは汎用インライン要素。たとえば、この部分は日付なんだーというのをマークアップしたいときに、date要素なんてものはないので、span要素を使う。で、class属性に"date"とでも書いておく。こうすれば、「ここは日付なんだな」というのが分かる。ただし、パーサから見れば、spanはspanでしかない。パーサはvarが変数でdfnが定義語でsampが表示結果であるというHTMLで定義されている語彙は理解するが、spanやdivにどんなclassやidが指定されていても、パーサは意味を理解しない。ここら辺に約束を定めてそれに従うパーサ間で意味を共有しようというのが、今流行のMicroformatsですな。XHTMLみたいなXML言語だと話がもう1段上がって、XML的にはpだろうがqだろうがパーサはその意味を感知しないけど、XHTMLの名前空間下においては、pは段落でqは引用語句だという意味を持つ。だからこそ、「引用語句とその引用元を抜き出して一覧にしよう」だとか、「見出しを抜き出して目次を自動生成しよう」だとか「定義語を抜き出して索引を作ろう」だとかを自動にできることになっている。
いったい私は何をしゃべっているんだと思いつつ今度はCSS編。HTMLだと論理的な面からブロックだのインラインだの言ってたけど、CSSの場合はまさにレイアウト的な面からの話になる。ブロック要素は前後に改行が入って、一まとまりごとにpaddingやmarginが計算される。インラインの場合は……なんて、displayの値をいじったときにborderがどう表示されるか観察すれば分かる話か。あとFirebugのinspectモードが大活躍。
あとは、よく使うプロパティの説明をした。text-alignプロパティは段落内の文書をどちらに寄せるかを指定するので、display:inlineな要素には指定できない。逆にvertical-alignプロパティは、段落内にある高さがさまざまなインライン部品をどこ基準で揃えるかを指定するのでdisplay:inlineな要素に指定する。あとはline-heightプロパティの値に単位を指定するのと指定しないのとでどう表示が違うかとか。
みんなの関心が高いのは段組だったので、次に段組の定石について。floatを使うのとpositionを使うのと、あとinline-blockを使う手があるが最後のは現状Opera専用なので無視。floatを使う場合は、floatさせるブロックにwidthを指定する必要がある点に注意。ただ、メジャーなブラウザはwidthなしfloatを実にうまい感じにレイアウトしてくれるのが何とも。右カラムに画像があったりして右カラムの幅を一定値にしたいとなったら、HTML上先に右カラムを書いて、その右カラムにwidthをつけてfloat、左カラムは右width分プラスアルファのmarginを着けるのがセオリー。左カラムをHTML上先に書きたい場合は? どっかで妥協するしかない。
positionを使うのがその妥協のひとつ。position:absoluteなブロックにleft値とright値を指定すれば、可変長浮きブロックのできあがり。左カラムのrightが10%なら右カラムの左マージンを90%にすればいいし、左カラムのrightが10emなら右カラムはwidthを10emにしてfloat:rightさせればOK。ただ、私としてはあんまりpositionを使いたくないけど別にこだわりません。うまく使えばレイアウト崩壊も防げましょう。私があまり使いたくないのは、Googleキャッシュとかで見られると上方向にレイアウトが崩れるからだけど、そんなに重視すべき理由ではない。
で、結局何を話せばよかったのだろうか。なんか、教材代わりに使える良質丁寧なHTML/CSSサイトがあると良いな。ただのリファレンスじゃなくて体系立てて1から読めるようなやつ。探すか。