Skypeto: Skype chat to n-yoshi n-yoshi
Twitter: Follow laresjp on Twitter laresjp
feed: RSS 2.0 RSS or Atom Atom

HTML談義

| go BLOG Top |

2002-03-13(水) 23:45(UTC +0900) p

巡回先の「■パルマガ■」さんで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)ですが、当然各々の要素を括るためのタグにしても論理的な言葉の略号が使用されております。一例を挙げますと、

HTML元の言葉意味とか
pParagraph段落
divDIVision区切、段落よりも大きい
brBReak折り目、強制改行
aAnchorアンカー、錨、リンクの両端
emEMphasis強調
CSS元の言葉意味とか
pxPiXel画素
emEleMent要素、文字とか

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

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

今日のスタパ

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

関連するかも知れない?


, Permalink, 関連つぶやき
cat: Tips(ティップス), 更新情報, 電脳系
tag: , ,
0 Trackback

トラックバック

この記事のトラックバック URL


Twitter

Powered by Topsy

オススメ(殿堂)

ThinkPad Bluetooth ワイヤレス・トラックポイント・キーボード
ThinkPad Bluetooth ワイヤレス・トラックポイント・キーボード
ThinkPad
トラックポイント付きの無線キーボード

オススメ(amazon)

Twitter

オススメ(ニコ動)

オススメ(link)


検索

このblogをググる



タグクラウド


最近のエントリ

カレンダー

2020年6月
 123456
78910111213
14151617181920
21222324252627
282930  

分類別

保管庫


購読

marker

Firefox meter

CC LICENSE


since 2001-09-25

Powered by WordPress