ホームページ・ビルダーで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部分）はあった方が、表示に関するブラウザ間の差は小さくなります。
ページ設定
ツール→オプションの一般タブで、２カ所確認が必要です。
- 背景色の規定値
- ページ作成モードの選択
1.の背景色については、標準のままです。標準のままにする理由は、body要素でのbgcolor属性を吐き出させないため。Strictなページには、bgcolor属性は使えません。背景色はCSSで指定します。
2.のページ作成モードは、デフォルトが悪名高い「どこでも配置モード」になっているため、これではトンデモページになってしまいます。「標準モード」に変更してやります。
また、各ページの方では、ページのプロパティで、以下の設定を確認します。
- ページ情報タブのページタイトル
- 背景/テキスト色タブ
1.の部分は、TITLE要素の内容の設定です。入っていなかったり、いい加減な内容だと非常に恥ずかしいです。2.の部分は、全てデフォルトのままです。先ほど背景色設定でbgcolor属性は使えないと説明しましたが、以下の項目は全てスタイルシートで設定します。
- 背景画像（使う場合）
- 背景色
- 文字色
- リンク色
- 既読リンク色
- 選択リンク色
使ってはいけないツールボタン類
ホームページビルダーの売りは、ワープロ感覚でHTML文書作成のため、ツールボタンには、
などと言ったボタンが付いています。しかし、以下のボタンはStrictなページでは使えません。Transitonal 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要素 |
 |
斜体にする | I要素 |
カラーパレットは、font要素を挿入してしまったり、他の要素でも色指定に関する属性を挿入してしまいます。色選びの参考には使ってもいいですが、適用ボタンを押してはダメです。
使ってはいけない書式メニュー
書式メニューでは様々な書式を指定することができるのですが、StrictDTDにする場合、使ってはいけないモノがたくさんあります。
- フォント
- 位置揃えの、「左揃え」「中央揃え」「右揃え」
- 文字飾りの「下線」「固定幅」「取り消し線」「点滅」
- 文字色
- サイズ
文字飾りの「太字」「斜体」は物理要素ですので好ましくありませんし、インデントは文字通りの意味に使ってはいけません。
要素の属性で指定してはいけない箇所
右クリックや右上の要素名が書かれたボタンをクリックすると、各要素に関する様々な属性を指定することが出来ますが、以下の部分に関しては指定しないようにしましょう。
- 色指定に関するところ
- 位置指定に関するところ（ただし、表のセルに関する指定はStrict DTDでも可）
- a要素のターゲット
- img要素の枠
- li要素の番号
- 表やセルの幅や高さ（表の高さの指定はTransitonal DTDでも不可）
- 表やセルの背景画像（Transitional DTDでも不可）
- セルの「自動的に行を折り返す」のチェックを外す
ターゲットブラウザの対応が不十分などといった理由で、表の中央揃え、IMG属性のborder属性、リストの番号を指定したい場合は、Strcit DTDはあきらめて、Transitional DTDを使用して下さい。
blockquote要素には要注意
Transitonal DTDの場合、blockquote要素の直下に文字データが入っていても問題がないのですが、StrictDTDの場合にはダメなのです。
しかも困ったことに、ツールバーでマークアップを補おうとしても、要素が変わってしまいます。
手打ちで補うしかないので気をつけて下さい。
ドキュメントアウトライナを使いこなす
要素そのものは吐き出すことが出来ても、ツールボタン、ツールーバー、属性ダイアログでは指定できない属性、属性値というのも存在します。
このような場合、属性名がわかっていればソース編集画面で手打ちするのが早いですが、曖昧な場合はドキュメントアウトライナを使えば、当該要素で使用できる属性が一覧表示されるので、必要な属性の部分に値を入力することで属性値を指定できます。
ドキュメントアウトライナの需要が特に高いのは、
- IMG要素のborder属性を指定しない
- IMG要素のalt属性の値を空にしたい（alt="")
- TABLE要素にsummary属性をつけたい
というところでしょう。
操作方法
- 右側の「タグ一覧」をクリックし、ドキュメントアウトライナを表示する
- ページ編集画面で要素を直接選択するか、ドキュメントアウトライナの上の画面で操作したい要素を選択する
- ドキュメントアウトライナの下の画面で、編集したい属性の値部分をダブルクリックする
- プルダウンメニューから値を選択するか、値を入力する
実際に使ってみよう
ここでは、飾りとなる画像を挿入したとして、実際に操作してみましょう。
1.画像を挿入する
この時点のHTMLソースでは、
<img src="画像ファイルの在処" width="（画像の横幅）" height="（画像の縦幅）"
border="0">
となっています。
2.alt属性を補う
IMG要素のalt属性は、どの文書型を使う場合でも必須です。内容が空でなければ、画像の属性画面で挿入することが可能です。しかし、内容が空の場合は、ドキュメントアウトライナを使うか手打ちをする必要があります。
では、挿入した画像をクリックして、選択されている状態にしましょう。その上で、ドキュメントアウトライナを表示すると、以下のような画面になります。上はHTMLの各要素をツリー状に示したものです。下は当該要素で指定できる属性と属性値を示したモノです。未指定となっている場合は、HTMLのソースには反映されません。
注：バージョン9のドキュメントアウトライナ画面です。10や11ではタブの部分が違いますが、機能的には同じです。
altの（未指定）になっている部分をダブルクリックします。そうするとプルダウンメニューが出てくるので、（値なし）を選択します。
操作後のHTMLソースは、
<img src="画像ファイルの在処" width="（画像の横幅）" height="（画像の縦幅）"
border="0" alt="">
となります。
3.border属性を削除する
borderの0になっている部分をダブルクリックします。その後、プルダウンメニューから、（未指定）を選択します。
操作後のHTMLソースは、
<img src="画像ファイルの在処" width="（画像の横幅）" height="（画像の縦幅）"
alt="">
となります。これで、StrictDTDに準拠したHTMLソースとなります。
