晴交雨獨 No.20 | prev | next |

気楽に書くHTML

スタイル・シートとHTMLの組み合わせ

MOSAICが開発された時、表示されていたのは英文でありましたし、その中でいかに比較的楽にまた読みやすい表示が出きるように心がけたと思います。

見出しがあって本文があって引用があって、という形をそこそこ区別がついて読みやすく表示する-ように設定されました。ただし英文に関して。MOSAICにはそれでもユーザーの側でスタイルを設定できるようになっていましたが、Netscape Navigaterでは固定されています。もろちん文頭や固有名詞で大文字を使う以外は、概ね小文字で構成される欧英文(ローマン・キャラクターというべきなのですが、これをローマ字といってしまうと意味が変わってしまうので)での読みやすさが考慮されています。これに対して日本文字はアルファベット二文字分の幅で全て大文字の大きさです。行間は詰まった感じになり、読みにくいものになります。また大見出しと本文の関係も英文字での相対関係で設計されているため漢字を使った場合なんともバランスが悪く思えます。

スタイル・シートというと今でも拒否反応を示す人もいます。確かに幾分と面倒くさいし覚えるのに手間がかかるという面もあります。また馴染みがないということも影響しているのもかもしれません。ただもともとはワード・プロセッサーなどに用意されていたものです。

