ショートハンドCSSプロパティとWYSIWYG型オーサリングツール

Dreamweaver CS3やExpression Webがスタイル指定を行ったときにショートハンドCSSプロパティを吐き出せるのに対し、ホームページ・ビルダー11は吐き出せない。

検証はすべて体験版にて実施している。

Dreamweaver CS3とExpression Webで吐き出すCSS

body {
	font-size: 100%;
	line-height: 1.5;
	color: #333333;
	background-color: #fefefe;
	margin: 0px;
	padding: 0px;
}
dl {
	border: 3px dashed #003300;
}
#footer {
	padding-top: 1em;
	border-top-width: 3px;
	border-top-style: solid;
	border-top-color: #000099;
}

ホームページ・ビルダーで吐き出すCSS

BODY{
  font-size : 100%;
  line-height : 1.5;
  color : #333333;
  background-color : #fefefe;
  padding-top : 0px;
  padding-left : 0px;
  padding-right : 0px;
  padding-bottom : 0px;
  margin-top : 0px;
  margin-left : 0px;
  margin-right : 0px;
  margin-bottom : 0px;
}
DL{
  border-width : 3px 3px 3px 3px;
  border-style : dashed dashed dashed dashed;
  border-color : #000000 #000000 #000000 #000000;
}
#footer{
  border-top-width : 3px;
  border-top-style : solid;
  border-top-color : #000099;
  padding-top : 1em;
}

Dreamweaver CS3とExpression Webでは、17行で書ける。一方、ホームページ・ビルダーは26行も要する。

外部スタイルシートを使う場合、軽い順に以下の通りとなる。

1. Expression Web：285byte
2. Dreamweaver CS3：323byte
3. ホームページビルダー11：551byte

Expression WebとDreamweaver CS3の差は、DWCS3で、先頭に以下のような記述がつくため。

@charset "utf-8";
/* CSS Document */

どのみち、ホームページ・ビルダー11のCSS吐き出しに無駄な部分が多いのは否めない。たった3つのセレクタに指定しただけでも、最も小さいExpression Webの2倍弱だ。セレクタ数が増えれば、差はもっと広がる。

ホームページ・ビルダーはV11でCSSエディタというのがついたのだけども、これはあくまでCSSを手打ちしてそれのプレビュー（しかも再現度あまりよくない）が出来るぐらいのモノ。だから、プロパティ名や記述順がうろ覚えという場合に役に立たない。

かゆいところまで手が届いているなと思うのはDreamweaver CS3だなと思う。外部CSSをリンクさせるときにメディアの指定なんかも出来るし。そのあたりはプロ御用達ツールなんだなと思う。値段もそれなりのものだけどもさ。

ホームページ・ビルダー使いとして辛いところは、ショートハンドCSSプロパティを吐き出さないこと。HTMLの吐き出しは設定いじればいいのだけども、CSSの吐き出しはどうにも出来ないのが辛い。だから、私はホームページ・ビルダーでCSSの吐き出しを極力しないようにしているんだよね。

(追記：2007-08-16）

Mozilla Composerの流れを組むKompozer 0.77でもショートハンドCSSプロパティの吐き出しが可能。

14行で記述可能。外部スタイルシートを使う場合も、237byteで済む。ここまで取り上げたソフトでは、最もエレガントなCSSの吐き出しが可能だ。

/* Generated by KaZcadeS */
body {
  margin: 0px;
  padding: 0px;
  line-height: 1.5;
  color: #333333;
  background-color: #fefefe;
}
dl {
  border: 3px dashed #003300;
}
#footer {
  border-top: 3px solid #000099;
  padding-top: 1em;
}