『HTMLではデザインを整えることができない?!』

今回は、「物理的表現(文字の大きさ・色など)や文章のレイアウトを整える概念は、HTMLにはない」つまり、HTMLではデザインを整えることができない、というお話です。

HTMLは「文書内の論理構造をマークアップする」言語です。この場合、マークアップとは、各文章・各語句の意味を、あらかじめ用意されている「意味」で種類分けしていくことを意味します。

その大きな特徴は、この言語は文書内の物理的表現(文字の大きさ・色など)や文章のレイアウトを記述するのではなく、主に文書内の各情報の構造を記述するためのものである、ということです。

例えば、次のような記述があるとしましょう。

<H1>ここは章(H1)です。</H1>

<H2>ここは節(H2)です。</H2>

<H3>ここは項(H3)です。</H3>

<H4>ここは中見出し(H4)です。</H4>

<H5>ここは小見出し(H5)です。</H5>

<H6>ここは表題(H6)です。</H6>

NetscapeNavigatorやInternetExplorerなどでは次のように表示されます。

netscapenavigatorでの表示例

※「文字の大きさ」で、意味の違いを表しているわけです。

ところが「Lynx」というブラウザでは、次のように表示されます。

lynxでの表示例

※「字下げ」することで、意味の違いを表しているわけです。

違いは一目瞭然ですね。

NetscapeNavigatorやInternetExplorerなどでは、文字の大きさという物理的な表現の違いによってH1〜H6の意味の違いを表現しています。

一方、Lynxでは字数を下げるという物理的な表現の違いによってH1〜H6の意味の違いを表現しているわけです。

レイアウト的に字下げするため<BLOCKQUOTE></BLOCKQUOTE>を使用しているページが時折見られます。本来は「引用」という意味を種類分けするタグです。しかし、「たまたま」NetscapeNavigatorやInternetExplorerが字数を下げて表示させているにすぎないわけです。

引用という意味から考えると、メールの返信のように「>」をつけて表示するというブラウザがあってもよいわけです。しかし、実際にはありませんが……。

このように、文書内の見えない意味をどのように物理的に表現するかは「ブラウザによって異なる」わけです。しかし、H1で挟まれた文章は”章”であり、H2なら”節”である……という”意味”は決して変わりません。これが、HTMLは「文書内の論理構造をマークアップする」言語、すなわちHTMLではデザインを整えることができない」という理由です。

HTMLには本質的に、物理的な表現・レイアウトを決める概念は存在しないということです。HTMLによりマークアップされたその論理構造を視覚的にどのように表現するかは、見る側にゆだねられているわけです。

しかし実際のWebページ(俗にいうホームページ)には、フォントを大きく見せたり、あるいは色をつけるという物理的表現や、文章を中央にそろえるなどのレイアウトがなされています。それはHTMLのバージョンアップに伴い実現されるようになりました。インターネットの普及およびホームページの普及により、やはり視覚的な効果も無視できなくなってきたことによるのでしょう。

次回は、この視覚的な効果とHTMLのバージョンの関係について述べることにします。

▼参考

『Lynx のページ by patakuti』:
http://www.t3.rim.or.jp/~patakuti/lynx/
『Lynx for DOS 386+ or Win32』:
http://www.fdisk.com/doslynx/lynxport.htm
『Lynx』:
http://lynx.browser.org/

【追記】

ワープロ感覚でホームページを作るソフトがありますが、HTMLとワープロでは、そもそも目的に違いがあります。

ワープロは紙に印刷するためにデザインするのを目的としています。そのため、用紙の大きさや一行文字数・文字の大きさ・フォントなどを細かく指定できるようになっています。

一方、HTMLは、どのようなコンピュータでも同じように文書が読める(見えるではない)ことが目的です。そのため、文書内の論理構造の区別(各語句・文章が何を意味するのか)する方法はあっても、レイアウトについては見る側の環境・設定にゆだねられているわけです。

これはある意味非常に革命的な技術です。今までの固定化された情報媒体(主に紙媒体)では、文字の大きさや字体などを見る側が自由に変更することができませんでした。しかしHTMLで作成されたWebページは、見る側の状況・好みに応じて(ある程度)自由に変更できるようになったのですから。

もっとも、これまでの(固定的な)デザインに携わってきた方々には、頭の痛い状況ではありますが(苦笑)。

●フォントサイズをスタイルシートで固定しないで欲しいなと思う今日この頃……(^^;)


このページのご意見・ご感想は?
1.とっても良かった! 2.部分的に良かった 3.まぁまぁかな 4.説明が足りないぞ! 5.期待はずれ〜 6.その他
※具体的なご意見ご感想などがあれば、下のメッセージ欄へご記入どうぞ!(未記入でも送信可)

#上記送信フォームほか、掲示板チャットでもご意見ご感想お待ちしております。なおいただいた内容は(もちろんプライバシーに配慮したカタチで)日記の話題に取りあげることがあります。あらかじめご了承ください。


サイト目次

おすすめグッズ

/ 映画 / 音楽 / テレビ番組 / プレゼント・ギフト / ホーム&キッチン / エレクトロニクス / おもちゃ&ホビー / ダイエット・健康

おすすめ情報・知識

パソコン / インターネット / メール / ホームページ作成 / CGI / Perl

おすすめネタ

雑学メモ / ときたまメモ / フリートーク

おすすめ特集

「Kissin' Christmas CD化」計画 / 「フォーク並び」推進計画 / 追悼ステファン・グラッペリ 他、いろいろ。

おすすめCGI

CGI更新状況 / 日記 / チャット(P.M.10:30〜かも?) / 掲示板 / 画像投稿掲示板 / お絵かき掲示板 / ご意見・ご感想

おすすめリンク

サイト内検索

[ ↑このページの先頭へ移動するこのコーナーの目次を表示する ]
注)このページ自体が目次ページという場合があります。