ホームページを作る人を１人でも多くしたいと思ってこのテキストを作ります。間違っているところがあるかもしれませんが、少しでもお役に立てれば幸いです。間違いや疑問・ご意見がありましたらお手数ですが電子メールでお知らせください。
ホームページ作りには特別なソフトウェアは必要なく、Windows にあるメモ帳でも作る事が出来るのですが、文章の外にHTMLタグを１文字ずつ入力して作り上げるのは大変です。そこで使われているのがHTMLエディタです。
私のサイトにある「ホームページ作成入門」ではフリーウェアの「HTML Sorcerer」(ソーサラー)を紹介しました。(2002年1月)このソフトは現在もバージョンアップしています。
そして「ホームページ作成入門」の付録として「TTTEdit」を「HTMLを勉強しながらホームページを作るのに便利」と紹介しました。このソフトを使って「マイ・ポータルの作成」というテキストを私のサイトに載せてあります。
その後(2002年4月)「TTTEdit」を使った「写真情報の作成」というテキストを作りましたが、きわめて少数の方から利用されただけでした。現在「TTTEdit」はバージョンアップを行わず、新しいソフト作成に移行するとの事です。
ここで紹介するフリーウェアの「HTML Project2」は、HTMLタグ入力支援のHTMLエディタです。パッケージソフトの「ホームページビルダー」のようにビジアルで画面の上にオブジェクトを配置して作り上げるWYSIWYG（What You See Is What You Get）編集は出来ませんが、フリーウェアであっても極めて多機能でそして余り出しゃばらず、細かいところに気を使いながら使う人の作業を助けてくれます。ただ惜しいことに使い方が判り難いのです。ヘルプ・Readme.txt・作者のサイトのQ&A・ベクターの解説などを読み、使いながら確かめていくしかないようです。
と言うわけで、判った範囲の使い方で陽だまりホームページの写真情報を作ってみます。使っていくほど奥の深さを感じるソフトです。皆さんからも使ってみていただき「ここはこんな風に使える。」「こういうことが出来た。」という情報を共有したいと思います。
ここではWebページの仕組みとこのソフトの使い方を勉強しながら、数枚の写真と説明のページを作っていきます。
作者は「智也のパパ」兼頭 武 (Takeshi Kaneto)さん。サイトは http://www1.ttcn.ne.jp/~kaneto/
他に「ベクター」のサイト http://www.vector.co.jp/ から、トップページの上の[ソフトナビ]→[キーワードナビ]タブ→[HTML] と辿って、HTML Project2をダウンロードできます。ベクターのページには「HTML Project2」の詳しい紹介文があります。
使ったバージョンは「7.3.12.0」（2004.4.9更新のもの）ダウンロードするファイル名は「hprj27312.exe」で、ファイルサイズは 1,231,348 Bytes。
| HtmlProject.exe | 実行ファイル |
| HtmlProject.hlp | ヘルプファイル |
| HtmlProject.cnt | コンテンツファイル |
| TagAttribute.ini | タグ情報ファイル |
| Readme.txt | 最初に読んでください |
| History.txt | 更新履歴 |
ダウンロードした自己解凍型の圧縮ファイルをダブルクリックして解凍するとインストーラーが起動して変更しなければ「kaneto」というフォルダの中に「HTML Project2」フォルダができその中に右のファイルが出来ます。
インストールという方法を使っていますが、「レジストリを汚さない」とReadme.txt に書かれてあります。不要になったら「アプリケーションの追加と削除」で削除します。色々設定を変更できるようになっていますが、レジストリに書き込むのではなくこのソフトを実行すると色々なテキストファイルが作られます。その中の「HtmlProject.ini」に設定が書き込まれます。「レジストリを汚さない」と言うのは後々面倒を引き起こす恐れが少ないので助かります。
画像表示のためにSusie 32bit Plug-inと文字化け対策としてnkf32.dllを別に用意すると良いとヘルプに書いてあります。私はIFGIF.SPI、ifjpeg.spi、IFPNG.SPI、nkf32.dllの4つのファイルを「HTML Project2」フォルダに入れました。
プログラムメニューから起動できますがHtmlProject.exe をダブルクリックしても起動できます。起動した画面はヘルプに掲載されてありますが部分ごとの説明はありません。起動した画面とヘルプの画面が少し違います。左側の2段になっているファイルリストと下の横に長いツリービューは独立したウインドウで移動できます。どの部分が何というのか判りませんので、メニューバーの［表示］をクリックしてサブメニューのボタンを全部クリックしてみます。チェックを外すとツールバーが消えます。全部のツールバーを消してから一つずつ表示してみます。最初に表示されていた位置とは違ったところに表示されますが、ツールバーもドラッグして移動させる事が出来ます。かなり柔軟な画面になっていることが判ります。
左側のファイルリストの上のドライブ、次にフォルダを選ぶ（ダブルクリック）と下にフォルダの中のファイルが表示されます。表示されるファイルの種類が［設定］［全般設定］［拡張子とアイコン］で決まっているようです。画像ファイルは表示されません。Webページに関係のあるファイルが表示され、ダブルクリックするとエディタ機能の編集画面に内容が開かれます。
今まで開いていた画面は「メインウインドウ」でもう一つ「プロジェクトマネジャー」という画面があります。［表示］［プロジェクトマネジャーの表示］をクリックすると表示されます。このソフトの名前にもある「プロジェクト」ですから、複数のサイトを管理する特色のある機能だと思いますが良く判りませんので、今は考えないことにします。ヘルプに
「プロジェクトファイルを使わないとき――HTML Project2は 単一ファイル管理の通常のエディタとして使用できます。この場合、他のファイルとのリンク設定はダイアログボックス形式、エクスプローラからのドラッグアンドドロップ、あるいは手動入力によって設定します。」
とあります。プロジェクトファイルは複数のサイトを管理するときに使うようです。
この項には記述が不適切の部分があります。申し訳ありませんが、HTML Projict2 を使うを参照してください。
実際にHTML Project2を使う前に次の設定をするようにヘルプに書いてありますので、設定をしておきます。
ここでまた、「サブブラウザ」「外部ツール」が判りませんがブラウザ表示が出来ないと困りますから、メニューバーの［設定］［全般設定］の［パス設定］タブで、「指定ブラウザへのパス」をInternet Explore に、「ドキュメントルート」にHTMLファイルを編集するフォルダを設定します。更に［色とフォント］タブで、編集画面のフォントサイズと文字の種類毎の色を指定します。文字の色は既定のまま使って不都合があったら変更すると良いと思います。ファイルリストに表示するファイルの種類は［拡張子とアイコン］タブで指定出来ます。その他ここで色々な設定が出来ます。ショートカットキーの設定は、メニューバーの［設定］［キー割り当て］で行います。使い慣れてきたらよく使う機能を設定すると良いでしょう。
多分規定値で設定されていると思いますが、念のためメニューバーの［設定］をクリックして、サブメニューの中の「キー入力支援」、「タグ内ダブルクリックでメニュー表示」、「前後タグ挿入時の自動選択」、「表示の自動更新」にそれぞれチェックがついていなかったらクリックしてチェックをつけます。
タグを挿入するときにダイアログボックスで属性を編集する事が出来る便利な機能があります。設定によってダイアログボックスを表示させない場合がありますので、メニューバーの［設定］［タグ挿入時のダイアログ表示］をポイントして［設定したタグのみ］か［すべてのタグ］にチェックが入っていることを確認してください。（何処で設定するのかわかりません。）
HTML Project2 の準備の他に、ページを作るテーマと写真を準備します。今までのWebページを見てどんな内容が良いか考えて選定します。例えば「ふるさと」の写真情報でしたら、その地域周辺の情報でなければなりませんし、ある程度は報道性のあるものが好ましいです。毎年同じテーマの場合は特殊性や切り口を変えると新鮮味があります。
写真は芸術性が高いに越したことはありませんが、技術的に凝ったものより情報を確実に伝えられるものが相応しい写真と思います。具体的には「何を表現したいか」「何を伝えたいか」狙いを明確に持ってシャッターを押して、狙ったものが表現されている写真が訴求力があると思います。
写真は5枚〜10枚位。それぞれに簡単な説明文を用意し、取り上げたテーマ全体を見た人が理解できるようにします。写真の大きさは320X240ピクセル位にサイズ変更して、ファイル名をxxxx1.jpg〜xxxx8.jpg（xxxxはテーマの略称 半角英数字）などとしておきます。
HTML Project2 を開くと編集画面は「新規」というタブがついた白い画面になっていて、左上に（文字）カーソルが点滅して [EOF] と表示され最初の行の下に線が引かれています。[EOF] はファイルの終わりを示している記号（…らしい）で線は現在カーソルのある（編集できる）行を示しています。
この状態から直接入力モード（半角英数）で「<」を入力して見ます。キーを打った途端にタブ自動補完ウインドウが現れ［a href=］［a name=］…とアルファベット順にタグが表示されます。続いて「h」と打つと［h1］が選択され、更に「t」を打つと「html」になります。ここで「Enter」キーを打つと［<html></html>］と閉じるタグまで入力されます。これが「キー入力支援」というものですが、同じ事をメニューバーの［ページ設定］［ルートエレメント］でも実現できます。［ページ設定］の中で続いて <head> <title> タグを入れる事が出来ます。
もっと簡単にダイアログボックスでHTMLの基本的な構造を作る事が出来ます。メニューバーの［ページ設定］［HTMLファイルの初期設定］をクリックするとダイアログボックスが現れます。右側に入力されるタグが表示されます。何もしないで［OK］ボタンをクリックすると右のように入力されます。
最初の行の <!DOCTYPE … はタグではありません。そのファイルが使っているHTMLのバージョンを宣言するものですが、宣言したら正確にそれに沿ったタグの使い方をすべきです。同じHTML 4.01でも3種類ありそれぞれ使ってよいタグと悪いタグがあります。正確に使い分ける事が困難ですから私は宣言をしないことにしてきました。（本当は書いて置かなければならないものです。）ここは削除して<html>からファイルが始まります。
この辺のことは、ヘルプの中に「とほほのWWW入門」へのリンクがあり調べる事が出来ます。インターネットに接続した状態で「とほほのＷＷＷ入門」をクリックしてサイトを見ると、［基本編］［HTMLリファレンス］［<!DOCTYPE>］とリンクを辿っていくと解説を見る事が出来ます。
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> は文字コードの指定です。Windowsのパソコンで使っているシフトJISを指定しています。<meta> タグには他にもスタイルシートを使うときやキーワードを記載して検索ロボットによるに情報収集されやすいようにするものなどがあります。（ここでも余り難しいことを考えないで先へ進みます。）
<title></title> の中にカーソルを置きページのタイトルを入力します。
例えば <title>水源地</title> です。日本語で入力したので、日本語に対応したパソコン以外は文字化けしてしまいます。この「水源地」がブラウザでページを表示したときのタイトルバーに表示されます。もし、ページをお気に入りに登録されたときは、このタイトルが表示されます。検索サイトで検索されるウェイトが高く設定されている場合が多いので、ページの内容を表している言葉をここに必ず記載するべきです。記載がなくてもページは表示されますが名前のないページを作らないようにしてください。
<body> </body> の間がページの本体です。わかり易いように改行して新しい行にカーソルを置き「見出し」を作ります。メニューバーの［タグ］［レイアウト］［第一段見出し］をクリックします。
<h1></h1> と入力されます。この中にカーソルを置いて、例えば「水源地 4月15日」と入力します。 <h1>水源地 4月15日</h1> となります。ツリービューの［ビュー］タブをクリックすると見出しが確認できます。また、メニューバーの［ツール］［IEで表示］をクリックするとInternet Explorer が起動してタイトルバーに「水源地-Microsoft Internet Explorer」と書かれたページが表示されます。
ここでファイルに保存します。保存されていなくてもブラウザで表示して確認できますが、他のファイルとのリンクを確認するときはファイルに保存されていなければなりません。メニューバーの［ファイル］［名前をつけて保存］で保存する場所を決めファイル名をつけて拡張子を「.html」 として保存します。保存する場所のフォルダ名は撮影月日を使います。（例 20040415）準備した写真のファイルもこのフォルダの中に保存します。HTMLファイルのファイル名は写真のファイルにつけたxxxx1.jpg のテーマの略称xxxxの部分を使い「xxxx.html」とします。
HTML Project2 を開いて保存したファイルを呼び出します。HTML Project2 の画面左側のファイルリストの上にあるドライブを選択し次のフォルダをダブルクリックすると下にフォルダの中のHTMLファイルが見えます。ファイルをダブルクリックすると編集画面に表示されます。
<h1>水源地 4月15日</h1>の下に空白行を作って、このページの概括的な説明文を入力します。概括的な説明文はなくても良いのですが、写真に個別につける説明文とは別に全体的な説明が必要なときに数行入れておくと良いでしょう。
入力した説明文全部を選択して、メニューバーで［タグ］［レイアウト］［スタイルコンテナ<div>］をクリックします。「スタイルコンテナ<div></div>： ブロックレベル」とタイトルバーに書かれたダイアログボッスが開きます。右側の［挿入されるタグの内容］に説明文が<div>〜</div>タブにはさまれて表示されています。左は「属性」を設定するところです。今回は［初期動作］が「何もしない」になっていることを確認してそのまま［OK］ボタンをクリックします。ダイアログボックスに表示されていたように説明文の両端にタグが表示されました。画面下のツリービューの表示を［ビュー］に変えるとブラウザで表示されるものと同じに表示されます。
ツリービューはスクロールできますし、編集画面との境界をドラッグすると大きさを変更できます。ツールバー１の［ツリービューの拡大表示］ボタンをクリックすると拡大して表示されます。また、メニューバーの［ツール］［IEで表示］でInternet Explorerで大きく全体を見表示できます。
同じ事を「６ タグを入力してみる」の最初のようにキーを打って見ます。（先ほど作ったタグを消してもう一度別の方法でタグを入れます。）
現在 <div>〜</div> タブが入っていますが、このタブの中に（説明文の中でも良い）カーソルを入れて、メニューバーの［タグ］［タグ関連ツール］［現在の前後タグの削除］をクリックすると <div> と </div> が削除され説明文が残ります。
説明文の先頭にカーソルを置いて「<」を入力します。続いて「d」「i」「v」と入力します。今回はタグの文字を全部入力しなければなりませんでしたが、ここでEnterキーを打つと「スタイルコンテナ<div></div>： ブロックレベル」のダイアログボックスが出ます。Enterキーではなく続いて「>」を打つと「<div>」が入力され説明文が続きます。この場合は説明文の最後に「終了タグ」「</div>」を入力しなければなりません。「終了タグ」の入力は入力する位置にカーソルを置いて、メニューバーの［タグ］［タグ関連ツール］［現在の位置で閉じる］をクリックするとそのタグ（例えば<div>）の閉じるタグ（この場合</div>）が入力されます。
「<」を入力したときタブ自動補完ウインドウが現れますが、スクロールして「div」をクリックしても「<div」まで入力出来ます。このようにタグの入力の仕方は色々あります。
説明文の中で行を変える必要があるところで、Enterキーで改行しただけではブラウザで見たときには行が変わっていません。改行タブ<br>を入力するとブラウザ上で改行します。このタブは閉じるタブが不要で単独で機能します。Enterキーの改行はHTMLファイルの中でソースが見やすいように適当に入れて置くと良いと思います。
写真と説明はレイアウトを崩さないようにするために2列の表を作ります。左列に写真、右列に写真の説明です。前項で作った「</div>」の後ろにカーソルを置きEnterキーを打って改行します。すると空白行の最初にカーソルがあります。メニューバーの［タグ］［テーブル］をポイントして［テーブル］をクリックすると「テーブル<table></table>： ブロックレベル」というダイアログボックスが出ます。
このダイアログボックスの下部（挿入されるタグ内容）にテーブルのタグが右のように表示されています。このまま［OK］ボタンを打てば編集画面のカーソルのあるところに右のように入力されますが、ここでは作業を続けます。
［挿入されるタグ内容］は直接ここにタグを入力しても編集画面に反映されます。
<table>〜</table> で鋏まれた間が「テーブル」といわれる罫線が見えませんが「表」です。<tr>〜</tr>が「行」で、その中の<td>〜</td>が「列」になります。この状態では1行1列で、行と列で囲まれたマス目（「セル」と言います）が１つの表です。
ダイアログボックスの［セル］タブをクリックして、［行数］［列数］の上下のスピンボタンをクリックして、行を用意した写真の枚数（例えば7）にし列を2にします。下の［挿入されるタグ内容］に<tr>〜</tr>と<td></td>が表示され、その上に表の状況が図示されます。左側の1列目の各セルに写真、右側の2列目のセルに説明文を入れれば良い訳です。
注記：ここで使っている table 要素は本来「表」に使用されるもので、この例のようにレイアウトのために使うのは間違っています。table要素を使わないで同じ様に表示させる方法を別途用意します。
「テーブル<table></table>： ブロックレベル」ダイアログボックスの［セル］タブで、上段の青空と山？のアイコンをクリックすると「埋め込み画像<img>」というダイアログボックスが出ます。<img> タグを入力する画面で、左上の「src-画像のリンク先」が選択されて右上にその属性の解説があります。このテキストボックスに画像ファイルのパスを入力するのですが、右の［…］ボタンをクリックするとドライブ・フォルダ・ファイルを指定できます。ここで写真の指定が終わるとその写真の高さと幅が自動的に入力され、次の［alt-簡単な説明］のテキストボックスにカーソルが点滅して入力を促しています。ここに入力された文字はブラウザでその写真の上にマウスを置いたときに表示される文字で「代替テキスト」と呼ばれています。ブラウザの設定で画像を表示させていない場合画像の代わりにどんな画像がそこにあるかを知らせます。視覚障害者が音声ブラウザを使うときにも役に立ちます。また、キーワードで検索されるときの対象になります。画像には必ずalt属性を記入するようにすべきです。
画像の高さと幅は元のファイルの縦横サイズが入力されています。この数字を変更すれば表示を拡大縮小できますが、縦横比を変えてしまうと画像が歪んで表示されます。この縦横のサイズを指定しないと、ページを読み込んだとき文字が先に表示されてから後で画像が表示されるとき文字の位置が移動して、読み難くなります。縦横のサイズを指定してあると、あらかじめ画像の入るスペースを確保してから文字が表示されるので文字の位置が表示されてから移動しません。
写真を入れるのに別の方法があります。「テーブル<table></table>： ブロックレベル」ダイアログボックスの［セル］タブの中段で、画像を入れるセルを選択してダイアログボックスの最下段の［エクスプローラの起動］ボタン（［OK］ボタンの左）をクリックします。エクスプローラが起動したら画像のフォルダを開き目的の画像ファイルを選択して、ダイアログボックスの画像を入れるセルへドラッグ&ドロップします。メニューが出るので「Imgタグの挿入」をクリックします。これで画像が入りますが、alt属性の代替テキストが記入されていないので再編集が必要です。
1列目に画像の入力が終わったら（入力途中でも）、ダイアログボックスの最下部「IEで表示」をクリックするとブラウザで画像を確認できます。
ダイアログボックスの［OK］ボタンをクリックすると編集画面に戻ります。alt属性の代替テキストが記入してないときは、Imgタグの属性［alt=""］の2つのダブルクォティション「""」の間に簡単な説明を入力します。
作成中のHTMLファイルがどのように表示されるか確認する方法が3通りあります。
編集画面に戻りそれぞれの写真の説明を<img>タグの入った<td></td>の次の<td>と</td>の間に入力します。ツリービューの写真を見ながら入力すると良いでしょう。
写真情報は写真が主体で説明文は「従」です。写真だけでは伝えられないものを文章で伝えます。しつこくならないように控えめで写真を盛り立てる文が書けるとすばらしいと思います。
だんだんページらしくなってきましたが、ここまででは何処のページか？誰が作ったのか？連絡する方法は？いつ作られた情報か？などが判りません。
ページを訪れて見て下さった人に提供した情報に責任を持つ意味でも、ある程度は明示しておいたほうが良いと思います。いたずら防止や安全のために住所・電話番号などは公開すべきではありませんが、連絡方法としてメールを送ってもらえるようにします。当然メールアドレスが載るのですが、ページを保存したコンピュータがウイルスに感染すると、保存されたメールアドレスがウイルスに利用されます。またＷｅｂの中のメールアドレスを回収する方法がありますので、迷惑メールが送られてくることがあります。こういう問題があっても連絡先を明示すべきだと思います。
ＨＴＭＬのタグとしては、<address>〜</address>というブロック要素のタグが用意されています。前後に改行が入り中のテキストが斜体で表示されます。
</table> でテーブルを閉じた次の行に区切りを入れるために水平線タグ <hr> を入れます。閉じるタグは不要です。
改行して次の行にアドレスタグ <address>〜</address> を入れます。手順はキーで全部入力しても良いのですが、［<］［a］［d］とに入力すると［address］が選択されますからEnterを打つとタグが入力されます。アドレスタグ <address>〜</address>の間にカーソルを置きページを登録する日付と写真撮影・ページ作成者名を例えば「2004/4/15 UP 写真撮影・ページ作成 ＮＥＴ・陽だまり 春野 花子」と入力します。
<br>と改行を入れて、次のように電子メールの連絡先を入力します。
ご連絡は<a href="mailto:hidamari@city.xxxxxxx.yyyyyy.jp">電子メール</a>でどうぞ
<a href… は、次に説明するリンクを設定するアンカータグです。 ="mailto:… は属性href の「値」で、クリックするとメーラーを開いて宛先に指定したメールアドレスを入力します。件名と本文を入力すればメッセージが出来上がります。入力の仕方は
（以下の説明のダイアログボッスは、メニューバーの［設定］［タグ挿入時のダイアログ表示・・］で［全てのタグ］を選択してある場合に表示されます。［表示しない］［設定したタグのみ］が選択されているときは、入力支援機能が働きます。次の項目「１３ リンクを作る」の別の方法２で触れています。）
そのほかの方法もありますが、次の項を参考にしてください。
リンクを辿ってこのページにやってきて、見終わったらリンクを辿って他のページへ移動できるようにしておかないと、袋小路になってしまいます。リンクを設定していないとブラウザの「戻る」ボタンで戻るかブラウザを終了するしか方法がなくなります。長いページの最初と最後に移動するリンクを作っておくと良いでしょう。
リンクは「<a>」（アンカー）タグを使います。メニューバーの［ヘルプ］［とほほのWWW入門］をクリックするとインターネットに接続してサイトが表示されます。［基本編］［逆引きレファレンス］をクリックして、更に［７リンク］［リンクするには］をクリックすると、「他のページや他のサイトにリンクするには <a> を用います。」とリンクを設定する説明が書いてあります。
「<a>」をクリックすると「HTMLリファレンス」の「<a>」のページが表示されます。［逆引きレファレンス］と「HTMLリファレンス」を使い分けると必要なタグの使い方を勉強できます。
「<a>」タグの中に色々な属性があります。ここではリンクをクリックした時のジャンプのアドレス（URL）を指定する「href=」属性を使います。ここまで調べたら入力してみます。
ページの最初に「ふるさと情報陽だまり」のトップページに戻るタグを入れます。
［とほほのWWW入門］のページを見たときに気付きましたが、ページの最初の行に例えば、
トップ > HTMLリファレンス > <a> というように、現在表示のページ（<a>）、ひとつ上のページ（HTMLリファレンス）、もうひとつ上のページ（トップ）とサイトの中で現在の位置が判るようになっていました。そして［現在表示のページ］以外にリンクが張られています。これが「パンくず」と言われているものです。
サイトが複雑になってくると「サイトマップ」や「パンくず」があった方が閲覧者に優しいサイトになります。ページ単独で作っているときの他のページとの関係は、手打ちで入力しなければなりませんが、サーバーにあるサイトのフォルダ全体がハードディスクの中にも置いてあり、その中で作業しているときは、前項のHTML Project2 の機能で相対パスを設定できます。
以上で骨組みが出来ました。サンプルファイル（suigenti1.html）のようなファイルが出来たと思います。しかし、これでは見栄えがしません。少しメークアップをして見ます。
必要な情報を探してやっと見つけてジックリ読もうとしたら、左右のフレームの中で広告画像がチカチカ動いて落ち着いて資料を読む事が出来なかった経験はありませんか。私たちが作る場合はホームページを自己満足のために作のではなく、「良く見てもらいたい」「持っている情報を見てもらいたい」のですから、ページの内容が閲覧者に判りやすく作るべきだと思います。
色の取り扱いやレイアウトのやり方で、能力とか素質とかセンス・感性といったものがあるに越したことはありませんが、そういう技術的なものより「見てくださる人の立場を大切にする気持ち」が大事だと思います。
Webページを見栄え良くするためにHTMLのタグでもある程度のことは出来ましたが、細かなデザインはスタイルシートで作るようになって来ました。以前からあったHTMLのタグの中には、スタイルシートで出来るようになってから「推奨しないタグ」になったものがあります。この辺の区別を厳密に出来ると良いのですが、今のところブラウザで許容してもらえるようですから、いい加減のところがありますがサンプルファイルを少し着飾って見ます。
なお、スタイルシートについては、少し古い（2002年）ページですが、私の作った「ホームページ作成入門」（http://www.kisnet.or.jp/s_odake/pc/hp.htm）の「１２スタイルシート」を参照してください。
スタイルシートの書き方に３つの方法があります。
<body> タグの中でダブルクリックをします。ショートカットメニューの中の［タグの再編集］をクリックすると、［<body>の再編集］ダイアログボックスが現れます。ここで［bodyの属性］の中の［bgcolor-背景色］をクリックすると、ダイアログボックスの右側にある［属性の解説］に「非推奨」と書かれています。この属性は使って使えないことは無いのですが、「好ましくない」という事です。
それで、スタイルシートを使うことにして、［汎用属性］の中の［style-スタイル］をクリックします。テキストボックスでカーソルが点滅してスタイルの入力待ちになっていますが、テキストボックスの右端の「…」ボタンをクリックします。［スタイルの編集＆登録］ダイアログボックスが現れます。
ここで、［色と背景］の［background-color］をクリックします。今度は［属性の解説］に「非推奨」という言葉はありません。［要素の背景色…IE4/IE5/IE6/N4.X/N6.2/Opera6］と対応しているブラウザが表示されています。テキストボックスの右端の「…」をクリックします。今度は［色の入力］というダイアログボックスです。
ここで背景色を選択します。作る人の好みがありますが「見やすい」事を最優先にして薄い色を選びます。ページの背景には画像を使うことも出来ますけれど、書いてある文字が読み難くなるようでは背景に使う意味がありません。ファイルサイズを軽くする意味もあり単純な色にします。16色、94色、141色、セーフカラーと4つのグループから選択できるようになっていて、セーフカラー以外の3つは色の名前でも指定できるようになっています。［16進数表現］ボタンをクリック（2回クリックしなければならないようです。）すると色の名前と「#ffffff」（白色の場合）とRGBの1色を16進数2桁で表現した表示と切り替わります。ここではセーフカラーの #ffff99 （薄い黄色）を選択します。
文字の色などは特に指定しない場合は利用者の使うブラウザの設定で表示されます。ページの中に多くの色を使うと落ち着かないページになります。文字の場合非常に読みにくくなりますので、なるべく単純に設定します。
次は［テキスト］の中の［line-heigh］をクリックします。普通ブラウザでは文章の行間が狭く表示されて、読み難くなっています。ここで行間を空けて複数行になっても読みやすいように設定します。テキストボックスの右端のスピンボタン（▼）をクリックして、「150%」をクリックします。
ここで［OK］ボタンをクリックすると、［<body>の再編集］ダイアログボックスの［style-スタイル］に background-color:#ffff99;line-height:150%; と入力されます。更に［OK］ボタンをクリックすると、編集画面の<body>タグに属性が入力されて、
<body style="background-color:#ffff99;line-height:150%;"> と表示されます。下のツリービューを［ビュー］に切り替えると背景色が薄い黄色になっているのが判ります。このままでは色が濃いと思いますので、編集画面上で #ffff99 の最後の「99」を「cc」に変更してください。#ffffccで更に薄い黄色になりました。
line-height:150%; としてもテーブルの中の文字列の行間は、テーブルで設定しなければならないようです。
次は「見出し」<h1> のスタイルを決めます。よく見られるページのタイトルは画像ソフトでロゴを作って見出しに使っています。グラデーションを使った画像が流行しています。画像の場合は大きさが決まっているので、閲覧者のウインドウの大きさやモニタの解像度が作った人のものと違う場合、作った人の意図するレイアウトが崩れてしまい、閲覧者は横にスクロールしないと全部の情報を見る事が出来なくなる場合があります。これは見出しのロゴだけでなく文章の幅を固定してしまう場合も同じです。ページを印刷すると右側に印刷できない部分が出来る場合があります。
Webページの場合作った人と閲覧する人の環境が違う場合があるのですから、ブラウザの機能で柔軟に対応できるように作ってあるのが優しいページだと思います。
そこでロゴを使わないでフォントで表示する <hx>（x は数字） です。フォントサイズをポイントなどの絶対値で指定しないで一番サイズの大きい <h1> にしてあります。フォントの種類はブラウザ任せです。
<body> のときはタグの中にカーソルを入れてダブルクリックしました。同じことですが別の方法（こちらが正統派？）で、<h1> の中にカーソルを入れてメニューの［タグ］［タグ関連ツール］［タグの再編集］をクリックすると、［<h1> の再編集］ダイアログボックスが表示されます。ここで見出しの設定をします。（最初から<h1>を入力するときに設定しておいても良かったわけです。）
［<h1> の再編集］ダイアログボックスの中で、［style-スタイル］をクリックして右側の「…」ボタンをクリックします。［スタイルの編集＆登録］のダイアログボックスが出ます。ここでスタイルを設定すると「登録済みスタイルのリスト」に登録されます。次回以降同じスタイルにするときに選択すればそのスタイルが各属性に入力されます。
今回は初めてですから［スタイルの編集＆登録］のダイアログボックスで、先ず文字の色を決めます。［色と背景］［color］をクリックして右側の「…」ボタンをクリックします。［色の入力］のダイアログボックスの上の［16色］を選択して、下の赤色［red］をクリックし［OK］ボタンをクリックします。このときに色の名前が［#ff0000］などと表示されていたら16進数表現になっていますから、［16進数表現］ボタンをクリックすると色名が表示されます。16進数［#ff0000］で入力しても差し支えありません。（この場合は以下redを［#ff0000］と読み替えてください。）
［スタイルの編集＆登録］のダイアログボックスに戻って、［色と背景］［color］に「red」と入力されています。［編集中のスタイルの内容］と「登録済みスタイルのリスト」に「color:red;」と表示されています。ここで［OK］クリックすると［<h1> の再編集］ダイアログボックスが現れて、右の［挿入するタグの内容］に「<h1 style="color:red;">」と表示されています。ここで更に［OK］ボタンをクリックすると［<h1> の再編集］ダイアログボックスが消えて、編集画面に「<h1 style="color:red;">」とスタイルシートの属性(color)と値(red)が入力されています。画面下のツリービューが「ビュー」になっていると見出しが黒色から赤色に変わっている事がわかります。
今回は文字の色だけ設定しましたが一度に色々なスタイルを設定できます。一連のスタイルが固まったものを登録済みスタイルのリストから選択すると簡単に設定が出来ます。
続いて<h1>の 別のスタイルを設定します。今度はスタイルの再編集ですから、「<h1 style="color:red;">」の「"color:red;"」の中にカーソルを置いて、メニューの［スタイル］［スタイルの再編集］をクリック（ダブルクリックしてメニューの［スタイルの再編集］をクリックしても同じ）すると［スタイルの再編集］ダイアログボックスが現れ、［色と背景］［color］に「red」と表示されています。ここに別のスタイル背景色を追加します。
ここでビューを見てみると（再編集が更新されていないときは、メニューバーの［表示］［表示の更新］かツールバーの［表示の更新］をクリック）文字の上下が詰まった感じです。再度再編集をします。
次の概括的な説明文ですが、1行の文章が長くなるとウインドウの横一杯に文字が並び読みにくくなります。文字の色を指定してウインドウの80%の幅にしてウインドウの中央に表示されるようにします。
<div> の中をダブルクリックしてショートカットメニューから［タグの再編集］をクリックし、［<div>の再編集］ダイアログボックスの［汎用属性］［style-スタイル］をクリックし、右側の「…」ボタンをクリックします。［スタイルの編集＆登録］ダイアログボックスの［色と背景］［color］をクリックして右側の「…」ボタンをクリックします。［色の入力］のダイアログボックスで例えば［#003333］の色を選びます。次に［ボックス］［margin］をクリックしてテキストボックスに「0 10%」と入力します。 <div style="color:#003333;margin:0 10%;">
表示してみて見出しと下のテーブル（写真と説明文の表）との間の間隔が無いのが気になったら、<div> と </div> を <p> と </p> に変更します。（編集画面で「div」を削除して「p」を入力） <p style="color:#003333;margin:0 10%;">………</p>
今までやってきたものと違う方法で、テーブルの大きさを80%にして中央に配置し、説明文の行間を空ける設定を <table style="line-height:150%;margin:0 10%;"> のようにします。
<table> タグの中にカーソルを置いて、ファンクションキーの［F2］を押します。［<table>の再編集］ダイアログボックスが開きました。後は今までと同じです。［汎用属性］［style-スタイル］をクリックし、右側の「…」ボタンをクリックします。［スタイルの編集＆登録］ダイアログボックスの［テキスト］の［line-height］をクリックし、右側のスピンボタン（▼）をクリックして［150%］をクリックします。（120%でも180%でもキーボードから入力できる）
続いて［ボックス］の［margin］をクリックして「0 10%」と入力して［OK］ボタンをクリックします。（スピンボタンをクリックして単位「%」を入力し後で数字を入れる方法もあります。）
水平線も画面の80% にします。 <hr style="margin:0 10%;"> ダイアログボックスを開くことも出来ますが、短いですから直接キーボードから入力してみます。
<hr> の「r」の後（右）にカーソルを置いて、半角のスペースを入れると入力支援のメニューが出てしまいます。そのままキー入力しても良いのですが、直接入力モードで［Shift］キーを押しながら［スペース］キーを打つと単にスペースが入ります。そのまま［style="］と入力すると、また入力支援が表示されます。構わないで［margin:0 10%"］とダブルクォティションまで入力して［Enter］キーを押します。<hr style="margin:0 10%;"> が入力されます。
連絡場所などの文字の大きさを小さくしてフォントに色をつけます。
<address style="color:#003333;font-size:x-small;">
ページが長い場合は一番上の「戻るリンク」をページの最後にもつけておいた方が親切と思います。右側に表示させ文字を小さくしてから、コピーして貼り付けます。
<a href="../../hidamari.html">ふるさと情報陽だまりへ戻る</a> を選択して、メニューの［タグ］［レイアウト］［スタイルコンテナ-<div>］をクリック、［スタイルコンテナ<div></div>： ブロックレベル］ダイアログボックスで、［汎用属性］［style-スタイル］をクリックし、右側の「…」ボタンをクリックします。［スタイルの編集＆登録］ダイアログボックスで、フォントサイズを「x-small」、テキストの配置を「right」に設定します。
<div style="font-size:x-small;text-align:right;"><a href="../../hidamari.html">
ふるさと情報陽だまりへ戻る</a></div>
この<div …>〜</div> を選択してコピーし、ページの下の水平線 <hr> の上に貼り付けます。
「１３ パンくず」に書いたページの１行目にサイトの中のトップページから現在のページまでのリンクは、今回は階層が深く無いので効果が少ないのですが、入れるとすると例えば次のようになります。
<div style="font-size:x-small;"><a href="../../hidamari.html">ふるさと情報陽だまり</a>水源地</div>
以上で写真情報は完成です。「HTML Project2」とHTML・スタイルシートの使い方について入り口部分の説明をしました。この程度の知識でホームページは作る事が出来ます。ホームページを作るのに難しいことは技術的なことよりも内容をどう表現するかということだと思います。
一つのページを作れば、同じレイアウトで文書と写真を入れ替えれば別のページを作る事が出来ます。このソフトではテンプレートで保存する事が出来ます。
次回ページを作るときに差し替える部分に「◆」などの記号を入れてテンプレートを作っておくと便利です。例えば「HTML Project2」の編集画面で次のようなページにして、メニューの［ファイル］［テンプレートとして保存］で「HTML Project2」フォルダの中の［Template］フォルダに適当な名前をつけて「.htt」という拡張子で保存します。ファイルはテキストファイルですからメモ帳などのエディタで平手見ることも出来ます。
このサンプルを利用するときは、［ファイル］［テンプレートを開く］で編集画面へ呼び出して◆のところへ入力して編集します。写真のスタイルの height="240" width="320" はデジタルカメラで撮った写真の縦横比になっています。トリミングなどしてサイズが変わったときは修正しないと歪んで表示されます。
***************************************** <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>◆</title> </head> <body style="background-color:#ffffcc;line-height:150%;"> <div style="font-size:x-small;text-align:right;"><a href="../../hidamari.html">ふるさと情報システム陽だまりへ戻る</a></div> <h1 style="color:red;background-color:#ffff99;text-align:center; margin:0 20%;border-style:outset;border-width:thick;height:3ex;">◆ 2004/◆</h1> <p style="color:#003333;margin:0 10%;">◆</p> <table style="line-height:150%;margin:0 10%;"> <tr><td><img src="◆1.jpg" alt="◆" height="240" width="320"></td><td>◆</td> </tr> <tr><td><img src="◆2.jpg" alt="◆" height="240" width="320"></td><td>◆</td></tr> <tr><td><img src="◆3.jpg" alt="◆" height="240" width="320"></td><td>◆</td></tr> <tr><td><img src="◆4.jpg" alt="◆" height="240" width="320"></td><td>◆</td> </tr> <tr><td><img src="◆5.jpg" alt="◆" height="240" width="320"></td><td>◆</td></tr> <tr><td><img src="◆6.jpg" alt="◆" height="240" width="320"></td><td>◆</td></tr> <tr><td><img src="◆7.jpg" alt="◆" height="240" width="320"></td><td>◆</td></tr> </table> <div style="font-size:x-small;text-align:right;"><a href="../../hidamari.html">ふるさと情報システム陽だまりへ戻る</a></div> <hr style="margin:0 10%;"> <address style="color:#003333;font-size:x-small;">2004/◆ UP 写真撮影・作成 ＮＥＴ・陽だまり ◆<br> ご連絡は<a href="mailto:hidamari@city.kashiwazaki.niigata.jp">電子メール</a>でどうぞ</address> </body> </html> ****************************************************
ここまでの写真情報を作るのにツールバーを全く使わないで、メニューバー・ショートカットメニュー・ダイアログボックス・キー入力支援でタグやスタイルシートを入力してきました。
よく使うタグや操作はツールバーを使うとメニューをクリックするより楽に操作できます。タグ挿入式のHTML エディタは、タブで区分けされたボタンでタグを挿入するものが多いのですが、このソフトの作者のサイトにある「FAQ & Tips」に右のように書かれています。
タブで区分けされていませんが、このソフトにはメニューの［表示］で判るように6個のツールバーがあり、［設定］［ツールバーの編集］でボタンをそれぞれのツールバーに設定できます。それぞれのツールバーのボタンを多く設定すると、表示する場所が限られているので、表示できないボタンができて該当のツールバーをクリックして隠れているボタンを表示させてからクリックすることになります。表示するツールバーを少なくして、よく使うボタンだけに数を制限して、設定したタグすべてを表示できるようにすると使いよくなると思います。メニューで階層が深いものをツールバーに設定すると便利になります。
メニューの［ツール］［タグの整合性チェック］をクリックすると、編集中のファイルのタグの整合性を調べます。また下のツリービューの［階層］タブを選ぶと、閉じるタグが無かったり画像の代替え文字「alt=" "」を入力しなかったりすると車両通行止のマークが表示されます。ツリービューの［属性値］タブを選ぶとリンクが切れているのがわかります。タブが正確に記入されていないと（例えば「"」（ダブルクォティション）を漏らす）と編集画面の文字の色が正常に表示されないので気が付きます。
「!」キーを入力すると今まで使ったタグが30件まで新しい順に表示され選択すれば入力されます。「'」キーを入力するとクリップボードの履歴が30件まで表示されます。また、Escキーを押すと今まで開いたファイルの履歴が出るので目的のファイルをクリックして編集画面に呼び出せます。
さらにマクロ機能もありスクリプトを書くような難しいものではなく、繰り返す作業を並べるだけで出来てしまうようです。マクロについて「パソコン遊戯」というサイトに紹介されています。
http://pasokon-yugi.cool.ne.jp/website_kouza/HTMLEditor1.html いずれ勉強します。
その他色々な機能のあるソフトです。パッケージソフトのようにWebページを作っている人が判らないうちに色々なものが出来てしまうのではなく、「自分が作っている」と実感させる親しみやすいソフトです。市販のソフトよりも実質的には高度なソフトだと思います。
たくさん機能があるから使い方も複雑になります。自分がやりたい事が出来たら満足する。更にひとつ上のやりたい事をやれるように努力する。そしてそれが出来たらまた満足する。そんなことが出来そうなソフトだと思います。
ダイアログボックスのタイトルバーに「ブロックレベル」「インラインレベル」と書かれてありました。少し面倒な話になりますが、ブロック要素・インライン要素（行内要素）とも言われるものです。
HTML文書の仕様書はW3C（World Wide Web Consortium)で作られて勧告文書として公開されています。これに基づいてHTMLが作られブラウザが対応しているから、世界中の異なった環境のコンピュータで情報を見る事が出来ます。現在のバージョンは4.01ですがその中でもHTML4.01 Strict DTD、HTML4.01 Transitional DTD、HTML4.01 Frameset DTDの3つのDTDがあり、それぞれ含まれているタグが違います。「６ タグを入力してみる」の「<!DOCTYPE …」はどのバージョンのどのDTDを使うかを宣言するところです。
正確なことは判りませんが、HTMLではページの構造を規定して、見映えや飾りなどはスタイルシートで表現する傾向になり、スタイルシートで出来る機能はHTMLでは「推奨しない」タグとなっているようです。色々な環境で利用されるのですから「推奨しない」タグは出来るだけ使わない方が良いと思います。
ブロック要素の中にはブロック要素とインライン要素を含む事が出来ます。
インライン要素はブロック要素の中に入っていなければなりません。
Bodyの要素の中に直接インライン要素を入れることは出来ません。
ややこしい話になってきましたが、正確な文書を作るとなると面倒になります。このソフトでは終了タグを忘れたなどという簡単なチェックは「２４ 色々な機能」で書きましたが、［ツール］［タグの整合性チェック］で調べる事が出来ます。
また、インターネットに接続できる環境で［ツール］［Another HTML-lint］をクリックして、Another HTML-lint のサイトが開き、文法チェックができます。エラーについて解説を読む事が出来ます。（大変勉強になります。このページをチェックしてみましたら最初は62個のエラーがあり49点の「ふつうです」。少し修正して2回目は17個のエラーで80点「よくできました」でした。解説を見ても判らないエラーがあります。）http://openlab.ring.gr.jp/k16/htmllint/htmllinte.html
チェックはWeb上のURLの指定、テキストボックスに入力か貼り付け、HTMLファイルの指定の3つの方法でできます。このサイトの利用は非営利利用の場合はフリーですが、「どうしても御礼に何かをしたい」方は「ビールを奢ってください」と、シェアウエア並みの1,155円を払い込む方法があります。
「参考までに」http://openlab.ring.gr.jp/k16/htmllint/reference.html のページでは、HTML関連の有名サイトが紹介されています。
さらに［ツール］［W3C Markup Validation Service］をクリックするとW3C本家の英文のページが開き「認証」してくれるようです。もちろん結果も英文で出るでしょうから、自信のある方はどうぞ。
別にこのソフトは外部ツールを登録してメニューバーから起動する事が出来ます。
HTML Tidy日本語版とTidyConfを「Wrong HTML 」（http://jun.mods.jp/）から別途ダウンロードしてインストールし、HTML Project2に登録しておけば、ワンクリックでHTMLの文法チェック・アクセシビリティチェックができる。…そうです。私はまだ出来ていません。…
「Wrong HTML 」は「好ましくないHTML」という名のサイトですが、内容は「正しいHTML」を作るためのサイトです。更にHTMLにXMLの拡張性を持たせたXHTML(Extensible HyperText Markup Language)への移行についても書かれています。HTMLファイルをXMLに変換するる事が出来るそうですが、正しく書かれていないとうまく行かないようです。XMLやXHTMLは難しくどんな利点があるのかわかりません。Wordで「Webページとして保存」で保存するとファイルの中に書き込まれていたり、ホームページビルダーで作ったファイルにもあったりと（…多分…）、いずれ私たちにも目に触れるようになると思います。次期HTML仕様（HTML5.0）がXHTML1.0になりますので、いまから正しいHTMLを作るように心がけなくてはと思っています。