「あなたの使ったことの無いワード・プロセッサー・ソフトで今日中に報告書をを作成する場合どうする?」ということで話したことがあります。取り合えずヘルプを見ながら作成する、何とか慣れたソフトを捜してくる、原稿だけ書いて慣れた人に打ち込んでもらう、など。でも一番早いのは以前書かれた報告書をコピー(もちろんデジタル(^^;)して、全体のレイアウトを生かしてその中に書きこむだと思いませんか?デザインの開発をするならいざ知らず、業務の報告書で独創的な書式を望まれていることはなかなかありません。雛形に近いのですが、あれは作った時点とそれなりに報告書とはいえ洗練されて来るため変化してきます。スタイル・シートはこれをもう少し柔軟しています。個別の項目の位置決めや文字サイズなどを決められているので便利です。

例えば毎週発行する「お知らせ」という文書を作る際に表題や期日、本文、署名などの体裁を設定しておけば後は項目ごとに内容を流し込むだけという便利なものです。(それぞれの文字の大きさや位置を一つ一つ設定しながら作業する手間を考えれば随分と楽であることがわかると思います。)

ある意味でNetscape Navigater は英文で読まれることを考慮したスタイル・シートが搭載されていると考えてよいと思います。逆にいえば日本語では最初からかなり読みにくく、体裁もあまり良くないように思います。もし日本語でのそこそこの読みやすさを考慮したスタイルシートが用意されていれば随分楽だったでしょう。しかし残念なから実装されていたスタイル・シート用の機能が半端であったことと拒否反応があったことで、fontタグを多用するという面倒なやり方が蔓延してしまいました。

単に日記程度のものを書くのならスタイルシートとHTMLの組合わせで随分と楽にできると思います。

要素とタグでクタクタ

タグという言葉で何を思い浮かべます?僕は値札です。プラスティックの細いピンで商品に付いていますね。「¥1980」といってものです。服であればメーカー名が書かれているタグ、洗濯表示のタグ-綿100%など、そしてクリーニングに出すとこのタグにもう一つ「C-238 スズキ」などという別なタグをつけます。タグというのはこう付け札、張り紙、プライス・カードなどを引っ付けることなんですね。

ではちょっとこのタグを<>で置き換えてみます。「<ウール 100%>青いセーター」。クリーニングに出すと「<C-245 スズキ><ウール 100%>青いセーター」。タグには確かに意味はあるのですが、主体はやはり中身―この場合なら「青いセーター」です。

HTMLはページの内容に項目の札(タグ)をつけて構成を良く見えるようするものです。

ページの中には色々な「題名」「大見出し」「中見だし」「文章」「引用」「表」などなど。この項目札をつけていきます。

この項目の札(タグ)をパーサー(とりあえずブラウザーを思い浮かべてください)が解釈して表示してくれます。その結果それぞれ札が見えなくても項目の違いが何となく分かるように(少なくとも英文では)表示されます。

また用語もなんともゴチャゴチャしていて、もしかすると書き手の把握が甘いのではと思うこともあります。element(要素)は大して難しい言葉ではありません。一つのHTMLで印付けされたページには色々な部分が入っています。題名、大見出し、中見出し、小見出し、文、絵、表 などなど。こう言ったものが組み合わさって一つのページを作っています。そんなことは当たり前で説明されるまでもありませんよね。極普通に本やノートなどで見かけるものですから。そして要素というのはこの大見出しや中見出し、文、絵といったものそれぞれを差しています。

HTML本の中で簡単簡単といいつつやけに細かい部分の調整に熱心になりなんともごちゃごちゃと表記され、挙句に早々簡単なものではありませんと、落ちがつく場合があります。

ではもう少しこの辺りをモデルを使って説明します。(あくまでモデルですから様様なケースには当てはまりません。)HTMLで作られるページを一つの箱とします。この中に中身を入れて行きます。題名や見出し、文といったものを入れて行きます。ただ題名や見出し、文をそのまま入れたのでは-混じってしまいます。そこでラベルのついた箱に入れて収めます。「楽に書くHTML」という題名にするなら上蓋<題名>と底蓋</題名>をつけて
<題名>楽に書くHTML</題名>として収めます。次に大見出しも入れます。
<大見出し>簡単に書けますか?</大見出し>
となりますね。分かりますか?これで「大見出し」の部分(要素)は収められました。<大見出し>楽に書くHTML</大見出し>が一つの要素です。大見出しにするためにラベルのついた蓋をつけました。このとき<大見出し>というラベルを要素名といいます。次は中見出しです。また上蓋<中見出し>と底蓋</中見出し>をつけて
<中見出し>構成を把握する</中見出し>となります。これまでのところは
<題名>楽に書くHTML</題名><大見出し>簡単に書けますか?</大見出し><中見出し>構成を把握する</中見出し>

規則は厳しいの?

実のところHTMLの規則はかなり緩くなっています。例えば大見出しと中見出しの「中身」に付いては決められていません。見出しの大小順位に付いては印付けする側の都合で決められますから。反面印しつけする際のキマリはあります。これについては難しいといわれることがあります。例えば
<ul>
<li><a accesskey="C" href="machigai.html">こちらは間違い</li></a>
<li><a accesskey="C" href="tadasii.html">これが正しい</a></li>
</ul>
分かりますか?</li></a>この順番が間違っています。そんなことどっちでも同じじゃないか?と思われますか。ではこれだとどうですか?
<表>
<項目><接続 href="machigai.html>こちらは間違い</項目></接続>
<項目><接続 href="tadasii.html>これが正しい</接続></項目>
</表>
一つの「項目」という小箱の中に「接続」があるですから収まりが悪くありませんか?如何ですか?もっともこれは性格によりますので別に気にならないという人もあるかもしれませんけど(^^;

仕様書

以前はまるで罵倒の枕詞代わりに「仕様書を読め!」などという形で使われたためすっかり強面(^^;の印象があります。日本で作られるこの手の文書がなぜか一部の人間だけで共有できるように作られ、普通に読むと罠にかかり、専門化を促しなんなら利権でも発生すれば願ったり叶ったりというような印象があるため敬遠されるのでしょう。しかしながら、仕様書の内容は実際的です。例を挙げて説明されていますし、普及に努めるという任務には忠実だと思います。

この僕のサイトでは表組み(table)を呆れるほど(745個位-今のところ、まだ増えるでしょう(^^;)使っています。しかもほとんどがレイアウトではなく表として。もちろんこれは特殊な例ですが、これだけ使うとデザイン一つ取っても飽きてきます。一方で修正などは煩雑に行うためできるだけデータ部分はシンプルにしておきたい。表示にはバリエーションを、ソースはシンプルに。この望みをかなえるためには表を「列」と「行」でコントロールするのが良いんですね。で、その方法は仕様書の「table」のところにごく分かりやすく書いてあります、いわゆる「HTML本」よりも。

全部を把握しようというよりも最初の歴史や成り立ちと、あとは使う要素から読んで行くという形で読んでいってもよいでしょう、気楽に。

というわけで、次はすこし実戦へ
→気楽に書くHTML 2


| prev | next |
cheer down