ホームページ作成 Note

ホームページ作成ノート

Webデザインに重要なレイアウト機能

マークアップ言語HTMLのもとになったのは、SGML(Standard Generalized Markup Language)といわれています。 以下、「ウィキペディアSGML」 からの引用抜粋です。

そもそもコンピュータやインターネットは軍事技術を目的として開発されたのが起源であり、SGMLも例外ではなかった。 軍艦や軍用機などのマニュアルは膨大な量にのぼり、改良が加えられた時などにもマニュアルを新しく書き直す作業、いわゆるメンテナンスなどが大変であった。 このことから、マニュアルを電子化して、大量の紙を削減して、かつメンテナンスの容易を計る事を目的としたが、軍艦や軍用機などは数十年 という長期間の保有が必要になるため、長期間にわたりデータが利用可能とならなければならない。 電子文書は特定の企業のワープロソフトを用いるとそのソフトのバージョンが上がったり、最悪の場合そのソフトを 開発している会社が開発を中止したり、倒産したりしてソフトウェアが無くなってしまった場合は今まで作成したデータが読めなくなってしまう という問題が発生してしまう。そこで、テキストのみを用いて、タグを使う事によってデータに意味を持たせる事が考えられた。 このようにして規格化されたのがSGMLであった。

要約すると、 SGMLは長期的に使用可能な「ワープロソフト」でもよかったけれど、長期使用が保証できないのでマークアップしたテキストデータにした ということです。

このようにSGMLから派生したHTMLの背景には、文章を主体にした文書を扱っていて、現在のWebページのように複雑なレイアウトなどは想定されていないと推察します。

Web標準のCSSによるレイアウトは、div 要素でボックス化し、position、floatプロパティの特性をうまく使い分けて、ブラウザによる解釈を考慮しながら 「積み木を積み重ねる」感覚で試行錯誤的にレイアウトしなければなりません。経験を必要とし生産性、普及性の面で一般的とはいえません。

ワープロ感覚でCSSによるレイアウトができるオーサリングツール(WYSIWYGツール)があればいいのですが今のところ見あたりません。

究極のレイアウトテクニック

工業や産業界に従事されている方ならば誰でもご存知だと思いますが、「物を造る」場合、図面を描いてその設計図をもとに造られます。 その図面を描く場合、スケッチや検討図も含め「方眼紙」が使われると思います。

コンピュータを利用した設計の CAD(キャド、Computer Aided Design)も、同様にグリッドを自由に発生させてレイアウトやデザインをしています。 この「グリッドシステム」は、グラフィックデザインにおける伝統的なレイアウトテクニックです。

HTMLによるWebページデザインには、「グリッド」というものはありませんが、それに近い「テーブル」を利用したレイアウトは、 自然な形のレイアウトテクニックかもしれません。アクセシビリティに影響しない、table要素に代わるレイアウト用の「グリッド」機能があってもいい。

グリッドレイアウトがWebにも登場

最近(2007/9/12)、W3Cの「CSS Working Group」によって、
CSS Grid Positioning Module Level 3」 の Working Draft (草案)が公開されました。


ここには、「 実際のプロパティ( grid-columns、grid-rows )とレイアウト例 」が記述されています。 シンプルなCSSでグリッドレイアウトができるようです。ブラウザ側が迅速に対応してくれれば、「数年後には、グリッドレイアウトがWebにも登場する?」かもしれません。


Webオーサリングツール

専門家以外の一般作成者は「HTML/CSS」とか、「Web標準」など知らなくてもワープロのような Webオーサリングツール(WYSIWYGツール)で手軽に作成できればいいことです。アプリケーションソフトを扱うのと同じで、 長期的に使用でき信頼できるものであれば、本来ソースの中身は何でもいいのです。今さらぼやいても始りませんが、Web初心者の嘆きです。

現在のWebページは、「HTMLとCSSで作成されたテキストデータ」ですから、オーサリングツールはこれを出力してくれます。 オーサリングツールには、市販されているもの、無償(フリー)のものなど数多くありますが、次のような問題があります。


  • HTMLが文法通りに出力されない。
  • 独自タグやコメントなどが挿入される。
  • マージンの調節に、1ピクセルの透過GIFファイル使用
  • 非推奨テーブルレイアウトが容易 (使い方は利用者次第)
  • CSSによるレイアウトが未対応、または不十分。

主にレイアウトに関して、いくつか試したオーサリングツールの結果です。

【オーサリングツール試用結果】
オーサリングツール 結 果
ホームページ・ビルダー16 タグの書換えなし、CSS レイアウト未対応 (v.13まで)Ver.14 からCSS レイアウトが強化される。
(ページ編集崩れる)
Homepage Manager タグの書換え(省略、追加)有り、CSS レイアウト未対応(ページ編集崩れる)
alphaEDIT タグの書換え(省略、追加)有り、CSS レイアウト未対応(ページ編集崩れる)
Nvu
KompoZer(Nvuのバグ修正版)
タグの書換えはないが、ソースの途中で改行される。CSS レイアウト不十分、ページ編集は可能
(ページ編集崩れはない)

上記のソフトは、解説サイトが多数あります。
Nvu(エヌビュー)、KompoZerは、 英文ですが日本語パックがあります。

【解説サイト】

「テーブルレイアウトからグリッドレイアウトへ」-- Webオーサリングツール

CSS によるグリッドレイアウト」が W3C から勧告されるようになれば、現在のWebオーサリングツールは、 グリッドレイアウトを主体にサポートするようになり、「Web標準」が一層浸透してアクセシビリティ向上などが期待できます。

Top↑