怪しい機能には要注意
その4：スタイリッシュエフェクト
バージョン9で最も売りにしている新機能が、これから話をする「スタイリッシュエフェクト」です。
実は、スタイリッシュエフェクト以外にも、いくつかの機能で、該当する部分のスタイルをウィザードから簡単に設定しています。
スタイリッシュエフェクトの特徴
ウィザードで、配色（テーマ）とレイアウトの組み合わせを選択することで、作成したページを、より洗練された、スタイリッシュなページに変換することができる機能です。
ページに統一感を持たせるのも簡単になります。これは、CSSを使っているおかげです。
特徴だけ聞いていれば、なぜ怪しい機能扱いをされなければいけないのかという疑問がわいてきます。
何となく、こぎれいな感じがしますね。となると、ビジュアルデザインが苦手だと頼りたくなります。その気持ちは私自身もよく理解できます。
テーブルレイアウトの問題
HTMLというのはリニアなモノです。HTMLソースの上からかかれている内容を解釈します。このことは、音声読み上げ環境や、携帯フルブラウザといった環境でページを閲覧すると非常によくわかります。
テーブルの場合は、各行の左から解釈します。従って、右側に本当に伝えたい内容があった場合に、そこへ到達するのに時間や手間がかかります。
テーブルレイアウトできれいなレイアウトを行うために、無駄な透明GIF画像を使わなければいけないというのも問題になります。
本来、データを表示するためのtable要素をレイアウトのために使うというところも根本的な問題になります。
スタイリッシュエフェクトでは発生しませんが、一般的なページでテーブルレイアウトを行った場合、レイアウトの変更が困難です。
HTMLソースがやばい
実は、スタイリッシュエフェクトを使ったページは、HTML4.01のどの文書型にも妥当性がないものになってしまうのです。
先ほどのページを、W3CのHTML Validation（英語）でチェックすると、
This page is not Valid HTML 4.01 Transitional!
というメッセージがでて、HTML 4.01 Transitional としては妥当でないと怒られます。文法的にかなり緩いTransitonal DTDにすら適合していないのですから、Strict DTDには当然適合していませんよ。
では、何故に妥当でないと怒られるのか？HTML4.01の仕様書（日本語訳）を見てみると、以下のように書いてあります。
IDトークンとNAMEトークンは、アルファベット([A-Za-z])で開始し、任意の数のアルファベット、数字、([0-9])、ハイフン(-)、アンダースコア(_)、コロン、(:)、ピリオド(.)のみで記述する必要がある。
スタイリッシュエフェクトを適用したページで、所々に使われているid属性の値の先頭にはアンダースコアが使われています。だからダメなのです。
リンクメニュー作成機能や、表作成時にスタイルを適用した場合も同じ問題が起きます。
V10で追加された「かんたんページ作成」でも同様の問題が起きます。→かんたんページで作成したページ
V12で追加された「ホームページ・ビルダー・クイック」でも同様の問題が起きます。→ホームページ・ビルダー・クイックで作成したページ
当サイトでは、よりよいHTMLの書き方をマスターすることも重要な点としてとらえています。従って、HTMLとしての妥当性を欠くような機能はどんなに便利なものであったとしてもおすすめすることはしません。
XHTMLとの相性
XML宣言がある場合の、Internet Explorerの表示モードが、ver.6とver.7で異なります。ver.6では互換モードだったのですが、ver.7では標準モードになります。
テーブルをalign属性で中央や右に寄せたときに、セルの部分の表示が変わります。ver.6では、セルの内容は左に寄っていますが、ver.7ではtable要素で指定したalign属性と同じ方向になります。
これにより、コンテンツ部分の内容が中央部分によってしまいます（レイアウト：パターン6、スタイル：さわやか1で確認）。V10以降で作成したスタイリッシュエフェクトではこの現象がでます。
Internet Explorer6の場合
Internet Explorer7の場合
Internet Explorer7が自動更新で入るようになると、これは致命的といっても良いかと思います。
アクセシビリティ支援 (拡大表示) ボタン
V11で追加された機能で、スタイリッシュエフェクトを適用しているページに対してのみ使うことが可能です。文字を大きくするためのボタンで、JavaScriptを使って実現しています。
適用しているページを見る（ホームページ・ビルダーのデフォルトにあわせるため、HTML4.01 Transitonal DTD システム識別子なしで互換モードでの表示にしています。）
私の個人的な感想ですが、このようなボタンを入れる前に、スタイリッシュエフェクトでのCSSの文字サイズ設定を見直せと言いたいです。80%は小さすぎます。それに、このようなボタンがあったところで、訪問者が使ってくれる可能性はかなり低いでしょう。
V9でのバグ
以下のようなバグが報告されています。
- 文字化け
- BASE要素の挿入
再現条件がはっきりしていないのが辛いところですが、いずれも危険なものです。
文字化けは文字コードをUTF-8に変換しようとすることに起因するようです。
BASE要素とは、そのHTML文書中で指定されている相対URLの基準となる絶対URLを指定するための要素です。この要素が勝手に指定されることで、相対URLの基準が変わってしまい、画像やリンクがうまく動作しない原因になります。
なお、BASE要素による指定がなければ、相対URLの基準が現在の文書となります。
