ホームページビルダーv13でXHTML+CSSコーディング

安価なオーサリングソフトとして超王道なホームページビルダー(笑)でいつもやってるコーディングは出来るのか?
実際やってみたら案の定残念な感じだったので、これは酷いと思ったところを列挙してみる。
なお、触ったのはver13体験版で製品版ではありません。

1.DOCTYPE宣言が勝手に書き換えられてしまう
「ビルダー=ソースを勝手に変更する」は健在だった!らしい
DOCTYPE宣言が設定されているもの(デフォルトはHTML)に書き変わるだけで、ソース全体は変更されない(<br />等はそのまま)変なバグ。
オプションで「DOCTYPEを出力する」のチェックを外せば直るという話だったが直らず、
「かんたんナビ」をオンにしたとき表示される右上の「プログラム動作の設定」で同じチェックを外したら直った。
しかしこの設定を行うと新規作成をした時にDOCTYPEが入らなくなってしまう。もはや嫌がらせレベル。

2.XHTMLを選択すると回避出来ないXML宣言
文字コードがUTFの場合はXML宣言は省略可能で、IE6の互換表示モードを避けるために書かないケースは多いと思います。
しかしビルダーだとXML宣言だけは確実について回る。上記バグでDOCTYPE宣言が挿入されなくなっても、です。
記述するのが強く推奨されているとは言え、ちょっとうざい。
ビルダーのプレビューはIE6っぽいと下で書いてますが、幸いにもXML宣言があっても互換モードっぽい表示にはなりません。

3.ショートカットボタンを押すともれなくFONTタグを挿入
文字の拡大、色変更、全てフォントタグ。太字はb、斜体はiタグ。Dreamweaverも設定によっては同じ事をしてくれるが、
styleで記述する設定にすればspanタグによるstyleXX祭りを開催するので鬱陶しさはいい勝負。
昔のバージョンと比べると大分まとめて記述するようになり、ネストの順序も守られるようになっています。(これが直っただけでもマシな方?)

4.やっぱり微妙なレンダリング性能
「ページの編集」で崩れるのはいわずもがな。加えて「プレビュー」も微妙。
編集モードの変な所作▼

  • text-indentのマイナス値が無効
  • margin貫通(padding:1pxとかしてもスルー)
  • pタグとかに余計なスタイルをつける(スタイルシートでmargin:0px等しても無視)

「プレビュー」はIE6っぽい感じだが、IE6と完全に同じというわけではなかったりする。

5.ソースの隙間にカーソルが出る
(XHTML+CSSでページ編集モードは使わないだろうという突っ込みはおいといて)
本来、テキスト挿入カーソルはレイアウトで使用しているdivの間には出ないものだが、ビルダーは華麗にスルー。
下記ソースの場合、改行も何も無いはずの最新情報の上にカーソルが出て、***の部分が黄色く選択状態になります。
もしここに何か入れられてしまったら…

<div id="main">
****<div id="content">
	<h1>最新情報</h1>
	</div>
</div>

6.デフォルトが大文字
ソース開いてタグが大文字だったらビルダーで作ったページと言って過言では無いくらい特徴的ですが、
初期設定が大文字なので変更しない限り小文字にならない。

7.その他細かい点

  • html要素の属性のデフォルト値がない (アウトラインで表示されるんだからlangとxml:langくらいはあってもいいと思う)
  • ソースコード編集にコードヒント機能が無い (閉じタグ補完はある)
  • CSSの編集とページ編集を同時に行う事が出来ない (CSSエディターが独立してる)
  • 自動作成されるCSSがもっさり
  • ブログ(笑)とかアフィリエイト(笑)はサービス利用してなければ無意味

もっさりしてるCSSの例▼ (ちなみにこれテーブルセル用)

.hpb-cnt-tb-th1 {
background-color: #BBBBBB;
font-size: 80%;
color: #333333;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #333333;
border-right-color: #333333;
border-bottom-color: #333333;
border-left-color: #333333;
}

HTMLやCSSのアウトライン表示やカラーパレットは便利だと思いますが、
「痒いところに手を伸ばしてみたけど別のところ掻いてた」みたいな要領の悪さがそこかしこに見受けられる。
XHTMLを扱う上でDOCTYPEのバグは今後直る可能性があるものの、編集するページにXHTMLとHTMLが混在していると非常に使いづらいと思います。

ディープに使いこなせばマシになるのかな。でも優秀なツールは他にいくらでもあるしなー。
「初心者向けソフト」としては王道だと思うけれど、XHTML+CSSコーディングには不向きだと思った。

XHTML用の設定

参考までに。

  1. 「一般」タブ
    • HTMLソースを自動整形する のチェックを外す
    • ページ作成モードの選択 →標準モード
  2. 「編集」タブ
    • XHTML→スクリプトを(<![CDATA[…]]>)で表示する にチェック
  3. 「表示」タブ
    • 部品の枠 → すべて表示にするとテーブル以外の枠も見えるようになります
  4. 「ファイル」タブ
    • HTMLファイルの拡張子 → html
    • 出力漢字コード → UTF-8または無変換
    • 新規ファイルを作成する場合のフォーマット → XHTML 1.0
    • DOCTYPEを出力する のチェックを外す(※上記参照)
    • HTMLソースにGENERATORを組み込む のチェックを外す
    • 文字エンコードをMETAタグで指定する にチェックし、UTF-8または自動を選択
  5. 「ソース編集」タブ
    • 出力文字 →両方小文字にする
    • コードアシスト→終了タグの自動挿入にチェック

※余談
ホームページNinja9はソース書き換えるってレベルじゃない
もっと恐ろしいものの片鱗を味わったぜ…

1件のコメント

Leave a Comment.