S-JIS[2004-11-05]

HTMLエディターの比較

ひしだまが使ったことのあるHTMLエディターを比較してみました。
(使い方のメモみたいになってしまいましたが)

名称 このページ内での略称 備考
FrontPage2003 FP2003 MicrosoftのHTMLエディター。
ホームページビルダー2001 HB2001 まるでSONYが歴史から抹消しようとしているパソコンの型番のようだ(苦笑) IBMのHTMLエディター。2001は古いので比較対象とするのはいまいちだけど、新しいのは使ったことがないのでなんとも言えない…。

結論(?)は、最後尾で。


用語の違い
用語 FrontPage2003 ホームページビルダー2001
ビュー デザイン 標準
分割 該当なし
コード HTMLソース
プレビュー プレビュー
リンク(<a href="">) ハイパーリンク リンク
名前(<a name="">) ブックマーク ラベル
箇条書き OL 番号付きリスト 番号付きリスト
UL 記号付きリスト 番号なしリスト
DL 定義 説明付きリスト
 
比較項目 FrontPage2003 ホームページビルダー2001 備考
全般的な操作
HTML文書を開く際の構文チェック ☆☆ 何かチェックしてるんかな? 未知のタグや構文チェックでエラーがあると、エラーが出て、デザインビューでは編集できない。未知のタグなんて将来たくさんあるはず。  
HTML文書を開く際の外部画像の扱い ★★ それを読み込んで表示しようとする。ただし、物によっては読み込めずに固まってしまうことがある。条件不明。とりあえずネットワークを無効にして文書を開けば、編集はできる状態になる。 ★★ リンク名が表示されるだけで、読み込もうとはしない。 外部のインターネットの画像などを表示するようになっている場合、「正確に表示しようとするので良い」とも言えるし、「アフィリエイトのリンクだと正確に計測できなくなるので邪魔」とも言える。
スタイルシート ★★★ (自分が知る限り)問題なく対応。 ★★ だいたい対応。リンクには未対応の模様。  
デザイン・コード・プレビューの切替 ★★★ 画面下部のタブで選択。 ★★★ 画面上部のタブで選択。(HTMLソースの表示は遅い  
HTML文書の切替 ★★★ 画面上部のタブで選択。 ★★ MDIウィンドウの中の子ウィンドウとしてHTML文書を表示している場合は、それを選択。 「index.html」は各ディレクトリにあるので、ディレクトリ名も出る方がいい。
タイトルはよく間違えるので、表示されてる方がそれに気付きやすくていい。
★★ Ctrl+Tabで切り替え可能。 ★★ Ctrl+Tabで切り替え可能。
★★★ 「ウィンドウ(W)」メニューにはディレクトリ名・ファイル名が表示される。 ★★★ 「ウィンドウ(W)」メニューにはファイル名・HTMLのタイトルが表示される。
未知のタグ エラーにはならないが、デザインビュー上には何も表示されない。 デザインビュー上にエラーとして全て表示される。SPANタグがいちいち出るのはうざったいが、出ているおかげでコピーは簡単。  
上書き保存 ★★ Ctrl+S一発で上書き保存できる。 スタイルシート等で他のディレクトリにあるファイルを参照している場合、それを「HTML文書と同じディレクトリへコピーしてくるかどうか」を聞いてくるダイアログが毎回開き、かつ毎回「しない」に選びなおさなければならない。 よく使う機能だけに、一発で保存できないのは致命的。
テキスト入力関連
特殊な文字 メニューバーの「挿入(I)」→「記号と特殊文字(S)」
「♥」「∀」とかが指定可能。ただ、フォントまで一緒に設定してしまうのが難。
★★ メニューバーの「挿入(I)」→「特殊文字(H)」 FP2003の方が選べる文字は格段に多いけど、探すのが大変(苦笑)
改行(BRタグ) ★★ Shift+Enter ★★ Enter(改行マークが表示される)  
特殊な改行(属性付BR) ★★ メニューバーの「挿入(I)」→「改行(B)」 ★★ Ctrl+Enter(改行マークが表示されるが、通常の改行と見分けがつかない)  
段落(Pタグ) ★★ Enter
何もない段落には全角スペースが1つ入る。
★★ Shift+Enter(ただし場所によっては無効)
メニューバーの「挿入(I)」→「段落(P)」
何もない段落は消される。
 
標準・見出し等の設定 ★★ 書式設定ツールバーの「スタイル」から選択。
通常
標準
H1
見出し1
UL
記号付きリスト
OL
番号付きリスト
DL
定義された用語
PRE
書式付き
★★ 書式ツールバーの「段落の挿入/変更」から選択。
通常
標準
H1
見出し1
PRE
べた書き
 
文字修飾 ★★★ 文字列を選択して、メニューバーの「書式(O)」→「フォント(F)」「プロパティ(T)」
又は右クリック→「フォント(F)」
★★ 文字列を選択して、メニューバーの「書式(O)」→… FP2003の方が分かり易い。
class属性指定 ★★ スタイルツールバーの「クラス」から選択。
ただし表の複数セルの場合は別。
★★ スタイルクラスツールバーの「スタイル クラスの設定/解除」から選択。 カーソル位置を囲んでいる最小のタグに対して属性が付けられる。
独自スタイルの選択 ★★ スタイルツールバーの「スタイル(S)」からスタイルダイアログを開いて「新規作成(N)」ボタンを押すと「新しいスタイル」ダイアログが開く。ここで「名前(N)」に例えば「span.cmt」と入れると、書式設定ツールバーの「スタイル」でspan.cmtが選べるようになる。
文字列を選択してspan.cmtを選べば、その文字列が新たにSPANタグで囲まれてclass="cmt"が指定される。
方法無し この例のcmtスタイルには属性を何も指定していないが、cssファイルに属性が書いておけば それが使われる。
ただし、左記の方法で新しいスタイルを登録すると、HTML文書のheadの中にstyleが書き込まれてしまう。これだけならあまり実害は無さそうだけど…。
タグの範囲を表示 ★★★ 画面上部に、カーソル位置を囲んでいるタグが全て表示されている。
これをクリックすることで、その内容を選択できる。
★★ カーソル位置を囲んでいる最小のタグの範囲が四角形で囲んで表示される。 両方の機能があると便利なんだけどなー。
タグだけ削除 ★★★ 画面上部のタグの右側にマウスを合わせると小さな「▼」が出る。これをクリックし、「タグの削除(R)」を選択。 方法無し  
リンク関連
簡易リンク作成・修正 ☆☆ 方法は無いが、別に不便ではない。 ★★★ 画面下部のURL欄にURLを入力。  
リンク作成ダイアログの表示 ★★ 文字列を選択し、Ctrl+K。
又は右クリックから「ハイパーリンク(I)」。修正の場合は「ハイパーリンクのプロパティ(K)」。
★★ 文字列を選択し、Ctrl+J。
又は右クリックから「リンクの挿入(L)」。修正の場合は「属性の変更(A)」。
 
リンク先のURLの表示 ★★ リンクにマウスを合わせると、ステータスバーにURLが表示される。 ★★★ リンクをクリックすると、画面下部のURL欄・ターゲット欄に表示される。  
名前設定(name属性) ★★★ 文字列を選択し、Ctrl+G。デフォルトは選択した文字列になる。
もしくはリンクをクリックし、Ctrl+G。リンクの場合はデフォルトは無し。
★★ 文字列を選択し、Ctrl+J。そして「ラベルを付ける」タブを選択。デフォルトは無し。  
自ページ内の名前一覧表示・移動 ★★ Gtrl+G
「ジャンプ(G)」ボタンで移動。
★★ Ctrl+Jで、「ラベルを付ける」タブを選択。
「移動(M)」ボタンで移動。
 
名前選択(href="#〜") ★★ Ctrl+Kで(HTML文書を指定した後、)「ブックマーク(O)」ボタン。
名前一覧は、自ページならページ内に出てくる順序で表示されるが、他ページなら文字コード順。
★★ 画面下部のURL欄に「#」付きで入力。
又はCtrl+Jで(「URLへ」を選んでHTML文書を指定した後、)「ラベルへ」タブを選択。
 
リンクの解除 ★★ Ctrl+Kで「リンクの解除(R)」ボタン。 ★★★ 右クリックから「リンクの解除(L)」。  
リンクの有無確認 ★★★ 下線で表示。スタイルを使って色を変えている場合、その色で表示される。 ★★ 下線で表示。  
名前の有無確認 ★★ 点線の下線で表示。 点線の下線で表示。
ただし、リンクと名前が同時に指定されている場合は単なる下線となり、名前が付いているかどうか分からない。
 
リンク先のHTML文書を開く ★★★ Ctrlを押しながら、URLをクリック。 ★★ URLを右クリックし、「リンクを開く(K)」。よく「別のウィンドウで開く(W)」と間違える(苦笑)  
名前付きリンクの場合、HTML文書は開くが名前の場所は分からない。(自ページ内なら移動する) ★★ 名前付きリンクの場合、名前の場所に移動する(ただし初めてその文書を開くときのみ)。  
相対パスのリンクのコピー&ペースト ★★★ そのまま相対パスでコピーされる。のみならず、ディレクトリが異なるHTML文書からコピーしたものでも相対パスを計算し直してくれる。変えたくないなら、コードでコピーペーストすればいいんだし。 絶対パスに変換されてコピーされる。それも「file://」扱いになって、非常に許し難い。  
名前付き文字列のコピー&ペースト ★★ 自ページに同じ名前がある場合、名前に番号が追加されて貼り付けられる。 自ページに同じ名前があっても、そのまま貼り付けられる。 名前を移動させたい時なら「そのまま」が便利だけど、間違った場合は気付かないからなぁ。
エンコードされたリンクの修正 リンク作成ダイアログでURLを修正すると、エンコードされていたものがわざわざデコードされてしまう。 ☆☆ 特に不要な変換はされない。 エンコード:「%E3%83%AD%E3%83%BC%E3%83%89%E3%82%B9%E5%B3%B6%E6%88%A6%E8%A8%98」→デコード:「ロードス島戦記
テーブル関連
表題の挿入 ★★ メニューバーの「表(A)」→「挿入(I)」→「表題(A)」 ★★ メニューバーの「表(A)」→「表題の挿入(T)」  
表題の削除 表題の文字列をクリックして、画面上部のcaptionタグをクリックして、Deleteキー。 ★★ メニューバーの「表(A)」→「表題の挿入(T)」で「なし」を選択。  
上に1行挿入 ★★ 右クリック→「行の挿入(N)」。
表ツールバーの「行の挿入」
メニューバーの「表(A)」→「行の追加(A)」→「上へ追加(U)」
表編集ツールバーの「行の追加」→「上へ1行挿入(U)」
HB2001の場合、追加した行はその元となる行の属性を引き継いでくれない。
下に1行挿入 行列の汎用追加を使用。 メニューバーの「表(A)」→「行の追加(A)」→「下へ追加(D)」
表編集ツールバーの「行の追加」→「下へ1行挿入(D)」
表の最後尾に1行追加 ★★ 最後尾の行の一番右のセルをクリックして、Tabキー。 行の挿入を使用。  
表の最後尾から表の外へ段落追加 ★★ 最後尾の行の一番右のセルからCtrl+Enter。 ★★ Tabで表の外に出て、普通にEnter。  
左に1列挿入 ★★ 右クリック→「列の挿入(S)」。
表ツールバーの「列の挿入」
★★ メニューバーの「表(A)」→「列の追加(C)」→「左へ追加(L)」
表編集ツールバーの「列の追加」→「左へ1列挿入(L)」
 
右に1列挿入 行列の汎用追加を使用。 ★★ メニューバーの「表(A)」→「列の追加(C)」→「右へ追加(R)」
表編集ツールバーの「列の追加」→「右へ1列挿入(R)」
 
行列の汎用追加 ★★ メニューバーの「表(A)」→「挿入(I)」→「行または列(N)」で、行数・列数・方向を指定。 ★★★ メニューバーの「表(A)」→「行の追加(A)」「列の追加(C)」→「指定して追加(S)」
表編集ツールバーの「行の追加」「列の追加」→「指定して追加(S)」
行数・列数・方向を指定。
 
行列の削除 ★★ 行や列を選択して右クリック→「行の削除(D)」「列の削除(D)」。ただDeleteキーを押しても中身が消えるだけ。 ★★★ 右クリック→「行の削除(Y)」「列の削除(V)」  
行の選択 ★★ 表の左端にマウスを持っていくと「→」に形が変わるので、そこでクリック。 1行全体の全セルを選択。  
行のコピー ★★ 行を選択してCtrl+C。 ★★ メニューバーの「表(A)」→「行のコピー(P)」
又は1行全体の複数セルを選択してCtrl+C。
 
行のペースト ★★ Ctrl+V。
行の一番左のセルにカーソルがある状態で貼り付けると、行の上に挿入される。
一番右のセルにカーソルがある状態だと下に挿入される。
それ以外のセルだと、セルの中に行だけの表が作られる。
メニューバーの「表(A)」→「行の貼り付け(L)」→「上へ貼り付け(U)」「下へ貼り付け(D)」
ただ単にCtrl+Vだと、セルの中に行だけの表が作られる。
 
空白セル ★★ 新しく作られたセルには(デザインビュー上では分からないようになっているが)全角スペースが1つ入っている。これにより、実際にブラウザで表示してもちゃんと空白セルになる。本当に消したい場合はコードビューで消すしかない。 新しく作られたセルには何も入っていない。デザインビュー上では通常の空白セルのように見えるが、実際にブラウザで表示すると表示が変になる。  
セル間カーソル移動 ★★ Tabで右へ1セル。行の右端だったら次の行へ。次の行がない場合は新しい行が追加される。
Shift+Tabで左へ1セル。行の左端だったら前の行へ。前の行が無いと移動しない。
Tabで右へ。セル内にタグのブロックがある場合、Tabを押す度にそこへ移動。それが無くなったら右のセルへ移動。行の右端だったら次の行へ。次の行が無い場合は表の外へ移動。
Shift+Tabで左方向へ同様の動き。
 
セルの中央揃え セル内にカーソルを置いて、画面上部のtdタグをクリックして選択してから書式ツールバーの「中央揃え」。セル内にカーソルを置いただけで書式ツールバーの「中央揃え」を押すとPタグが作られて、それの属性が中央揃えになる。もしくは複数セルを選択してから書式ツールバーの「中央揃え」。 ★★ セル内にカーソルを置いて書式ツールバーの「中央揃え」。  
複数セルのclass属性設定 選択したセルで右クリック→「セルのプロパティ(R)」→「スタイル(S)」の「クラス(C)」で選択。普通にスタイルツールバーの「クラス」を使うと、表全体に適用されてしまう。 ★★★ 普通のclass属性指定と同じ。  
セルの中身の削除 ★★ セルの内容を選択(複数選択可能)してDeleteキー。 ★★ セルの内容を選択(複数選択可能)してDeleteキー。  
セルの結合 ★★ 結合したいセルを選択して右クリック→「セルの結合(M)」 ★★ 結合したいセルを選択して右クリック→「選択セルの結合(R)」  
セルの分割 ★★ 分割したいセルで右クリック→「セルの分割(P)」で、分割したい行・列とその数を指定。 ★★★ 分割したいセルにカーソルを置いて、表編集ツールバーの「列の分割」「行の分割」。これは2分割しかできないが、ツールバーのボタンなので分割したい個数だけ押すのは簡単。
またはメニューバーの「表(A)」→「セルの分割(S)」→「指定して分割(S)」で方向とその数を指定。
 
複数セルの分割 ★★ 同上。 複数セルをまとめて分割する方法は無い。  
箇条書き関連
箇条書きの挿入 ★★ 書式設定ツールバーの「スタイル」から選択。 ★★ 書式ツールバーの「〜リスト」をクリック。  
二重箇条書きの挿入 箇条書きの最中に、書式設定ツールバーの「インデント」を2回クリック。(1回だけだと段落が出来る) ★★★ 二重にしたい箇所で、書式ツールバーの「〜リスト」をクリック。非常に素直で分かり易い。FPと同様に書式ツールバーの「インデント」も可。  
箇条書きの種類の変更 ★★ 箇条書きの最中に、書式設定ツールバーの「段落番号」「箇条書き」をクリック。 たぶんソースを直接変えるしかない。  

結論

FrontPageホームページビルダーいい所を合体させたHTMLエディターがあるとよい(笑)

個々の機能はFrontPageが良かったりホームページビルダーが良かったりと、当然ばらばら。
全般的にはFrontPageの方がよさそう、というよりホームページビルダー2001が少々劣る、という感じかな。
使ってみたバージョンが2001なので最新版ではもっと良くなっているんだろうけど、保存とか未知のタグの構文チェックなんかはバージョンと無関係に致命的でしょう。


ツールのページへ行く / トップページへ行く
メールの送信先:ひしだま