素材：PAKUTASO
ホームページ・ビルダーはジャストシステムが開発・販売している、HTMLタグを知らなくてもWebページ及び、Webサイトを作成することができるWebオーサリングツールである（Wikipedia)。
ホームページ・ビルダーで制作されたWebサイトは、TABLEタグによるレイアウトやFLAMEタグが使用されるなど、Web標準では非推奨なHTMLの使い方がされるため、プロの現場では利用されていません。（※トライデントコンピュータ専門学校 Webデザイン学科でも使用していません。）
ただ、初心者向けのソフトとしての知名度や手軽さなどから、実際に利用されているWebサイトは数多くあり、ホームページ・ビルダーも毎年新しいバージョンが発表（Var.20・2015年10月発売）されます。
もし使い慣れているのであれば、ホームページ・ビルダーで、今風のWebサイトが作れたら余計なコストが掛からないので良いよねっていうことで、調べてみました。
今回、使用する「ホームページ・ビルダー」はバージョン14。
2009年発売ということは、約5年前のソフトです。IBMのロゴが懐かしいです。
現在は、ATOKなどでお馴染みのジャストシステムが販売、開発をしています。
ホームページ・ビルダーは他のソフトと同じように、一度購入してまったら、自分の環境で動く限り使い続ける方が多いようです。
未だにバージョン7（2002年発売）などで更新されているようなWebサイトも見かけますので、あえて古いバージョンを使ってみます。
動作環境
主要な動作環境を公式サイトから調べてみました。
- OS
- Microsoft® Windows® 7, Windows Vista®, Windows XP, Windows 2000 Professional
- CPU
- Intel®Pentium®III以上を推奨
- メモリ
- 256MB以上（512MB以上を推奨）
- ハードディスク必要容量
- 最小構成：250MB以上、最大構成：600MB以上の空き容量が必要
- 画面サイズ
- 解像度 800×600、High Color以上（解像度1024×768以上を推奨）
- サポート終了日
- 2016年3月31日
意外とまだ（2016年1月現在）サポート期間中なんですね。
また、Windows8, Windows10での利用もアップデートモジュールを利用することで対応（Windows8対応状況、Windows10対応状況）しているようです。
Windows10でインストールしてみましたが、問題なく利用できています。
アップデートモジュールは、こちらにあります。（※サポート期間が過ぎるとダウンロードできなくなるかもしれません。）
さっそく、起動してみましょう
インストール、アップデートが終了したら、さっそく起動しています。
起動すると「ホームページ・ビルダーへようこそ」という画面が出てきます。
こちらで編集スタイルを選択します。
この編集スタイルは、後からでも変更できますので、どれを選んでもいいです。
無難にスタンダードを選びました。
スタンダート編集スタイルの画面は上の画像になります。
他の編集スタイルに変更したい場合は、表示メニュー＞編集スタイルの切り替えを選んで、再度「ホームページ・ビルダーへようこそ」を表示して切り替えます。
かんたん編集スタイル↓
エディターズ編集スタイルは上記のような画面になります。
ホームページ・ビルダーに慣れてから自分にあった表示スタイルを選択すればいいと思います。
初期設定を変更します
ホームページ・ビルダーには、初心者向けの機能として、自動的にHTMLを整形や修正してくれたりする機能があります。
しかし今では逆に迷惑な、非推奨のタグなどを入れたりしてくれますので、初期設定を変更してなるべく、今風の使い方ができるようにカスタマイズします。
初期設定を変更するには、ツールメニュー＞オプションでダイアログを開きます。
まずはオプションダイアログから、一般タブを選択し設定を変更していきます。
一般タブ
- ＨＴＭＬソースを自動整形する
- このチェックボックスにチェック マークを付けると、HTMLファイルを開いたときなど、ソースのインデントなどが自動整形されてしまいます。
上手に使えればと思ったのですが、閉じタグが無くなってしまうなど、色々と問題がありそうですので、外しておきます。
- HTML構文エラーの自動修正する
- このチェックボックスはデフォルトでにチェックが入っています。
こちらも勝手に修正してしまうと思わぬエラーの原因になりますので、チェックを外します。
- HTML構文エラー時の動作
- エラーしている時は通知がでるように［すべてのエラーを無視］ではなく、［すべてのエラーで、修正ダイアログを開く］もしくは ［重大なエラーのみ、修正ダイアログを開く］に設定しておきます。
最初は［すべてのエラーで、修正ダイアログを開く］にしておきました。
- ページ作成モード
- デフォルトでは、［作成時に選択する］になっています。
こちらもで構わないのですが、基本的に利用するのは［標準モード］になりますので変更しておきましょう。
［どこでも配置モード］は、ホームページ・ビルダー上では見たままで、Webページの作成ができますが、今のようにブラウザの種類やスマートフォンなどデバイスが多様になっている現在、見る人によって見えなくなってしまうこともあります。
［標準モード］で利用するようにします。
編集タブ
要素を作成時の設定が出来るようになっています。
表の属性
表（table）を作成するときの「空白セルに空白コードを自動挿入する」のチェックを外しておきます。
表示タブ
表示タブは、制作時に表示されるモノの設定ですね。
プレビューの表示モードが「Internet Explorer 8」というのが、ちょっと気になりますが、あと特に変更するところはありません。
次のネットワークは、プロキシの設定がある環境で制作している場合に、FTPやファイルサーバーへの接続が必要な場合に設定します。
今回はローカルで制作しますので、特に設定は必要ないですね。
ファイルタブ
ファイルタブは、htmlファイルの初期設定になりますので、変更する箇所が多いです。
ファイルオプション
出力漢字コードを［Unicode（UTF-8)］に変更します。
「新規ファイルを作成する場合のフォーマット」は、そのまま［HTML 4.0］を選択しておきます。
「DOCTYPEを出力する」にチェックを入れて、<!DOCTYPE html>に書き換えちゃいます。
これは、HTML5用のDOCTYPEです。今ならHTML5で良いですね。
さらに、「HTMLソースにGENERATORを組み込む」のチェックは外してもいいのですが、ホームページ・ビルダーの利用年数を考慮すると、どのバージョンで編集しているのかわかりやすいので、入れておいてもいいのではないでしょうか。
保存オプション
「バックアップファイルを作成する」「自動保存を行う」 「文字エンコードを META タグで指定する」 「基準スタイルシート言語をＭＥＴＡタグで指定する」 のチェックを外します。
「文字エンコードを METAタグで指定する」や 「基準スタイルシート言語をMETAタグで指定する」をチェックすると<meta>タグで情報が記述されるので、便利ですがHTML5の記述とはちょっと違うので、後から直接、記述し直します。
「LANG属性を指定する」 にチェックを入れます。
ソース編集タブ
こちらは、ソースを編集するときに利用する設定です。
とりあえず、色設定はチェックを入れておきます。
表示設定
ソースコードの表示サイズは12ptにしておきます（※デフォルトの9ptでも構いません。
最近、細かい文字が見えづらいです…）。
ソースの自動改行、行数表示にチェックを入れておきます。
ページ／ソースで分割して作業する場合、左右に表示するようにしました。
出力文字
「タグ」「属性」ともに［小文字］を選びます。
XHTMLからの流れがありますので、HTML5でも小文字で書くほうがいいでしょう。
文字下げ
インデントの設定です。
2文字か4文字、好みで大丈夫です。
コードアシスト
これも好みですが、タグを書くと同時に閉じタグも書いてくれる機能です。チェックしておきます。
スタイルシート
「ソース設定」ボタンを押すと、ダイアログが表示されます。
行数表示にチェックを入れて、「詳細設定」ボタンを押します。ショートハンドを使ったほうが作業しやすいので、「お勧め」ボタンを押します。
ビジュアルサイト
展開レベルタブ
「エラーのあるページまで展開」のチェックを外します。
チェックが入っているとファイルを開けなくなる時があるそうです。
初期設定の変更はこのぐらいです。結構、変更しないといけないのですが、今回使用しているホームページ・ビルダーのバージョンを考えると仕方がないのかなとも思います。
「OK」ボタンを押して、設定が終わらせます。
スタンダード編集スタイルの画面であれば、上から2段目の「新規ページ」ボタンを押して、HTMLファイルを作成します。
HTMLソースタグを選択して、ソースを表示させると下記のように記述されていればOKです。
タイトルや文字コードなどは、別途追加していきます。
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body></body>
</html>
今後、Webサイトを制作していくのですが、なるべくホームページ・ビルダーの機能を使って作成していきたいと思います。
さて、どこまでできるのでしょうか(・・;)
