サイト内検索  

ホームページ・ビルダーでStrict

このコーナーのテーマは、「ホームページ・ビルダーでStrictDTDに基づいたWebページを作れるのか?」です。ここでは、バージョン8以降を使用することを前提として話をします。

ホームページ・ビルダーでWeb標準に基づいたページを作成する際の大きなヒントとなります。

作成モードを選ぶ

当然、標準モードです。間違っても、どこでも配置モードは使ってはいけません。ブラウザ共通のレイアウトに変換するのもダメです。

DOCTYPE設定

標準では、HTML4.01 Transitional(システム識別子なし)が設定されています。これを、変更するのは、ツール→オプションのファイルタブで、DOCTYPEを出力するにチェックを入れた上で、内容を変更します。HTML4.01Strictにする場合は、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">になります。システム識別子(URL部分)はあった方が、表示に関するブラウザ間の差は小さくなります。

ページ設定

ツール→オプションの一般タブで、2カ所確認が必要です。

  1. 背景色の規定値
  2. ページ作成モードの選択

1.の背景色については、標準のままです。標準のままにする理由は、body要素でのbgcolor属性を吐き出させないため。Strictなページには、bgcolor属性は使えません。背景色はCSSで指定します。

2.のページ作成モードは、デフォルトが悪名高い「どこでも配置モード」になっているため、これではトンデモページになってしまいます。「標準モード」に変更してやります。

また、各ページの方では、ページのプロパティで、以下の設定を確認します。

  1. ページ情報タブのページタイトル
  2. 背景/テキスト色タブ

1.の部分は、TITLE要素の内容の設定です。入っていなかったり、いい加減な内容だと非常に恥ずかしいです。2.の部分は、全てデフォルトのままです。先ほど背景色設定でbgcolor属性は使えないと説明しましたが、以下の項目は全てスタイルシートで設定します。

使ってはいけないツールボタン類

ホームページビルダーの売りは、ワープロ感覚でHTML文書作成のため、ツールボタンには、文字そろえをしたり、文字の装飾用のボタン  などと言ったボタンが付いています。しかし、以下のボタンはStrictなページでは使えません。Transitonal DTDでも使うのは好ましくありません。

Strict DTDで使ってはいけないツールボタン 一覧表
ボタンの図 役割 挿入される要素・属性 補足事項
左揃えを指定するためのボタン 左揃え align属性 align="left" 表のセルに関する指定は除く
中央揃えを指定するためのボタン 中央揃え align属性 align="center" 表のセルに関する指定は除く
右揃えを指定するためのボタン 右揃え align属性 align="right" 表のセルに関する指定は除く
下線や打ち消し線を設定するためのボタン 下線/固定幅/打消し線/上付き/下付き 順に、u要素、tt要素、s要素、sup要素、sub要素 tt,sup,sub要素はStcritDTDでの使用可能
フォントを大きくするボタン 文字サイズ拡大 font要素 なし
フォントを小さくするボタン 文字サイズ縮小 font要素 なし
フォントを手で変更するボタン フォントの変更 font要素 なし

また、インデントするためのボタンは、blockquote要素を吐き出しますので、単に文章をインデントするために使うのはダメです。インデントが必要な場合は、CSSのtext-indentプロパティで指定します。

以下のボタンはStrict DTDでも定義されていますが、明らかに物理的な意味合いしか持たない要素ですので使わない方がいいと思います。

物理要素を吐き出すツールボタン 一覧表
ボタンの図 役割 挿入される属性
太字でBと書いてあるボタン 太字にする B要素
斜体でIと書いてあるボタン 斜体にする I要素

カラーパレットは、font要素を挿入してしまったり、他の要素でも色指定に関する属性を挿入してしまいます。色選びの参考には使ってもいいですが、適用ボタンを押してはダメです。

使ってはいけない書式メニュー

書式メニューでは様々な書式を指定することができるのですが、StrictDTDにする場合、使ってはいけないモノがたくさんあります。

文字飾りの「太字」「斜体」は物理要素ですので好ましくありませんし、インデントは文字通りの意味に使ってはいけません。

要素の属性で指定してはいけない箇所

右クリックや右上の要素名が書かれたボタンをクリックすると、各要素に関する様々な属性を指定することが出来ますが、以下の部分に関しては指定しないようにしましょう。

ターゲットブラウザの対応が不十分などといった理由で、表の中央揃え、IMG属性のborder属性、リストの番号を指定したい場合は、Strcit DTDはあきらめて、Transitional DTDを使用して下さい。

blockquote要素には要注意

Transitonal DTDの場合、blockquote要素の直下に文字データが入っていても問題がないのですが、StrictDTDの場合にはダメなのです。

しかも困ったことに、ツールバーでマークアップを補おうとしても、要素が変わってしまいます。

手打ちで補うしかないので気をつけて下さい。

ドキュメントアウトライナを使いこなす

要素そのものは吐き出すことが出来ても、ツールボタン、ツールーバー、属性ダイアログでは指定できない属性、属性値というのも存在します。

このような場合、属性名がわかっていればソース編集画面で手打ちするのが早いですが、曖昧な場合はドキュメントアウトライナを使えば、当該要素で使用できる属性が一覧表示されるので、必要な属性の部分に値を入力することで属性値を指定できます。

ドキュメントアウトライナの需要が特に高いのは、

というところでしょう。

操作方法

  1. 右側の「タグ一覧」をクリックし、ドキュメントアウトライナを表示する
  2. ページ編集画面で要素を直接選択するか、ドキュメントアウトライナの上の画面で操作したい要素を選択する
  3. ドキュメントアウトライナの下の画面で、編集したい属性の値部分をダブルクリックする
  4. プルダウンメニューから値を選択するか、値を入力する

V9までの場合、エディターズスタイルではドキュメントアウトライナが表示されているのがデフォルトになるので、手順1は不要です。

実際に使ってみよう

ここでは、飾りとなる画像を挿入したとして、実際に操作してみましょう。

1.画像を挿入する

この時点のHTMLソースでは、

<img src="画像ファイルの在処" width="(画像の横幅)" height="(画像の縦幅)" border="0">

となっています。

2.alt属性を補う

IMG要素のalt属性は、どの文書型を使う場合でも必須です。内容が空でなければ、画像の属性画面で挿入することが可能です。しかし、内容が空の場合は、ドキュメントアウトライナを使うか手打ちをする必要があります。

では、挿入した画像をクリックして、選択されている状態にしましょう。その上で、ドキュメントアウトライナを表示すると、以下のような画面になります。上はHTMLの各要素をツリー状に示したものです。下は当該要素で指定できる属性と属性値を示したモノです。未指定となっている場合は、HTMLのソースには反映されません。

ドキュメントアウトライナの画面
注:バージョン9のドキュメントアウトライナ画面です。10以降ではタブの部分が違いますが、機能的には同じです。

altの(未指定)になっている部分をダブルクリックします。そうするとプルダウンメニューが出てくるので、(値なし)を選択します。

操作後のHTMLソースは、

<img src="画像ファイルの在処" width="(画像の横幅)" height="(画像の縦幅)" border="0" alt="">

となります。

3.border属性を削除する

borderの0になっている部分をダブルクリックします。その後、プルダウンメニューから、(未指定)を選択します。

操作後のHTMLソースは、

<img src="画像ファイルの在処" width="(画像の横幅)" height="(画像の縦幅)" alt="">

となります。これで、StrictDTDに準拠したHTMLソースとなります。