HTML談義

巡回先の「■パルマガ■」さんでHTMLについての小講釈が載っとりました。で、私の大好きなオハナシでしたので早速「●パルマガBBS●」から投稿してはみたんですが、投稿してから「コレって今日の『にっき』のネタに使えるんじゃん」ということに気付きまして…
で、どうも巨大すぎたせいか、突っ込みすぎたせいか、ボツになったようですから、コレ幸いとこちらに書き直してみたり(爆)

「HTMLは文書の論理構造を定義する」ものであり、「見た目の制御にはStyleSheetを利用する」、というのは、HTML本来の正しい使い方(考え方)でありますので「ふみひこ」様の仰有ることはもっともな話です。更に突っ込みますとパルマガ本体はそもそもCSSでスタイルを定義しておりますので、冒頭のスタイル定義部について

<style type="text/css"><!--
body,tr,td,th {
font-size:10pt; font-family:'MS UI Gothic';
}
a:link    { text-decoration:none; }
a:visited { text-decoration:none; }
a:active  { text-decoration:none; }
a:hover {
text-decoration:underline; color:#CC0099;
}
.clmn { width: 36em; }
--></style>

という感じでclmn等と云うスタイルを定義し、
<div style=”width:600px;”>
については
<div class=”clmn”>
と云う表記に置き換えてやるのが筋ってモノです。
で、いきなり「600px」が「36em」という表記に換わっているわけですが、コレは「論理構造を持つHTMLを装飾するStyleSheetはやはり論理的な制御であるべき」という(私の)ポリシーに依ります。と、同時に、

• 超高精細ディスプレイで高解像度表示をしている場合(2400×1600,300dpi以上とか(笑))、一行の幅が600pixelでは二十文字足らずしか表示出来ないようなフォント設定になっていて、結局読みづらくなってしまう。
• PDA等の画素数の少ないディスプレイでは一行幅が表示領域を突っ切って、横方向に二、三画面分スクロールしなくては一行を読み切れなくなり、やっぱり読みづらい。

と云う不具合をさけるためでもあります。(まあ、ココまでド派手な不具合にはなかなか遭遇出来るモノでもありませんがね(笑)) そこで、600pixelと云う物理的な画素の数による制御ではなく、36elementと云う論理的な文字数による制御に置き換えているわけです。
なんで600pxが36emになるのかと云いますと、機長様の表示環境ではどうなるのか計り知れませんが、当方環境にては600px指定は36em指定と同じ一行文字数になったからです。ちなみに、この「にっき」にも利用している当サイトのclmnの一行幅は40emとなっとります。

おまけ
さて、やたらと「論理的で在れ」と迫ってくるHTML(+CSS)ですが、当然各々の要素を括るためのタグにしても論理的な言葉の略号が使用されております。一例を挙げますと、

ということに。なお、上記の綴りや意味についてはうろ覚えですので、正確に知りたい向きは自分で調べましょう(まて)

さて、そんなこんなでちょっとした講義になってしまいました。今回まとめてみたことに合わせて、今まで放置していた分のスタイルも見直したりしました。サンプルとしてまとめてある項もありますので興味がある方はご覧下さい。

なんかTV-CMデビューしてるよ。スタパ齋藤師。 (DELLのCMでした。この事実に気がついたとき、独りテレビの前で大爆笑(笑))