ウェブページを作成する無料のウェブオーサリングソフト
KompoZer は Fabien Cazenave 氏が開発している ウェブオーサリングソフトで、ワープロ や グラフィックソフトの操作に近い形で 視覚的に作業することができる。
KompoZer は 開発が中止された Nvu というMozilla Composer をベースにしたウェブオーサリングソフトのフォークで、同じく Nvu からの派生ソフトには 開発が継続されている BlueGriffon がある。

BlueGriffon のインストールと使い方
基本機能を無料で利用可能な WYSIWYG 対応のウェブオーサリングソフト BlueGriffon は オープンソースの ウェブオーサリングソフト Nvu の開発者 ダニエル・グラッツマン氏 ( Disruptive I […]
システム要件
ラストバージョン 0.8β3
OS:Windows XP/ Vista/ 7/ 8
ソフトの入手先
SOURCE FORGE – KompoZer ダウンロードページ
公式サイトは 閉鎖。
KompoZer のインストール
KompoZer のインストーラーに アドウェア や スパイウェア は含まれていない。
SOURCE FORGE の KompoZer のページから KompoZer -0.8b3.ja.win32.exe をクリックしてダウンロード。
インストーラーを起動して ユーザーアカウント制御 の ダイアログが表示されたら「 はい 」で許可。
セットアップウィザードが開始するので「 次へ 」。
EULA が表示されるので確認して問題がなければ「 同意する 」。
インストール先に こだわりがなければ デフォルト設定で「 インストール 」。
プログラムグループの指定もデフォルトのまま「 次へ 」。
デスクトップのショートカットと クイックランチのショートカット作成を選択。
インストール先などを確認して「 インストール 」。
セットアップ完了。
KompoZer の使い方
KompoZer のデザイン編集だけでもある程度のページは作成できるが、メタタグの記述などがないために 少なからず タグの知識は必要になる。
KompoZer を起動するとワープロソフトのように 白紙ページにIビームが点滅している状態になる。
設定
KompoZer は初期設定のまま使用しても問題ないが ページ作成の前に 各項目の確認を行う。
メニューバーの ツール から 設定 を選択。
詳細 の マークアップ形式 から使用する言語を選択。
文章入力
WYSIWYG ( ウィジウィグ )は What You See Is What You Get ( 見たままを手に入れる ) の略で、ブラウザで表示されるイメージで WEBページの作成が可能になっている。
文章は 右ペイン に入力する。
画面下部にある ソース タブに切り替えると 入力した文字が HTML で表示される。
ファイルの保存は上部アイコンメニューの「 保存 」をクリック。
新規ファイルを保存する場合は ページタイトル の 入力ダイアログ がでるので 任意のページタイトルを入力する。
ページタイトルはファイル名ではなく ブラウザに表示されたり Google や Yahoo の検索結果に表示される。
作成したファイルは完成した時点でアップロードが必要になるため 予めファイル構成を固めておく。
ホストの初期フォルダ ( ルートディレクトリ ) の中に ページの表示に必要な素材などを全てアップするため、フォルダ分けをしっかり行わないと 後からの処理が非常に煩雑になってしまう。
レイアウトの設定
ある程度ページデザインのイメージが決まったら、初めにページの大まかなレイアウトを設定する。
レイアウトは ツールアイコンから テーブル を選択するか、メニューバーの テーブル から 挿入 を選択する。
設置するセルの数を指定してテーブルを設置。
追加したテーブルは 任意の大きさに拡大縮小が可能。
セルがブラウザでどのように表示されるか確認するには、ファイルを保存した後 閲覧 アイコンをクリックすると ブラウザが起動する。
設置したテーブルの枠線 や 余白などの設定は テーブルをダブルクリックするか、メニューの テーブル から テーブルのプロパティ を選択し、テーブル タブで 枠線の太さ・セル間隔・セル内の余白を設定。
枠線 を 0 ピクセルにすると 実線から赤い点線に変わる。
セルの幅はスライドして調整するか、テーブルのプロパティで セル タブを選択して 大きさ を指定。
数値を指定する場合は必ず指定する側にチェックを入れる。
セルの結合は 結合するセルを選択して テーブル の 選択されたセルを結合 を選択するか、コンテキストメニュー(右クリックメニュー)で 選択されたセルを結合 を選択する。
テーブルの中にテーブルを挿入する場合は、該当のセルをクリックし、通常のテーブル作成と同じ手順で挿入する。
画像の追加
ページに画像を挿入する場合は 追加したい箇所で ツールアイコンから 画像をクリックして 画像のプロパティ を開く。
設置する画像ファイルは pictフォルダ などに保存し、 画像URL のフォルダアイコンから 保存してある画像を選択し、代替テキスト ( 画像を表示できない場合に表示する画像の説明 ) を入力する。
相対URL を無効にすると 絶対パス になるため サーバにアップした際にリンクが切れてしまう。
配置する画像の大きさは 画像プロパティ の 大きさ タブで 拡大縮小ができ、拡大縮小する場合は ユーザー指定 にチェックを入れて サイズを入力。
画像に対するテキストの回りこみは 画像プロパティ の 表示 タブにある 画像に対する文章の配置 で指定する。
画像に余白 や 輪郭線を付ける場合は 余白 項目に数値を入力できるが、左右余白 ( HSPACE ) と 上下余白 ( VSPACE ) は HTML 4.01 の 非推奨設定で、これらはスタイルシートの使用が推奨されている。
画像にリンクを埋め込む場合は リンク対象 タブで リンク先の URL を入力する。
リンクの設定
リンクの設定は 画像にリンクを追加した操作と同じで、リンクのプロパティ画面でリンク先のURLを指定する。
文章にリンクを設定する場合は、対象の文字列を選択し、リンクアイコンをクリックするか、右クリックメニューから リンクを作成 を選択する。
内部リンクはフォルダアイコンから 該当ページを指定すると 自動的に 相対URL でリンクが作成される。
同一ページ内でのリンクは アンカー を使用する。
アンカーを設置すると 設置した箇所に イカリのマークが表示される。
アンカーを設置した場所へのリンクは リンクのアイコンをクリックし、文字列なら リンクのプロパティ、画像なら 画像のプロパティ を開き、ドロップダウンリスト から アンカーを選択。
文字や背景の装飾
テーブル内のセルの背景色 や 文字の配置は テーブルのプロパティ から行う。
内容の配置 では文字 や 画像を、垂直方向 では 上・中央・下、水平方向 で 右・中央・左 が選択でき、指定する場合はチェックボックスにチェックを入れて配置を選択する。
セルの背景色ではなく ページの背景を編集したい場合は、メニューの 書式 から ページの配色と背景 で背景画像 や 配色の指定をする。
スタイルシート
文字の属性はデフォルトで 見出し1 のフォントサイズが最も大きくなっているが、これらはスタイルシート ( CSS ) で 変更できる。
文字の属性を変更するには ツールバーのプルダウンメニューから選択するが、見出しは 文字のスタイルを決めるものではなく ページ内の重要性を表しているため、スタイル重視で 見出し3 の後に 見出し2 が来るような構文は原則的に正しくない。
スタイルシートは フォントの大きさ・色・斜体・太文字・背景色・背景画像 などの スタイル を定義するもので、段落意味をする < p>タグを スタイルシートで定義すると <p>タグを使用する箇所は全て同じスタイルになり ページの構成に統一感がでる。
KompoZer は CSS エディタを実装しており、 CSS アイコンでエディタを開き スタイル規則を新規作成で 指定された種類の全要素に適用されるスタイル にチェックを入れ、リストボックスから定義するタグを選択して「 スタイル規則の作成 」をクリック。
スタイルの指定はメニュータブを切り替えて行う。
内部スタイルシートで設定した規則を外部出力するには、CSS エディタを起動し「 スタイルシートを外部に出力し、そちらへと切り替える 」をクリックして ファイルに半角英数で名前を付けて保存。
新規のページに出力した外部スタイルシートを読み込ませるには「 新しいlink要素 」を選択。
「 選択 」をクリックして 出力したスタイルシートを指定すると URL の欄に スタイルシートのパスが表示されるので「 スタイルシートの作成 」をクリック。
関連記事

BlueGriffon のインストールと使い方
基本機能を無料で利用可能な WYSIWYG 対応のウェブオーサリングソフト BlueGriffon は オープンソースの ウェブオーサリングソフト Nvu の開発者 ダニエル・グラッツマン氏 ( Disruptive I […]

KompoZer のインストールと使い方
ウェブページを作成する無料のウェブオーサリングソフト KompoZer は Fabien Cazenave 氏が開発している ウェブオーサリングソフトで、ワープロ や グラフィックソフトの操作に近い形で 視覚的に作業する […]