サーバ構築ガイド

レンタルガイド

ショップ構築ガイド

目次～ショップ構築

情報漏洩対策

ホームページ作成ソフトが書き出すソースコードについて

最近は、ホームページビルダーや、GoLive などのHTMLエディタを習得すれば、HTML に関する知識がなくとも見栄えのよいホームページが作成できるようになりました。しかし、HTML（論理構造）を理解していないと思わぬ落とし穴が待っています。

WEB制作、HPデザインに携わる仕事に求められる知識です。HTMLエディタを習得しただけでは仕事は出来ません。

論理構造について

文章を論理的に区分けするというのは、どういうことなのでしょうか。例えば、ページをヘッダ<head>、タイトル<tytle>、ボディ<body>に分けます。ボディには、見だし<h*>や段落<ol>、引用<blockquote>などなど、文章にも様々なタイプに分ける事が出来ます。HTMLはこれをタグで分類することで表現するようになっています。

HTML3.2までは、HTMLタグにレイアウト要素を加えるようになっていましたが、HTML4.0から、HTML本来の論理構造を重視し、レイアウト要素と論理構造を明確に分ける仕様となりました。レイアウト要素はCSS（カスケーディングスタイルシート）を使用します。

テーブルを使用したレイアウト・デザイン.

市販されているHTMLエディタは、基本的にテーブルを使用してページデザインを行うインターフェイスがメインになっています。また、グラフィカルに操作できる分、直感的であり、論理構造を意識しないで作成する事が出来ます。

つまり、グラフィックス感覚で操作しているとHTML本来の論理構造を無視したHTMLソースコードになりがちです。

これは、使う人のHTMLに対する認識の違いであって、HTMLエディタに問題があるという話ではありません。HTMLエディターがテーブル編集を基本とする理由に以下が考えられます。

CSSよりブラウザ間のレイアウト互換性が高い（デザイナーの意図を反映し易い）
レイアウトするにはテーブルタグを使用したほうが操作性が高い
製品を売るには誰でも直感的に操作できる方が都合がよい
HTML3.2までの名残りで下位ブラウザを意識した製品である必要性から
CSSは外観を指定するものであって文章を作成するものではない。よって別居より同居している方が直感的に操作するには都合がいい

1 に関しては、2005年の現状ではブラウザの対応状況も進んでおり、2005年の現状では大きなアドバンテージはありません。

補足

誤解のないように付け加えておきますが、ホームページビルダーなどのグラフィカルなHTMLエディタでは、テーブルベースのレイアウトしかできないという事ではありません。ソースコードの直接編集、補助機能、CSSの編集などのアプローチも可能です。

様々なHTMLエディタが存在しますが、Webデザイナー御用達のツールでは個人的に、Dreameweaver が手作業によるHTMLコード編集が最も行い易いと思います。対してAcobe GoLive はグラフィックツールの延長のようなインターフェイスで両者は対称的です。マクロメディアはオーサリングに強く、Adobe はグラフィック系の会社だけあって製品色ともなっている気がします。（会社は合併しましたが現状維持）

ホームページビルダーは、使用した経験がないのでなんともいえませんが、自分の仲間内では初心者向けの扱いやすいHTMLエディタと言われています。

制作側からみたテーブルレイアウトの利点

HTMLエディタを使用した場合、直感的に操作する事が出来ます。よってHTMLに関する知識が無くても作成できます。これは利点でもあり、欠点ともいえます。

HTMLの知識がなくても複雑なレイアウトが行える
1. HTMLエディタを使用した場合、直感的に操作する事が出来ます。よってHTMLに関する知識が無くても作成できます。これは利点でもあり、欠点ともいえます。
HTMLであるため、互換性が得易い
1. テーブルタグは、HTMLが出来た頃からあるタグであるため、異なるブラウザや古いバージョンのブラウザでも共通の結果を得易いメリットがあります。
  （現在のブラウザCSS対応状況ではメリットが薄い）

訪問者からみたテーブルレイアウトの致命的な問題

アクセシビリティの低下
1. 文書構造を持たない、或いは意識されず作成されたHTML（ホームページ）は、アクセシビリティが低下します。音声読み上げブラウザなど、視覚障害にある人は読む事が出来ません。情報は平等に提供すべきです。
検索エンジンに拾われ難い
1. 文章構造がなければ、検索エンジンは検索キーワードに対する分析が正しく行われない可能性が高くなります。その結果、訪問者がGoogleなどの検索エンジンで情報を検索する場合、適切なキーワードで訪問する可能性が低くなり情報へたどり着ける可能性も低下します。これは訪問者、Webマスター双方にマイナスとなります。検索エンジンのアルゴリズムの問題でもあるのでSEO直結とは言い切れませんが、SEO的に不利に働く可能性が高いという事です。

論理構造とレイアウト要素が分離したサイトの少ない理由

2005年の現状では、W3C勧告に従うことはアクセシビリティノーマライゼーショントラフィック SEO 様々な観点から CSS の必要、重要性に疑いの余地はありませんが、このような文書論理構造とデザイン・レイアウトを分離したWebサイトは非常に少ないのも現状です。いくつかの考えられる理由を挙げてみました。

作り手のHTMLエディタ依存度が高い（HTML理解不足・論理構造無視）
アクセシビリティに対する意識の低さ
CSSに対する誤った認識
互換性の問題から敬遠（レイアウト、デザイン）

HTMLエディタの直感的な編集に依存するWebデザイナーの多い現状では、なかなか移行出来ないのではないかと思います。

これらの現状やXHTMLの需要に伴い、HTML専門のコーディングを専門に行う仕事も出てきています。今後、Webデザイナーにも求められる技能になる筈です。私がそのように考える理由は、Webデザイナーは見かけのデザインだけでなくアクセシビリティの観点からもトータルにデザインを行うべきだと考えるからです。

この標題のトップへ　２ / ７