home  >>  パソコンで楽しむ  >>  HTML Project2 を使う  >>「HTML Project2を使う」質疑応答    印刷用のページ  HTML Project2 を使う 2

HTML Project2 を使う

ーWebページ作成ー

はじめに

フリーソフト HTML Project2 を使ってWebホームページを作るためのテキストです。
昨年作りました「簡単なWebページを作る」の足らない部分を補い、別の使い方についても追々説明していくつもりです。出来たら「簡単なWebページを作る」と併せて実際に説明に従って試してみてください。
私も試行錯誤を繰り返して使っています。判らないところや間違っているところ新しい情報は相互に情報交換をお願いします。

ホームページを見るには

インターネットでホームページを見るには、Internet Explorer などのWebブラウザという種類のソフトで見ます。

Webブラウザが違ってもコンピュータの機種が違っても、細かいところが違う場合がありますが、大体同じに見えます。

これは、W3Cというところで統一した規格を作ってあって、それに従って作られたWebページを、Webブラウザで見ているから出来るのです。

W3C:World Wide Web Consortium ( http://www.w3.org/)
WWW(HyperTextによる世界規模のクモの巣状の広域情報システム)の標準化を行なう団体で、500以上の参加組織がある共同事業体(コンソーシアム)をいう。W3Cを運営する組織はMIT(マサチューセッツ工科大学)、ERCIM(欧州情報科学数学研究コンソーシアム)、SFC(慶應義塾大学湘南藤沢キャンパス)の3箇所にある。

Webブラウザは、W3Cから勧告された文書(HTML4.01など)に沿って作られたページが表示されるように作られています。

HTML4.01:W3Cから1999年12月24日にHTML4.01が勧告され、現在のブラウザが対応しています。(http://www.w3.org/TR/html401/)
ボランティアで勧告文を日本語に翻訳しているサイト
(http://www.asahi-net.or.jp/~sd5a-ucd/rec-html40j/)
や解説をしているサイト(http://www.zspc.com/html40/index.html など)があります。

ブラウザはかなり柔軟なつくりになっていると思われる(寛容に作られている)ところがありますが、場合によって細かいところが違って見えるときがあります。Webブラウザが機能を拡張していたり、対応していなかったり、Webページの作り方の違いや使っているコンピュータの機能の違いによります。今最も使われているブラウザInternet Exploer で作者の求めるページに見えても、別のブラウザNetscape やFirefox などでは違って見えることがあります。Webページを作るときは、出来るだけW3C勧告のHTML4.01に沿ったHTMLファイルを作り、なるべく常用ブラウザだけでなく別のブラウザでどんな風に見えるか確かめてみるとよいと思います。

次のサイトでInternet Exploer以外のブラウザを入手できます。
Netscape :http://wp.netscape.com/ja/
Firefox:  http://www.mozilla-japan.org/products/firefox/
Opera:   http://opera.livedoor.com/download/ 

Webページを作るには

Webページを作るのに最も大切なものは、HTMLの知識よりも作るページの内容です。私たちは情報が欲しい人に、正確な情報を正しく伝えるためにWebページを作ります。伝える情報について十分な知識があることが望ましいことです。

次に必要なものは作る人の感性です。同じ情報でもページを作る人の感性で違った見方になります。そして好みも入り出来上がったページの見え方に反映します。

伝える情報があり、ある程度の感性を持っていれば、HTMLなど面倒なことを知らなくても、ホームページ・ビルダーなどのパッケージソフトを使えばWebページを作ることが出来ます。また、Wordなどのワープロソフトやその他のアプリケーションで作ったページをWebページにすることもできます。しかし、アプリケーションの仕様に依存することになり、細かなところを自分の思うように表現するには、HTMLのタグを編集する必要があります。

タグをメモ帳などのエディタで一字ずつ入力していくのは大変ですから、入力を支援するHTMLエディタというソフトがたくさんWeb上で提供されています。

いろいろな作り方がありますが、どの方法でもHTMLファイルを作ります。ここでは、誰でも同じソフトを手に入れる事が出来るため情報を共有できる、フリーソフトHTML Project2を使います。HTMLの知識がある程度必要ですが、実際に使うタグは限られていますから、必要の都度そのタグを理解すればよいと思います。

前項で出てきたW3Cで定めたHTML4.01では、文書(の構造)を記述する方法が定められていて、その文書の表現を調整する方法はスタイルシート(CSS)として別に定められています。以前はHTMLの中でページの見栄えも編集していましたが、HTMLの中から削除されたり、「推奨しない」とされたりして消えていくことになります。これから作るWebページは、なるべくこれらの方針に沿って作ることが望ましいと思います。

(2007/4/1の現況で書かれています)

HTML Project2のダウンロード

フリーソフトHTML Projict2は次のサイト(Kaneto'HP)からダウンロードできます。

http://homepage3.nifty.com/tkaneto/  他のサイトからは?質疑応答へ移動

Topへ
  1. トップページの左側「Site Map」の「HTML Project2」をクリックします。
  2. 【ソ フ ト名】HTML Project2 ver.7.4.3.0 の下の【ファイル名】のどちらかをクリックします。
    2012/03/17公開されたバージョンは、HTML Project2 ver.7.4.6
  3. hprj2743.exe(インストーラ付) 自己解凍型で解凍と同時にインストールします。
    hprj2743.cab  解凍ソフトで解凍して適当なフォルダに保存して使用します。
                CABで圧縮されたファイルは+Lhaca1.x で解凍できます。
                バージョンが0.7や0.9では解凍できません。
    HTML Project2 ver.7.4.6では、 hprj2746.exe(インストーラ付)  hprj2746.zip  hprj2746.cab  の3種類
     解凍ソフトは?質疑応答へ移動
  4. いずれをクリックした場合でも、[ファイルのダウンロード]のウインドウが出るので、[保存]ボタンをクリックします。保存する場所にデスクトップ(あるいは適当なフォルダ)を選んで保存します。
  5. hprj2743.exe をダウンロードした場合は、保存したファイルをダブルクリックすると解凍してインストールが始まり、スタートメニューに登録してデスクトップへショートカットを作ります。元のhprj2743.exe は削除しても差し支えありません。
    HTML Project2 ver.7.4.6 の hprj2746.zip をダウンロードした場合は、解凍ソフトを使うか、Windowsの機能で解凍します。
  6. hprj2743.cab をダウンロードした場合は、デスクトップにあるhprj2743.exe のアイコンを圧縮解凍ソフト+Lhaca1.20 のアイコンの上へドラッグ&ドロップすると、解凍されてデスクトップにhprj2743というフォルダが出来て、フォルダの中にファイルが展開(解凍)されています。このフォルダを適当な場所(例えばCドライブの「Program Files」)へ移し、フォルダ名を「HTML Project2」と変更します。必要によりデスクトップにショートカットを作ったり、スタートメニューへ登録したりします。元のhprj2743.cab は削除しても差し支えありません。「CD-Rから使えない」質疑応答へ移動

nkf32.dll とSusie プラグインのダウンロード

どういう作用をするのか判りませんが、文字化け防止の妙薬?nkf32.dll(V2.0.2.3以降のバージョン)を用意すると、文字化けする文字をWindowsが使っているShift-JISに変換してくれます。そして、画像を表示するのにSusie のプラグインを使いますのでこれも用意します。
HTML Project2 ver.7.4.6では、nkf32.dllはプログラム本体に同梱されているので、ダウンロード・インストールは不要です。Susie プラグインは下記 5. 以下でインストールします。

  1. http://homepage3.nifty.com/tkaneto/ のトップページの左側「Site Map」の「DLL ・nfk32.dll」をクリックします。
  2. [使用方法]の下の 「ダウンロード(dll本体):nkf32204.zip 」をクリックします。
  3. [ファイルのダウンロード]のウインドウが出るので、[保存]ボタンをクリックします。保存する場所にデスクトップ(あるいは適当なフォルダ)を選んで保存します。
  4. nkf32204.zip を解凍ソフトで解凍して展開したファイルを「HTML Project2」のフォルダの中に保存します。
  5. 次はSusie のプラグインです。http://homepage3.nifty.com/tkaneto/ のトップページの左側「Site Map」の「リンク集」をクリックし、「関連ツール、ソフトウエアサイト」をクリックします。
  6. Susie32:いろいろな種類の画像データをWindows上で表示する画像ビューワ。
    Windows3.1のころからあるフリーソフト。
    外部プラグインが多く作られ色々なアプリケーションで利用されている。
    HTML Project2 では、JPG、GIF、PNGなどの画像ソフトに対応している。
  7. [コンパニオンツール]ページの一番上の「Susieの部屋」をクリックします。
  8. 「Susieの部屋」トップページの下の「Susi/Lhasaのダウンロード」をクリックします。
  9. 「Susieのだうんろーど」ページの中ほどの、「Pulg-ins」の「Plug-in package ver0.08 (JPEG/GIF/TIFF/Pi/PIC/Pic2/XLD4/MAG/PICT/LHA/Zip)」をダウンロードします。
    リンクをクリックすると、「spi32008.lzh」という圧縮ファイルの操作を選ぶウインドウが出ます。「名前を付けて保存」をクリックすると、パソコンに保存する場所を指定するウィンドウが出るので、適当な場所(例 デスクトップ)を指定して保存します。
  10. ダウンロードした「spi32008.lzh」を解凍すると11個の画像ビューワSusie32 のPulg-in が解凍されます。このうちifjpeg.spi(JPEG plug-in) と ifgif.spi(GIF plug-in) を「HTML Project2」のフォルダの中に保存します。「HTML Project2」のフォルダが判らない」質疑応答へ移動
Topへ

HTML Project2 の設定

このソフトは色々なところで使う人が使いやすく設定出来るようになっています。逆な言い方では上手に設定できないと思うように動かせないソフトです。ですからユーザー間で情報の交換が必要です。ここにあげた設定はごく一部で方法も一例です。使い方によっては必要ないものがあります。

1.ツールバーのカスタマイズ

メニューバーの[表示]をクリックすると、[ツールバー1]〜[ツールバー6]にチェックが入っていますが、使いやすい様に整理します。[ツールバー5]と[ツールバー6]のチェックを外し見えなくします。
HTML Project2 ver.7.4.6では、[ツールバー1]のみチェックが入っています。
[ツールバー1]にはこのソフトを操作する基本的な機能ですからそのままにしておいて、[ツールバー2]にはブロック・レベルのタグ、[ツールバー3]にはインライン・レベルのタグ、[ツールバー4]には特殊文字とタグ操作の機能というように機能別に変更します。

メニューバーの[設定][ツールバーの編集]をクリックします。[ツールバーの編集]画面の左上の[ツールバー2]をクリックすると、その下に現在設定してある機能のアイコンが並んでいます。このうち不要のものを選択して[削除]ボタンをクリックすると削除されます。

右側上にはメニューバーの項目があります。この項目を選択するとその下に項目の中の機能のアイコンが見えます。右上で[タグ]を選択して[ツールバー2]に追加するブロック・レベルのタグ(たとえば 段落-<P>)を選択して[追加]ボタンをクリックすると左側に入ります。ツールバーの中の順序は[上へ][下へ]ボタンで調整できます。[挿入]ボタンは、左側の選択したアイコンの上に挿入されます。

このようにし例えば次のようにツールバーを作ります。「ツールバーのアイコンが見えない」質疑応答へ移動。

ツールバー2(ブロック・レベルのタグ)
段落−<p> スタイルコンテナ−<div> 水平線−<hr> テーブル−<table> 番号付きリスト−<ol> 番号なしリスト−<ul> 第一段見出し−<h1> 第二段見出し−<h2> 第三段見出し−<h3> ・・・・
ツールバー3(インライン・レベルのタグ)
改行−<br> ハイパーテキスト−<a href=> 埋め込み画像−<img src=> マーカー−<a name=> スタイルコンテナ−<span> ・・・・
ツールバー4(特殊文字とタグ操作)
コメント文−<!-- --> [<]を表示 [<]を表示 [&]を表示 ["]を表示 半角スペースを表示 現在のタグを削除 現在の前後タグを削除 現在の位置でタグを閉じる・・・・
ツールバー1(基本的な機能)
[スタイルの再編集]のアイコンを作っておくと便利。

2.ファイルの種類を設定する

画面左側のファイルリストに表示するファイルの種類は、初期値ではフォルダ内にあるhtm、shtm、css、js、vbs、txt のファイルを表示していますが、画像ファイルを表示したほうが便利です。

メニューバーの[設定][全般設定]の[オプション設定]の画面で、[拡張子とアイコン]タブをクリックし、[ファイルリストの表示]の[フィルター指定]を選択して、テキストボックスの中に次のように画像ファイルの拡張子を書き加えます。 [;*.jpg;*.gif]  「入力の仕方」質疑応答へ移動

Topへ

3.起動フォルダの設定

HTML Project2 を起動したときに左側のファイルリストに表示されるフォルダを指定できますので、HTMLの編集にいつも使うフォルダ(例えば'\My Documents\My Webs')を指定しておきます。

メニューバーの[設定][全般設定]の[オプション設定]の画面で、[パス設定]タブをクリックして[ドキュメントルート]のテキストボックスに目的のフォルダのパスを入力します。テキストボックスの右にあるフォルダのアイコンをクリックすると、[フォルダの参照]画面で「デフォルトディレクトリの選択」が出来ます。[絶対参照で挿入]のチェックボックスがありますが、ここにチェックを入れるとリンク先が絶対パスで挿入されます。サイト内の場合は相対パスの方が何かと都合が良いと思いますが、パソコンの中では絶対参照を選ぶのかと思います。

4.ブラウザの設定

Internet Explorer は特に設定しなくても表示できます(ツールバー1の[IEで表示]をクリック)が、それ以外のブラウザで表示して確認するときには設定が必要です。同じHTMLファイルでもブラウザによって見え方が違うときがあります。

メニューバーの[設定][全般設定]の[オプション設定]の画面で、[パス設定]タブをクリックして[Netscap.exe]のテキストボックスにNetscap.exeのあるフォルダのパスを入力します。「3.起動フォルダの設定」と同様テキストボックスの右にあるフォルダのアイコンをクリックすると、[ファイルを開く]画面でパスの指定が出来ます。[DDEを使う]のチェックボックスがありますが、チェックするとどう違うのか良くわかりません。DDEはアプリケーション間通信のプロトコルとのことです。
Netscapではなく、例えば Google Chrome がインストールされている場合は、起動ファイル(Chr0me.exe)のフルパスを入力します。

同様に[指定ブラウザへのパス(S)ここを指定しないとデフォルトで開きます]のテキストボックスにその他のブラウザの実行ファイルをフルパスで入れます。(例えばFirefox が初期値の場所にインストールされている場合C:\Program Files\Mozilla Firefox\firefox.exe)
ツールバー1にある[(指定)ブラウザで表示](アイコンはOperaのアイコンになっています。変更する方法は判りません。)をクリックすると、編集中のファイルがFirefoxで表示されます。

Internet Explorerの表示方法を設定するときは、メニューバーの[設定][全般設定]の[オプション設定]の画面の[IE設定]タブで出来ます。

Topへ

5.外部ツールの登録

このソフトのヘルプには、HTMLを解説しているサイト[とほほのWWW入門]へのリンクがあり、作業中に参照して学びながらWebページを作られるようになっています。 「[とほほのWWW入門]の見方」質疑応答へ移動 他のサイトの解説を簡単に見られるようにも設定できます。

World Wid Web Guide HTML事典 へのリンクを設定します。

メニューバーの[ツール][外部ツール登録]をクリックして、[外部ツール登録]画面で[ツールへのパスor URL]に「http://w3g.jp/xhtml/dic/」、[表示名]に「HTML事典」と入力します。HTML Project2を再起動して、ツールバー1の[外部ツールを起動]をクリックして「HTML事典」をさらにクリックすると、「HTML事典」のページが表示されます。

同様にして[http://pasokon-yugi.cool.ne.jp/website_kouza/colortable.html]を[Safe Color]と表示名をつけて登録するとWebで使用できる色のサンプルを表示出来ます。(「パソコン遊戯」のサイトのページです。HTML Project2の[色の入力]ダイアログボックスより鮮明で判りやすい色サンプルです。)
「ページが表示出来ない」質疑応答へ移動

この機能でWebからだけでなくパソコンの中の実行ファイル(exeファイル)を起動することが出来ます。メニューバーの[ツール][外部ツール登録]をクリックして、[外部ツール登録]画面で[ツールへのパス or URL]の空白の欄をクリックしてカーソルを表示させ、上の[参照]ボタンをクリックする。[ファイルを開く]ウインドウで目的のファイルを指定して、[開く]ボタンをクリック。[外部ツール登録]画面に戻って、[表示名]に適当な名前をつけて[OK]ボタンをクリックする。HTML Project2 を再起動するとツールバーの[外部ツール起動]のアイコンをクリックで表示される。([ファイルを開く]ウインドウでファイルの種類を[すべてのファイル(*.*)]にするとexeファイル以外も見えるが、exeファイルのみ起動できる。)(この段落2006/5/25追加)

6.ファイル保存の設定

このソフトは編集中のファイルを保存しなくても、画面下の[ツリービュー]で表示を確認することが出来ます。編集が反映されてないときはツールバー1の[表示を更新]をクリックすれば最新のものに更新出来ます。しかし、保存していないとリンクなどの働きが正しく動かないことがあります。
ファイルを編集して保存してないときは、ファイル名のタブに大きいチェックマークがついて判りやすいのですが、上書き保存をしなくても表示して見るときに保存された方が便利と思うときは次の設定が出来ます。

メニューバーの[設定][全般設定]の[オプション設定]の画面の[その他]タブで、[ファイル保存時に表示を更新]と[ブラウザで表示前にファイルを保存]のチェックボックスにチェックを入れます。

注意:この設定をすると[新規作成]で新しい編集画面で何か入力して、ツリービューに表示される段階で、保存されてないと上書き保存が出来ないため「保存画面」が出ます。まだ作りかけのファイルであっても名前をつけて保存しないと、次の作業に移られません。

7.編集画面の設定

編集画面の表示は、メニューバーの[設定][全般設定]の[オプション設定]の画面の次のタブで設定出来ます。使ってみて初期値で不満のときは設定を変更します。

Topへ

8.ダイアログボックスの設定

タグを挿入するときにダイアログボックスで属性を編集する事が出来ます。使用してみて全くダイアログボックスが出ない場合や出てきて邪魔になる場合は設定を変更出来ます。

メニューバーの[設定][タグ挿入時のダイアログ表示]をポイントすると、[表示しない][設定したタグのみ][すべてのタグ]を選択できます。

[設定したタグのみ]を選択した場合、メニューバーの[設定][全般設定]の[オプション設定]の画面の[登録語句とタグ属性]タブをクリックします。[常に編集ダイアログを開くタグ]のテキストボックスを編集(タグを入力して追加または削除)するとタグを入力したときにダイアログボックスが出るのを調整出来ます。

9.HTMLファイルからHTML Project2を起動

HTMLファイルを選択してHTML Project2を起動できるようにWindowsの設定をします。

  1. マイコンピュータかエクスプローラーを起動して、メニューバーの[ツール][フォルダオプション]で[ファイルの種類]をクリックします。
  2. しばらくして、[登録されているファイルの種類]の一覧が表示されます。その中の「HTMLドキュメント」(拡張子が複数ありますが1個設定すれば全ての設定が出来ます)を選択して、下の[詳細設定]ボタンをクリックします。
  3. [ファイルの種類の編集]ウインドウで[新規]ボタンをクリックします。[新しいアクション]ウインドウの[アクション]テキストボックスに「HTML Project2で開く」と入力します。
  4. もうひとつの[アクションを実行するアプリケーション]テキストボックスに入力するため、右の[参照]ボタンをクリックしHtmlProject2.exeファイルのあるところ(インストールしたときのフォルダ)を探して、HtmlProject2.exeを選択して[開く]ボタンをクリックします。 「インストールした場所がわからない」質疑応答へ移動

例えば、次のようにテキストボックスに入ります。
  C:\Program Files\Tool\Kaneto\HTML Project2\HtmlProject2.exe  「.exe拡張子が見えない」質疑応答へ移動

この設定でHTMLファイル(拡張子が".html"または".htm")のファイルを選択して右クリックしたときに出るショートカットメニューに「HTML Project2で開く」というメニューがあり、クリックするとHTML Project2が起動してそのファイルが読み込まれます。

ショートカットメニューで単に「開く」をクリックするとHTMLファイルに関連付けされているアプリケーション(普通Internet Explorer)が起動します。

Topへ

10 その他の設定

そのほかこのソフトを使っていく上で設定しておくと便利だと思われる設定です。

ファイルビューにアイコンの表示
メニューバーの[設定][全般設定]の[拡張子とアイコン]タブで、[アイコンを表示]と[拡張子を表示]のチェックボックスにチェックを入れる。
Internet Explorer の表示
メニューバーの[設定][全般設定]の[IE設定]タブの[Internet Explorerの表示位置とサイズ]で、[元のまま]か[フルスクリーン]を選択する。
編集記号を表示
メニューバーの[設定][全般設定]の[表示と入力]タブの[特殊文字]で、[全角空白文字][半角空白文字][タブ文字][EOF][改行文字]のチェックボックスにチェックを入れる。
キー入力支援
メニューバーの[設定][キー入力支援]にチェックを入れる。半角の[<](小なり)を入力するとアルファベット順にタグのショートカットメニューが表示される。半角スペースを入力しても[キー入力支援]が起動する場合があります。そのままEnterキーを打つと半角スペースが挿入されます。
前方タグのみ挿入
メニューバーの[タグ]メニューやツールバーのボタンをクリックする時に、前方タグだけ挿入できると便利なときがあります。メニューバーの[設定][テキスト非選択のとき前方タグのみ挿入]をクリックしてチェックを入れます。これで文字列を選択したときは前後のタグが入りますが。選択しないときは前方タグだけが入ります。後方タグは[現在位置でタグを閉じる]ボタンで挿入できます。マクロで[改行間]を前後のタグで囲むことも出来ますので使い分けが出来ます。(2007/5/6 add)

HTMLの用語

美しい花を見たり鳥のさえずりを聴いたりするときに、花や鳥の名前を知っていた方がずっと親しみを感ずるし楽しくなります。Webページを作る時も使われている用語を理解している方が、理解が進みますし興味が深まります。「やりたい事が出来た」だけでなく、「こうやったからこうなった」と言えるようになりたいものです。それにしても馴染みの薄い言葉が出てくるのが悩みの種です。面倒ですからざっと見て実際にソフトを動かすことを先にやり、時折「戻って用語を確かめる」を繰り返した方がやりやすいと思います。Webには沢山情報があります。ブラウザの検索窓で知りたい言葉を入力し、スペースを1つ空け「とは」と入力して検索すれば、知りたい情報を入手できます。(2007/4/23 add)

HTML

HyperText Markup Language の略。「ハイパーテキスト」とは、「普通のテキスト(文字列、文書)にない機能を持ったテキスト」という意味。超テキストというわけですが、「ハイパーリンク(文書のある場所から別の文書の場所へ関連付け)のあるテキスト」を言います。「マークアップ」は、文書に目印をつけて(マークアップ)その部分がどんな役割を果たしているか(ワープロソフトの書式のようなもの)を示すこと。「ランゲージ」は言語というよりは「言葉遣い・言い回し方」のこと。というように見ると少し乱暴な言い方ですが「ハイパーリンクのある文書の書き方」ということになります。画像・動画とWebページは賑やかになっていますが、元はコンピュータで処理しやすい文字の並んだ文書(電子文書)が基本でした。

DTD

Document Type Definition 文書型定義 HTMLの要素やその属性を細かく定義しています。W3Cは勧告でHTML4.0から、それまでにブラウザのバージョンアップに従い、本来の文書構造だけでなく、表現を表わすタグが多く利用されてきたものを、廃止する方針を採りました。HTMLは文書の構造を規定して、表現を表すものはスタイルシートを使用することを推奨しています。HTML4.0では3つのDTDを定めています。

フレームを使うページは、Frameset DTD でHTML文書を作ることになります。直ちに使えなくなるということではないでしょうが、これから作るページには廃止予定の要素や属性は出来るだけ使わないほうが良いでしょう。

Topへ

タグと要素と属性

HTML文書は、「要素」で構成されています。要素の範囲を示すのが「開始タグ」と「終了タグ」です。範囲が明確なものは終了タグを省略出来ます。開始タグと終了タグで挟まれた部分が「要素の内容」です。「属性」は要素(タグではない)を規定しています。例えば

 <h1 style="text-align:center;>春が来た</h1>

上の行全体がh1要素です。「春が来た」が要素の内容です。<h1>が開始タグ、</h1>が終了タグ。「style="text-align:center;」が「春が来た」を中央に表示する属性です。

ブロックレベル要素とインライン要素

主なブロックレベル要素
address問い合わせ先
divブロックレベル要素化
dl定義リスト
form 入力フォーム
h1〜h6見出し
hr横罫線
ol番号つきリスト
p段落
pre整形済みテキスト
table
ul番号なしリスト
center(廃止予定)中央揃え
主なインライン要素
aアンカー(リンク)
b太字
br改行
iイタリック
iframeインラインフレーム
img画像
input入力用オブジェクト
mapイメージマップ
scriptスクリプト
small小さく
spanインライン要素化
strong強い強調
tt等幅
applet(廃止予定) JAVAアプレット
font(廃止予定) フォントサイズ色
s(廃止予定) 字消線
u(廃止予定) 下線

HTML文書の中の<body>要素の中に文章など実際にブラウザで表示する内容を書きます。その書き方に制約があって、インライン要素はブロックレベル要素の中に書くことになっています。body要素の中に直接インライン要素を書くことは出来ません。

実際にブラウザで表示させてみると、ブラウザの機能によって見え方が違いますが、間違った書き方をしていても全く表現できないということではありません。しかし、出来ることなら正しく書きたいものです。

表現を決めるタグは廃止される方向で、スタイルシート使用が推奨されるのですが、インライン要素にb(太字)・i(イタリック)・small(小さく)・tt(等幅)などが残っています。これらも非推奨ではないがスタイルシート使用が推奨されています。また、iframe(インラインフレーム)はFrameset DTD か Transitional TDT を使用の場合です。ブロックレベル要素にフレーム関係がありません。ブロックレベル要素は<body>要素の中に書かれるもので、<frame>要素は<html>要素の下に書き<body>と同列になります。

スタイルシート

正式にはカスケーティング・スタイルシートCascading Style Sheet(CSS)といいます。「カスケード」は、「滝・(電気の)直列(縦つなぎ)・段階的に行う」などの意味があります。実例の方が判り易いと思います。

body  {background-color:#ccffcc;}
h1   { color:red; text-align:center;}
h2   {color:#0033ff; text-align:center;}
p    {line-height:150%;}

メモ帳などのエディタで次のような文字を入力してテキストファイルを作り、拡張子を[.CSS]として保存します。(ファイル名は例えばstyle.css)

HTMLファイルの<head>要素の中に
<link rel="stylesheet" type="text/css" href="style.css"> と書きます。

すると、<body>タグの中に属性を書かなくても背景色が表示されます。そのページの中に<h1>、<h2>、<p>要素を何回使っても同じように表示されます。また、別のHTMLファイルの<head>要素の中にこのCSSファイル"style.css"にリンクすることを書けば、同じ見え方のページを作ることが出来ます。

<head>要素の中にその文書(ページ)だけのスタイルシートを設定することが出来ますし、特定の要素のタグに属性として書き込めば、その要素のみに適用させることも出来ます。

Topへ

HTML Project2の画面

ファイルリスト

HTML Project2を起動したときに左側に縦にあるウインドウが「ファイルリスト」です。メニューバーの[表示][ファイルリスト]をクリックすると表示しなくなります。編集画面を広く使いたいときに消しておくことが出来ますが、いろいろなファイルを呼び出して編集するときは表示させておいた方が便利です。「起動フォルダの設定」によりHTML Project2を起動したときにファイルリストに表示されるフォルダを指定できます。

ファイルリストは独立したウインドウです。大きさや位置を変更出来ます。ファイルリストの上辺にマウスポインタを置き「十字の矢印」になったときにそのままドラッグすると移動出来ます。また、編集画面との境にマウスポインタを置き「左右の矢印」になったときにそのままドラッグすると大きさを変えることが出来ます。

ファイルリストの上部には[一つ上の階層へ][デスクトップ][マイドキュメント]へ移動したり[エクスプローラー]を起動したりするボタンが用意されています。ファイルリストでフォルダを選択して[お気に入りに追加]ボタンをクリックすると、[お気に入りへ移動]ボタンをクリックしたときの一覧に登録されます。[お気に入りへ移動]で目的のフォルダをクリックしてファイルリストにそのフォルダを表示させることが出来ます。

お気に入りに登録されたフォルダを削除する時は、HTML Project2 が保存されているフォルダの中にある[Setting]フォルダ中の[FavoriteDir.txt]を開き削除できる。

 
Topへ

ツリービュー

下の横に長いウインドウは「ツリービュー」です。メニューバーの[表示]の[ツリービュー]をクリックすると表示しなくなります。表示してないときに[ツリービュー]をクリックすると表示します。ツールバー1の[ツリービュー拡大表示]をクリックすると、編集画面・ファイルリスト・ツリービューの部分が全部ツリービューとして大きく表示されます。

ツリービューの下の[階層][属性値][ビュー][検索]のタブで表示を切り替えることが出来ます。ツールバー1の[ツリービューの切り替え]をクリックすると順に切り替えます。

[階層]タブをクリックすると編集中のページのタグが階層に表示され、終了タグが洩れているなどの問題があるところに赤いマークがついて警告します。そこをダブルクリックすると編集画面の問題のある近くへカーソルが移動します。

ツリービューの[ビュー]タブをクリックすると、編集中のページが表示されます。編集画面の編集結果が即時反映されますが、反映されないときもあります。反映されていないときにツールバーの[表示の更新]をクリックすると反映します。「ファイル保存の設定」により逐次反映するようになります。

検索を実行するときに[検索]タブを開いていると、検索実行後ツリービューに検索したキーワードを含む行が行番号をつけて表示されます。目的の行をクリックすると編集画面でその場所へカーソルが移動します。

ツリービューは独立したウインドウです。大きさや位置を変更出来ます。ツリービューの左辺にマウスカーソルを置き「十字の矢印」になったときにそのままドラッグすると移動出来ます。また、編集画面との境にマウスポイントを置き「上下の矢印」になったときにそのままドラッグすると大きさを変えることが出来ます。

編集画面

HTMLやCSS文書を編集する場所です。エディタですからTEXTファイルも編集出来ます。ファイルリストのファイルをダブルクリックするとそのファイルを編集画面に開くことが出来ます。また、ブラウザやメーラーの文書やファイルリストのファイルをドラッグ&ドロップで編集画面にコピー出来ます。

同時に複数のファイルを編集画面に開くことが出来、ファイル表示タブによって切り替えられます。メニューバーの[設定][全般設定]の[マージン]タブの[ファイル表示タブ]で、ファイル名が書かれたタブの位置を編集画面の上だけでなく、下に表示させたり、タブではなくボタンにしたりすることが出来ます。

多数のファイルを開いて編集しているとき、ファイル表示タブをドラッグ&ドロップして移動させ関連するファイルを隣接させることが出来ます。

Topへ

メニューバー・ツールバー

画面上部のメニューバーとツールバーなどは、メニューバーの[表示]でそれぞれのバーにチェックを入れると表示出来ます。それぞれのバーの左端をポイントして、マウスポインタが十字の矢印になったときドラッグして移動出来ます。

アドレスバーとクイック検索バー以外のバーは、全てのボタンを表示できるスペースがないとき、左側のボタンを表示出来ないことがあります。そのとき非表示の部分に「>>」印が表示されています。ここをクリックすると下方に非表示の部分が表示されます。なるべく使わないバーやボタンは表示させないで、全てのボタンが見えるようにした方が使いやすいと思います。[HTML Project2の設定][ツールバーのカスタマイズ]参照。

クイック検索バーのプルダウンリストには、過去に検索した履歴が表示されます。その中から探すキーワードを選択すると、編集画面の該当の文字が反転します。同時にツリーバーの[検索]タブにも該当の文字のある行が表示されます。

マクロを作る

HTML Project2には、「写真情報の作成」で使ったキー入力支援機能の他にマクロ機能があります。マクロといってもExcelなどのようにコードを書く難しいものではなく、メニューバーのコマンドを作業手順に並べて実行するもので、一度作っておくとタグを入力するときに便利です。

この方法は「パソコン遊戯」パソコン遊戯のバナーのサイト http://pasokon-yugi.cool.ne.jp/website_kouza/ を参考にしました。このページの講座はWebを作る初心者に非常に役に立つ情報を判りやすく書いてあります。このHTML Project2を紹介しているところは「HTMLエディタを使ってみよう」http://pasokon-yugi.cool.ne.jp/website_kouza/ です。
サイトが閉鎖されたようでこれらのリンクをクリックしても表示されません。

 
Topへ

実際に使うタグは多くない

Webページを作るのに「画像を用意する」「ロゴマークを作る」「挿入する音楽ファイルを探す」などが目立ちますが、情報の基本はテキスト(文字の文書)です。何を伝えるか文章をしっかり作って、それを読みやすくマークアップするのがWeb作りの基本です。ここでは次のような手順を想定してブロックレベル要素の設定を行う簡単なマクロを作ります。

伝える情報の文書を作る → HTMLファイルの基本設定
→ ブロックレベル要素を設定→ インライン要素を設定
→ スタイルシートを設定

私たちがWebページを作るのに使用するタグは限られています。Webページの骨組みになるブロックレベル要素のタグの入力を簡単にするマクロを作ります。ブロックレベル要素の中にインライン要素を入れて、必要に応じてそれぞれのタグの属性やスタイルシートを編集します。

<h1>(第一段階の見出し)のマクロ

2004年に作った「簡単なWebページを作る」では、タグを入力するときには、まず「<」を入力してキー入力支援機能を使いました。ツールバーのボタンを使うときは、例えば「春が来た」という文字列を選択してツールバーの[h1]のボタンをクリックします。ここで作るマクロは、カーソルを「春が来た」の中(中であればどこでも良い。見出しですから「春が来た」の前後に改行が必要)に置いて、登録したマクロボタンをクリックすれば、<h1>春が来た</h1> と「春が来た」の前後にタグがはいります。「選択する」か「クリックする」かの違いだけですが、よく使う<p>(段落)や<ol>(順序付きリスト)等のときは効果があります。

  1. HTML Project2のメニューバーで[ツール][マクロの登録]をクリックする。
  2. [マクロの編集&登録]ウインドウで左側の[登録名]のリストボックスに「h1」と入力する。
  3. 右上の[検索]を選択(クリック)する。
  4. 右下の[現在の改行間]を選択(クリック)する。
  5. 中央の[追加]ボタンをクリックする。
  6. 続いて右上の[タグ]を選択(クリック)する。
  7. 右下の[第一段見出し−<h1>]を選択(クリック)する。
  8. 中央の[追加]ボタンをクリックする。
  9. [OK]ボタンをクリックする。

以上で<h1>の「現在の改行間」を選択して「第一段見出し」のマークアップというパターンのマクロが出来ました。ウインドウの左に[現在の改行間][第一段見出し−<h1>]と表示されています。マクロを実行すると上から順に実行していきます。

マウスでメニューバーの[検索][選択][現在の改行間]→[タグ][レイアウト][第一段見出し−<h1>]と操作することを一度に実行するのです。

メニューバーの[表示]で[マクロツールバー]にチェックが入っていれば、[h1]ボタンが見えるはずです。

 
Topへ

〜h6、p、div、address、preなどのマクロ

メニューバーで[ツール][マクロの登録]をクリックして、[マクロの編集&登録]ウインドウの中央[新規]ボタンをクリックすると、前に設定したものが消えますから、上と同じようにして、他のブロックレベル要素のマクロを作ります。

開始タグ登録名検索タグ
<h2>h2[現在の改行間][第二段見出し−<h2>]
<h3>h3[現在の改行間][第三段見出し−<h3>]
<h4>h4[現在の改行間][第四段見出し−<h4>]
<p>p[現在の改行間][段落−<p>]
<div>div[現在の改行間][スタイルコンテナ−<div>]
<address>add[現在の改行間][著者の情報−<addrss>]
<pre>pre[現在の改行間][整形済みテキスト−<pre>]

<pre>要素の「整形済みテキスト」は、複数行あるのが普通ですから、[現在の改行間]でマクロを作るのは無理があります。「パソコン遊戯」の作者は<pre>要素のマクロを使っておられるようですので、別の方法があるのかもしれませんが、ここでは諦めてHTML Project2 の機能で範囲を選択して、[タグ][レイアウト][整形済みテキスト]かツールバーを表示して<pre>要素を使うことにします。(2006/8/21修正)

dl、ol、ulのマクロ

要素の中で改行が必要な定義リスト<dl>、順序付きリスト<ol>、順序なしリスト<ul>は少し違います。

先ず、HTML Project2 に用意されていない「改行」を[登録タグ]に登録します。

  1. メニューバーの[登録タグ][タグの登録]をクリックする。
  2. [タグの登録]ウインドウで空白行の[登録名称]に「改行」と入力する。
  3. 同じ行の[後方タグ]に「\n」と入力して、[OK]ボタンをクリックする。

つぎにマクロ登録をします。(定義リスト<dl>の例)

  1. HTML Project2のメニューバーで[ツール][マクロの登録]をクリックする。
  2. [マクロの編集&登録]ウインドウで中央[新規]ボタンをクリックし、左側の[登録]のリストボックスに「dl」と入力する。
  3. 右上の[検索]を選択(クリック)する。
  4. 右下の[現在の空白行間]を選択(クリック)する。
  5. 中央の[追加]ボタンをクリックする。
  6. 右上の[タグ]を選択(クリック)する。
  7. 右下の[定義リスト−<dl>]を選択(クリック)する。
  8. 中央の[追加]ボタンをクリックする。
  9. 右上の[登録タグ]を選択(クリック)する。
    ([登録タグ]は2ヶ所にある。下の[登録タグ]を選択する。)
  10. 右下の[改行]を選択(クリック)する。
  11. 中央の[追加]ボタンをクリックする。
  12. [OK]ボタンをクリックする。

ol、ulも同様にして登録します。

この3つのマクロがうまく動くようにカーソルの位置の設定をしておきます。

  1. メニューバーの[設定][編集後のカーソル]をポイントして、[編集部分の後ろへ移動]をクリックする。
  2. メニューバーの[設定][前方タグ内最後にカーソル移動]のチェックを外す。
 
Topへ

htmlのマクロ

前方タグ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>◆</title>
</head>
<body>
注:スタイルシートのファイル名は、同じフォルダ内のstyle.cssとしてあります。
必ず書かなければならないtitleをマクロ実行後◆に入力します。
HTML4.01 Strict DTDを宣言しています。

後方タグ
</body>
</html>

ページ全体の設定でメニューバーの[ページ設定]でも出来ますが、クリック1回で文頭・文末に必要なタグを入力することが出来ます。先ずタグの登録をします。

  1. メニューバーの[登録タグ][タグの登録]をクリックする。
  2. [タグの登録]ウインドウで空白行(既に作ってある「改行」の次の行)の[登録名称]に「html」と入力する。
  3. 同じ行の[前方タグ]の中をクリックして、下の広いところに右のように入力する。(コピー&貼り付けをすれば簡単)
  4. [後方タグ]にも右のように入力して[OK]ボタンをクリックする。

次はマクロの登録です。

メニューバーで[ツール][マクロの登録]をクリックし中央[新規]ボタンをクリックして、[編集]の[すべて選択]→[登録タグ](下の方)の[html] で登録出来ます。作ったマクロが動かない?質疑応答へ移動

登録したマクロの使い方

例えば、下のような文章があります。(柏崎市老人クラブ連合会編 「語り継ごう 柏崎の知恵ぶくろ」より)
この文章をHTML文章にしてみます。

語り継ごう柏崎の知恵ぶくろ
■1章■健康に関すること
 以前は、薬は大変高価なものだったので、身近な材料を使って代用しました。これがまた、なかなかよく効くのです。現在でも十分使えるものが、たくさんあるのではないでしょうか。
▼風邪▲
・風邪ひきには卵酒がよい。
※作り方:・・酒を温めて、卵一個と砂糖大さじ一杯をいれてよく混ぜ、火を止める。
・風邪で熱の高いときは、くず湯を飲んで水分と栄養を補給する。
※作り方:・・大さじ一杯ずつのくず粉(片栗粉)と砂糖を少量の水でとき、熱湯を注いでよく混ぜる。
・初期の風邪には、おろしニンニク、味噌少々、かつお節に熱湯を注いで飲むと汗が出て熱が下がる。
・初期の風邪には、ネギの白い部分をきざんで味噌、生姜のすり下ろしを加え、熱湯で溶かして熱いうちに飲むと頭痛、鼻づまりに効く。
・寒けがする時は、生姜湯を飲むと温まり、風邪の予防になる。
※作り方:・・すり下ろした生姜小さじ1/2杯と砂糖適宜(好みによる)に熱湯を注ぐ。
・梅干しに熱い湯を入れて飲むと、汗が出て風邪がなおる。
・梅干しの果肉を煮つめて飲むと、風邪からの下痢が治る。
・頭痛のとき、梅干しをこめかみにはるとよい。
 
Topへ

HTML Project2 を起動した状態では編集画面は「新規」の何もない白いページになっています。もし何か編集中の場合はツールバーの「新規作成」をクリックして、編集画面に「新規」の何もない白いページを表示させます。「新規」のページは左上に文字カーソルが点滅していて文字を入力できる状態になっていますから、上記の文章を入力します。全文キーを打って入力するのは大変です。上記文章をドラッグして選択してコピーし「新規」編集画面へ貼り付けます。(ドラッグ&ドロップでもコピーされる筈です。)

すると「名前をつけて保存」のウインドウが出てファイルとして保存するように促します。キャンセルしても取り消しが出来ないようになっています。ほかの作業は出来ません。これは「表示前にファイルを保存する」設定をしてあるためで、例えば「tiebukuro.html」と名前をつけて保存します。編集画面の「新規」と表示されていたタブが「tiebukuro」に変わります。

このままでは下のツリーバーのビューで見ても、文字がピッシリ並んでいるだけで改行が入っていません。編集画面にある改行は、ブラウザでは無視されて一行の文字列になっています。

これからHTMLのタグをマクロを使って入れてみます。マクロを使わなくてもタグの必要な場所でタグを入力しようとすると、このソフトの入力支援機能が働いて楽に入力できるようになっています。(「簡単にWebページを作る」参照)

文書の最初に
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<link rel="stylesheet" type="text/css" href="style.css">
<title>◆</title>
</head>
<body>
と入り、最後に
</body>
</html>
と入ります。

tiebukuro.htmlの文章の中(どこでも良い)をクリックしてカーソルを表示させて、マクロツールバーの「html」をクリックします。
メニューバーの[ツール][マクロの実行]をポイントして[html]をクリックでも、ツールバーの[マクロの実行][html]でも同じです。

それぞれのタグの説明は次の項でします。兎も角これでHTML文書になります。

先ず最初にHTML文書に必須の「タイトル」を入力します。これはブラウザで表示した場合タイトルバーに表示されます。閲覧者がお気に入りへ登録するとこのタイトルが表示されます。検索サイトのロボットが収集する重要なキーワードになります。

<title>◆</title>の◆の部分に「柏崎の知恵ぶくろ」と入力します。

続いて、最初の「語り継ごう柏崎の知恵ぶくろ」の中にカーソルを置いてマクロツールバーの「h1」をクリックします。「語り継ごう柏崎の知恵ぶくろ」を<h1>と</h1>が挟みます。これが一番大きい見出しです。

「■1章■健康に関すること」は二番目の見出しにします。「■1章■健康に関すること」の中にカーソルを置いてマクロツールバーの「h2」をクリックします。

次は、「以前は、薬は大変高価なものだったので、・・・」の段落の中にカーソルを置いて、マクロツールバーの「p」をクリックします。ツリービューで見ると第一第二の見出しが大きい文字で、次に「以前は・・・」の段落が表示されて、タグを入れてないところは文字がべたに並んでいます。

続いて「▼風邪▲」は三番目の見出し「h3」にします。

「・風邪ひきには卵酒がよい。」以下は、箇条書きになっているので「番号なしリスト−ul」のタグを入れます。

  1. 最初の「・風邪ひきには卵酒がよい。」の前と最後の「・頭痛のとき、梅干しをこめかみにはるとよい」の後に改行を入れて空白行を作ります。(空白行間にリストの部分があります。)
  2. リストの部分にカーソルをおいてマクロツールバーの「ul」をクリックします。
  3. [番号なしリスト: ブロックレベル]ダイアログボックスが現れます。
  4. [番号なしリスト: ブロックレベル]ダイアログボックスで、左上の[ulのtype-マークの種類]にカーソルがあり入力できるようになっています。このダイアログボックスでいろいろな属性を設定できますが、再編集できますので、このまま[OK]ボタンをクリックします。ビューで見ると初期値で黒い●が行頭についてリストが出来ています。
  5. 「※作り方:・」の行が3行ありますが、これは上の行の説明ですから、行頭の黒い●を削除します。「※作り方:・」の行の中にカーソルを置いて、ツールバー4の[現在の前後のタグを削除]をクリックします。
  6. 上の行の行末にある閉じるタグ</li>の中にカーソルを置いて、ツールバー4の[現在のタグを削除]をクリックします。ビューで見ると「※作り方:・」の行が上の行につながって見えます。
  7. カーソルをそのままにしておいて、ツールバー3の[改行−<br>]をクリックします。改行され「※作り方:・」の行が下に移ります。
  8. 「※作り方:・」の行の行末にカーソルを置きツールバー4の[現在位置でタグを閉じる]をクリックします。
  9. 5.〜8.を3箇所実施します。
  10. 「※作り方:・」の前にカーソルを置き全角のスペースを入れます。
  11. 元の原稿にあった小さい黒丸を削除します。
Topへ

タグの説明

これまでに使われたタグの説明を簡単にします。詳しくは解説書籍や外部ツールに登録した「とほほのWWW入門」などのサイトで調べてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML文書では、文書中で使用しているHTMLのバージョンを宣言する必要があります。正確には右のように書くのですが、URLを省略しています。「HTMLの用語−DTD」で説明してある3つのDTDの中で、フレームと廃止予定の要素を使わない[Strict DTD]に準拠していることをここで宣言しています。(Strict: 厳格な・正確な・完全な)

もし、フレームを使う場合は、Frameset DTDを宣言しなければならないし、フレームは使わないが廃止予定の要素は使う場合はTransitional DTDを宣言しなければなりません。宣言した場合その内容に従った文章にしなければなりません。 「Transitional DTDとFrameset DTDの宣言の仕方」質疑応答へ移動

<html lang="ja">〜</html>

htmlは、HyperText Markup Language の略。この要素の内容が HTML 文書であることを示します。 HTML 文書には、<title>〜</title> がなければなりません。開始タグの中の属性[lang="ja"]は、日本語を使用することを示しています。

<head>〜</head>

ヘッダ。文書のタイトルや文書全体に関する指定などのデータを書きます。

<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">

メタ。METAinformation(メタ情報)の略。後から追加される情報と言う意味でしょうか?
終了タグがありません。

http-equiv="content-type"はHTTPヘッダ名を指定し、content="text/html; charset=Shift_JIS"は内容を指定します。これで文字コードにShift_JIS(シフトJIS)を使っていることを宣言しています。こうすることによって文字化けすることを防ぎます。

他にmetaは、スタイルシートの基準言語の指定、文書の著者を明記、文書に関連するキーワードの指定、検索ロボットの制御、イメージツールバーの無効化などの機能があります。「meta要素の属性の説明」質疑応答へ移動

<link rel="stylesheet" type="text/css" href="style.css">

リンク。外部スタイルシートを指定しています。この場合この文書のあるフォルダの中にある(まだ作ってありません)style.cssで設定してあるスタイルがこの文書に適用されます。

<title>〜</title>

タイトル。HTML文書は<html>、<head>、<body> は省略可能ですが、<title> は省略出来ないことになっています。ブラウザのツールバー、履歴やお気に入り、検索エンジンの検索結果などで表示されます。検索ロボットが収集するキーワードのウェイトが高いと言われています。

<body>〜</body>

この要素の内容に本文を書きます。HTML文書中に1個の<body>要素を書きます。中に包含する要素はブロックレベル要素で、インライン要素で直接入れられるものはHTML4.01 Strict の場合<script> のみです。

<h1>〜</h1>、<h2>〜</h2>、<h3>〜</h3>

Heading(見出し) 見出しのレベルは h1〜h6 まであり、h1 が一番大きな見出。単にフォントの大きさを変更する目的では使うべきではありません。インライン要素のみ包含出来ます。

<p>〜</p>

Paragraph(段落) 一つの段落をあらわします。インライン要素のみ包含出来ます。(ブロックレベル要素を中に入れることは間違い。)Internet Explorer では1行空けて表示されます。(スタイルシートでつめることが出来る。)

<ul>〜</ul>

Unordered List(順序の無いリスト) 順序つきリストは<ol>で、1・2・3などの順序が付きますが、<ul>は黒丸・白丸・四角のマークが行頭につきます。項目の<li>要素のみ包含出来ます。

<li>〜</li>

List Item (リストの項目) ブロックレベル要素とインライン要素を包含出来ます。

<br>

Break(改行) 強制的に改行を行います。行末で使い終了タグがありません。

 
Topへ

ツールバーから作業をする

「登録したマクロの使い方」で作った「語り継ごう柏崎の知恵ぶくろ」をマクロを使わないで作る場合について考えて見ます。メニューバーで作る方法は「簡単なWebページを作る」で説明してあります。メニューバーからコマンドを選ぶのをツールバーのアイコンでやれます。

HTMLの基本的な構造のタグは、ツールバーに用意してありませんので、メニューバーを使います。メニューバーの[ページ設定][HTMLファイルの初期設定]をクリックすると、[HTMLファイルの初期設定]ダイアログボックスが現れ、「登録したマクロの使い方」で使ったマクロツールバーの[html]をクリックしたときよりも多くの設定が出来ます。<title>要素は必須ですから「柏崎の知恵ぶくろ」と入力します。

<body>要素の内容に文章をコピーして、第一段見出しの「語り継ごう柏崎の知恵ぶくろ」をドラッグして選択して、ツールバー2の「第一段見出し−<h1>」をクリックすると、前後に<h1>〜</h1>が入ります。

同じようにして「対象を選択して」から、「ツールバーのボタンをクリック」します。順序のないリストの場合前後の空白行をあける必要はありません。リストの部分を選択すればマクロと同じことが出来ます。マクロの場合は選択する必要がないだけです。もともと、メニューバーのコマンドを並べて実行しているだけですから特別なことはありませんが、段落などの数が多くなるとマクロの便利さがわかります。

マクロメニューバーツールバーとキー入力支援機能を使い分けてこのソフトを使い込んでください。きっとこのソフトを手放すことができなくなります。

スタイルシートを使う

かなり古いですが、私のサイトの「ホームページ作成入門」に簡単な説明がありますので参考にしてください。
http://www.kisnet.or.jp/s_odake/pc/hp.htm

ここまでの「柏崎の知恵ぶくろ」は、ブラウザで見ると白地に見出しやリストの整形がしてあっても黒の文字が並んでいるだけの文書です。文字通り文書の構造だけ設定してあるHTML文書です。これから少し表示の設定をして飾って見ます。

スタイルシートには、3つの書き方があります。

外部ファイルを作り、HTML文書に読み込む方法。これはHTML文書でリンクの設定をしておけば、外部ファイルで設定されているスタイルシートが、その文書に適用されます。部分的に別の設定したいときはHTML文書に書き込めば外部ファイルより優先されます。複数のページに同じスタイルシートを適用したいときに便利です。また他のページに流用が出来ます。

HTML文書内に埋め込む方法。HTML文書の<head>の中にスタイルシートを書き、そのページの表示を既定します。外部ファイル読み込む設定と競合するときは、HTML文書内埋め込みの方が優先します。

インラインに埋め込む方法。それぞれの要素の属性としてタグの中に書き込みます。この方法がもっとも優先順位が高くなります。それぞれのタグに書かなければなりませんので、沢山使うタグの場合には適しません。

body {background-color:#ccffcc;}
h1 { color:red; text-align:center;}
h2 {color:#0033ff; text-align:center;}
p {line-height:150%;}

ここでは外部ファイルを作ってみます。HTML Project2の新規編集画面で、 (メモ帳などのエディタでも良い)次のように半角英数文字で入力して行末で改行します。ファイル名は[style.css]として「柏崎の知恵ぶくろ」のファイル(例えばtiebukuro.html)と同じフォルダに保存します。tiebukuro.htmlの<head>にはリンクが書かれていますから、ブラウザで見ればスタイルシートが適応されて表示される筈です。「表示が変わらない」質疑応答へへ移動

少し見栄えが良くなりましたが、個々の説明は後にして少しインラインに埋め込む方法で変更してみます。

 
Topへ
  1. tiebukuro.htmlの<ul>のタグの中にカーソルを置いて、ツールバー1の[タグの再編集]をクリックします。
  2. [<ul>の再編集]ダイアログボックスが出ますから、[汎用属性][Style−スタイル]をクリックします。
  3. テキストボックスが開くので右の[…]ボタンをクリックします。
  4. [スタイルの編集&登録]ウインドウで、[テキスト]の[line-height]をクリックします。
  5. テキストボックスの右のボタンをクリックして、現れたリストの中の[150%]を選択(クリック)します。
  6. 右の[編集中のスタイルの内容]に「line-height:150%」と現れます。[OK]ボタンをクリック。
  7. [<ul>の再編集]ダイアログボックスに戻って、右の[挿入されるタグの内容]に[<ul style="line-height:150%;">]と表示されているのを確認して、[OK]ボタンをクリック。

これで、リストの部分の行間が少し広くなり読みやすくなりました。

次は<p>の部分です。元の文章ではこの部分は囲んでありました。

  1. <p>のタグの中にカーソルを置いて、ツールバー1の[タグの再編集]をクリックします。
  2. [<p>の再編集]ダイアログボックスが出ますから、[汎用属性][Style−スタイル]をクリックします。
  3. テキストボックスが開くので右の[…]ボタンをクリックします。
  4. [スタイルの編集&登録]ウインドウで、[色と背景]の[color]をクリックします。
  5. テキストボックスが開くので右の[…]ボタンをクリックして文字の色に[#336633]を選択します。
  6. 同じウインドウの[色と背景]の[background-color]をクリックし、背景に[#ccffff]を選択。
  7. 下の[ボックス]で[magin]のテキストボックスに[0 20%](中に半角のスペース)、[Padding]のテキストボックスに[1xe]と入力。
  8. 同じく[ボックス]の[border-style]に[inset]選択して、[OK]ボタンを2回クリック。

<p style="color:#336633;background-color:#ccffff; margin:0 20%;padding:1ex;border-style:inset;">と

style属性が書き込まれました。

ブラウザで見ると、▼風邪▲以下が画面一杯に広がっていますので、左右に10%の余白を取って中央80%の部分に表示させます。

  1. <body>のタグの中にカーソルを置いて、ツールバー1の[タグの再編集]をクリックします。
  2. [<body>の再編集]ダイアログボックスが出ますから、[汎用属性][Style−スタイル]をクリックします。
  3. テキストボックスが開くので右の[…]ボタンをクリックします。
  4. [スタイルの編集&登録]ウインドウで、[ボックス]で[magin]のテキストボックスに[0 10%](中に半角のスペース)を入力。
  5. [OK]ボタンを2回クリック。

これで <body style="margin:0 10%;"> となります。

ブラウザで全体を見て好みで見栄えを調整出来ます。ブラウザやディスプレイによって同じファイルでも見え方が違いますが、色のバランスが見栄えに大きく影響しますのでいろいろな色で試し見てください。画像ファイルを全く使わなかったのですが、文字だけでも見やすく情報を伝えることが出来ます。

Topへ

スタイルシートの説明

スタイルシートの書き方

スタイルシートを外部ファイルに書く場合とHTML文書内に埋め込む場合は、同じ書き方になります。  h1  {color:red; text-align:center;}  は、第一段階の見出しの「文字の色が赤で、位置が中央」を定めています。この場合 h1 は、[h1要素(element)のセレクタ(selector)]と言います。セレクタはコンマで区切って複数同じ宣言をすることが出来ます。

中括弧でくくられ、中央がコロン(":")で区切られた {color:red} は宣言(declaration)と言います。コロンで区切られている左側の("color")は、属性(property)と言い、右側の("red")は、値(value)と言います。宣言はセミコロン(";")でつないで続けて書くことが出来ます。最後にセミコロンをつけているのは、宣言を追加するときの用意のようです。省略出来ます。

<style type="text/css">
<!--
body {background-color:#ccffcc;}
h1 {color: red;text-align:center;}
h2 {color:#0033ff; text-align:center;}
p {line-height:150%;}
-->
</style>

HTML文書内に埋め込むときは、<head>要素に右のように書きます。

<!--  〜  --> は、スタイルシートに対応していない場合ソースが表示されてしまうことを防いでいます。宣言の中括弧はC言語のソースのように"{"と"}"をそれぞれ1行使って書く場合があります。

インラインに埋め込むときは、タグの中に style="line-height:150%;" の様にそのタグの属性としてダブルクォーテーション("")の間にスタイルの属性と値をコロン(":")で区切って書きます。セミコロン(";")で区切り複数続けて書くことが出来ます。

ここでは使っていませんが、classやidという識別子で任意の場所のスタイルを設定出来ます。例えば、上の例では h2 {color:#0033ff; text-align:center;} で見出しの文字の色は青い色になっていますが、別に h2.red {color:#ff0000; text-align:center;} で[.red](クラス名は任意)のclassをつけた <h2 class="red"> でこの見出しだけを赤色にすることが出来ます。また、この場合単に .red {color:#ff0000;} と設定しておけば、どのタグでもこのクラスを使って赤色に出来ます。

スタイルシートはブラウザやそのバージョンによって対応がまちまちですので、意図した見え方をしないこともありますので注意してください。

スタイルシートのダイアログボックス

HTML Project2を使って気が付いたと思いますが、どのタグでも同じダイアログボックスが現れます。色と背景・フォント・テキスト・ボックスと言うように種類ごとにまとめられて判りやすくなっています。それぞれの属性をクリックすると右上にその属性の解説が出ます。使えるものが限られている要素がありますが、入力すれば入力できてしまいます。例えば順序なしリスト<ul> でマーカーに1.2.3などの順序を入れることが出来てしまいます。ユーザーが正しく使うように注意する必要があります。

右側のチックボックスは、コロン(":")とセミコロン(";")の前後に半角スペースを入れるかどうかの設定と複数行表示は、私はいずれも空白(半角スペースを入れない)にしています。最後にセミコロン(";")を挿入にはチェックを入れています。

右側の[登録済みスタイルのリスト]には、今まで使ったスタイルが自動的に登録されています。この中で必要なものを選択すれば、それぞれの属性を設定しなくても簡単に設定出来ます。

右下の[初期動作]は普段は[何もしない]にしておいた方が扱いやすいと思います。連続して同じ設定をするときは[前回のスタイルをロード]を選ぶなど使い分けが出来ます。

[初期動作]の下にあるボタンの[新規作成]は、スタイルシートのダイアログボックスを開いたときに既に設定済みのものをキャンセルする時や[前回のスタイルをロード]にしてあったが前のスタイルを使わないときにクリックすると、すべてのスタイルの設定がない状態になります。
[新規作成]ボタンの隣[追加][上書][削除]のボタンは、[登録済みスタイルのリスト]への追加・上書・削除ですが、[追加]ボタンをクリックしなくても追加されるようです。

このスタイルシートのダイアログボックスは、それぞれのタグの再編集(タグの中にカーソルを置いてツールバー1の[タグの再編集]をクリックしする)のダイアログボックスの[汎用属性]の[style−スタイル]をクリックすると現れます。また、css文書の中でもインラインに埋め込んだ場合でも、スタイルシートの宣言の部分(例えば color:#ff0000;)にカーソルを置いて、メニューバーの[スタイル][スタイルシートの再編集]をクリックすると現れます。(ツールバー1のタグの再編集]の隣に[スタイルシートの再編集]のボタンを作っておくと便利です。)

 
Topへ

スタイルシートの単位

それぞれの属性の値に長さの数値を入れるときに単位も入力します。単位に絶対値と相対値があります。出来るだけ相対値を使った方が環境(文字の大きさ、ウインドウの幅、モニタの解像度など)の違う状態でページを見たときに対応できると思います。

絶対値の単位相対値の単位
mm
ミリメートル
cm
センチメートル
in
インチ
pt
ポイント 1pt=1/72インチ
pc
12pt=1pc あまり使われません。
em
それぞれの要素の中の文字(大文字のM)の高さを基準にします。
ex
それぞれの要素の中の文字(小文字のx)の高さを基準にします。
px
画面上の1ピクセル。モニタの解像度に画面の大きさにより変わりますから相対値ですが、例えば<div style=" position:absolute;top:100px;left:50px;">〜</div> のように位置を絶対位置指定するとその要素を表示する位置が固定されます。(ホームページ・ビルダーの「どこでもモード」で使っています)文字の大きさを変えて表示すると、文字と画像が重なったりしてバランスが崩れます。
%
それぞれの要素はボックスという枠の中にあり入れ子になっています。htmlボックスの中のbodyボックスの中のp と言うように親子関係があります。横幅の例では、親の「html要素の中にbodyの幅は何%を占めるか」と相対的に指定します。(例えば80%は<body style="width:80%;">)

スタイルシートの色

スタイルシートのダイアログボックスの最初の[色と背景]で背景色や背景画像を設定できます。

属性を選んでテキストボックスの右のボタンをクリックすると、色を選択出来ます。

[16色][94色][141色]では英文の色名が表示されます。16色はW3Cで定めていますからどのブラウザでも同じに表示されるはずです。英文の色名を使うとブラウザによって対応してない場合や色合いが微妙に違うことがあります。

[16進数表現]を選ぶと16進数6桁で表示されます。[セーフカラー]は[16進数表現]だけ表示されます。

パソコンでは光の三原色である赤(R:red)、緑(G:green)、青(B:blue)の各色の明るさを変えて、色を表示させています。1バイト(8ビット)のデータを16進数2桁で表し、RGB各色1バイト合計24ビット(1,677万7,216色)で、「24ビットカラー」「フルカラー」と呼ばれ、人間が識別できるすべての色を表すことが出来ます。

セーフカラー(Webセーフカラー)は8ビットカラー(256色)のうちWindowsとMacintoshで異なる色40色を除いた216色をいいます。この色を用いると機種やブラウザの違いによる作者の意図に反する色合いを防ぐことが出来るので、「Webセーフカラー」と言われています。RGB各色6段階で216色を表わし、16進数では 00 33 66 99 CC FF を使います。HTML Project2 のダイアログボックスでは、セーフカラーまで設定できます。編集画面で数字を入力してセーフカラー以外の色を使うことが出来ますが、なるべくセーフカラーの範囲内の色を使うほうが無難です。

HTML Project2 のダイアログボックスは、カラー見本が小さいので判別しにくいときは、外部ツールに登録した[Safe Color]を参照してください。Web上には色に関した情報も沢山あります。

 
Topへ

スタイルシートの属性と値

今まで出てきたスタイルシートの属性と値について簡単に説明します。

{background-color:#ccffcc;}
この例では背景色に16進数6桁の#ccffccを指定しています。背景には画像を使うことも出来ます。
{color:red;}あるいは{color:#0033ff;}
テキスト(文字)の色を指定します。ブラウザで対応している色の名前か、16進数で指定します。
{text-align:center;}
テキスト(文字)の配置を指定しています。タグの<center>は非推奨となっていますのでスタイルシートを使います。
{line-height:150%;}
文字列が数行以上になると初期値では行間が詰まっていて読みにくいので、行間を空けます。
{margin:0 20%;}
親要素からこの要素のボックスまで上下の間隔を取らないで、左右それぞれ親要素の20%の間隔を取ります。この要素のボックスの横幅は60%になりウインドウの中央に表示されます。
{padding:1ex;}
この要素のボックスの外側とテキスト(文字)との間隔を空けます。
{border-style:inset;}
ボックスの枠線のスタイルを指定します。この場合は値が1個ですからこの値で上下左右の枠線を決めます。
{position:absolute;top:100px;left:50px;}
親要素の左上からの距離でこの要素の位置を絶対的指定します。見る環境が違うとレイアウトのバランスが崩れることがあるので使わないほうが無難です。
 
Topへ

Webページらしく仕上げる

リンクを設定する

ここまで作ったページは単独のページです。自分の手元において置くファイルならこのままでもよいのですが、Webページとして他のページと関連を持ったせるにはハイパーリンクを設定します。また、現在見ているページが、サイトのどの位置にあるのかを同時に示すことが出来ると閲覧者が助かります。

ページのはじめの方にこのページへ入ってくるまでの経路と関連のページを表示して、クリックすると移動できるようにこのテキストの最初にあるようなリンクをつくります。

ここでは便宜上「語り継ごう柏崎の知恵ぶくろ」のページは、[html]フォルダーの「ホームページ」(ファイル名index.html)から「生活」フォルダ(フォルダ名life)の中のlife.htmlを通って、tiebukuro.htmlへ移動してくるものとします。

以上でリンクが入りました。このページを読み終えてから元のページに戻ることが出来ます。現在見ているページはリンクが張られていませんから通常の黒い文字で表示されています。また関連して違うページへのリンクも同様に作ることが出来ます。このテキストのソースの最初を参考にしてください。リンクの方法がわからない?質疑応答へ移動

連絡場所を書く

このページについての問い合わせ先として、ページを作った人のメールアドレスなどを書いておきます。セキュリティの面から住所・氏名・電話番号などの個人情報は普通書きません。メールアドレスもウイルスメールをもらったり迷惑メールの標的になりますので公開したくないのですが、公開したページに責任を持つ意味がありますし、自分の作ったページに対する反響を知るためにもセキュリティ対策は別に用意して、書いておくとよいでしょう。私はメールアドレスにWebメールのアドレスを載せていますが、迷惑メールやウイルスメールが沢山舞い込んできます。我慢できなくなったらアドレスを変更すればよいのですが、Webページのアドレスを変更するのも大変なので我慢しています。別に掲示板で質問・意見を受ける方法もありますが、CGIなど難しいのでここでは扱いません。

先ずページの最後に区切り線を入れます。

ページの最後の</body>の前の行頭にカーソルを置いて、ツールバー3の[水平線]をクリックします。<hr> と表示されます。

ツリービューの[ビュー]で見ると水平線がウインドウの80%の幅で中央に表示されています。これは余白の設定されている<body> 〜 </body>の中にあるので、上の<p>や、<ul>と同じ様にstyle="margin:0 10%;" を継承しているためです。

次は <address> 要素です。

今まで表示する文字(文章)を作っててからタグを入力していましたが、タグを先に用意してから文字を入力することも出来ます。タグを入力する方法はいろいろあります。入力するところにカーソルを置いて次のいずれかの操作をします。

タグが入力されたら「開始タグ」と「終了タグ」の間に情報を入力します。

例えば2005年2月7日 UP NET・陽だまり 電子メール と入力します。

表示の仕方はブラウザで違いますが、Internet Explorer で見ると斜体の太字で表示されます。

文字列[電子メール]を選択して、ツールバー3の[ハイパーリンク]をクリックすると、カーソルのところに<a href=" と表示され履歴がプルダウンリストに出ます。リストの最後のリンク先ソースのURL:値=%URL をダブルクリックすると[ファイルを開く]ダイアログボックスが開きリンク先のHTMLファイルを指定出来ます。

ここではメールアドレスを入れますので、mailto:hidamari@city.kashiwazaki.niigata.jp  と入力します。

ページ閲覧者がこのリンクをクリックすると、メーラーが起動してあて先にアドレスの入ったメッセージ作成ウインドウが開きます。件名と本文を書けばメッセージが出来上がります。

 
Topへ

ここまで作ったHTML文書のソース

以上で一先ず「語り継ごう柏崎の知恵ぶくろ」のページの形が出来ましたので、このテキストを終わります。次の段階のテキストも作成する予定です。

僅かなタグしか使っていませんが、このテキストで使ったHTML Project2 の使い方とHTML文書の基本的なものを織り交ぜてあります。実際にWebページを作るときは、いろいろな要素が入りもっと複雑になりますが、最初から複雑にしないで簡単なものを作って次第に自分の考えるイメージに近づけるとよいと思います。

Webページ作りは、「自分以外の人が見て下さる。」 ということを忘れないようにしたいものです。

今まで作ったページのソースは次の通りです。

HTML文書「tiebukuro.html」
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<link rel="stylesheet" type="text/css" href="style.css">
<title>語り継ごう柏崎の知恵ぶくろ</title>
</head>
<body style="margin:0 10%;">
<div style="font-size:small;"><a href="../index.html">ホームページ</a> >> <a href="life.html">生活</a> >> 語り継ごう柏崎の知恵ぶくろ</div>
<h1>語り継ごう柏崎の知恵ぶくろ</h1>
<h2>■1章■健康に関すること</h2>
<p style="color:#336633;background-color:#ccffff;margin:0 20%;padding:1ex;border-style:inset;"> 以前は、薬は大変高価なものだったので、身近な材料を使って代用しました。これがまた、なかなかよく効くのです。現在でも十分使えるものが、たくさんあるのではないでしょうか。</p>
<h3>▼風邪▲</h3>

<ul style="line-height:150%;">
<li>風邪ひきには卵酒がよい。<br>
 ※作り方:・・酒を温めて、卵一個と砂糖大さじ一杯をいれてよく混ぜ、火を止める。</li>
<li>風邪で熱の高いときは、くず湯を飲んで水分と栄養を補給する。<br>
 ※作り方:・・大さじ一杯ずつのくず粉(片栗粉)と砂糖を少量の水でとき、熱湯を注いでよく混ぜる。</li>
<li>初期の風邪には、おろしニンニク、味噌少々、かつお節に熱湯を注いで飲むと汗が出て熱が下がる。</li>
<li>初期の風邪には、ネギの白い部分をきざんで味噌、生姜のすり下ろしを加え、熱湯で溶かして熱いうちに飲むと頭痛、鼻づまりに効く。</li>
<li>寒けがする時は、生姜湯を飲むと温まり、風邪の予防になる。<br>
 ※作り方:・・すり下ろした生姜小さじ1/2杯と砂糖適宜(好みによる)に熱湯を注ぐ。</li>
<li>梅干しに熱い湯を入れて飲むと、汗が出て風邪がなおる。</li>
<li>梅干しの果肉を煮つめて飲むと、風邪からの下痢が治る。</li>
<li>頭痛のとき、梅干しをこめかみにはるとよい</li>
</ul>
<hr>
<address>2005年2月7日 UP NET・陽だまり <a href="mailto:hidamari@city.kashiwazaki.niigata.jp">電子メール</a></address>
</body>
</html>
スタイルシート 「style.css」
body {background-color:#ccffcc;}
h1 { color:red; text-align:center;}
h2 {color:#0033ff; text-align:center;}
p {line-height:150%;}
Topへ

付録1 こんな機能がある

[Esc]キーでファイルを開く

編集画面をクリックして[Esc]キーを押すと今まで取り扱ったファイルが15個までフルパスで表示される。ファイルを選択(クリック)すると別のタブに読み込まれる。ファイルリストも開いたフォルダに移動する。

ファイル名のタブをダブルクリックしてファイルを閉じる

編集画面のファイル名のタブをダブルクリックすると、そのファイルを閉じる。

まとめて保存、一括読み込み

編集ウインドウに開いている複数のファイルを纏めて「プロジェクト」として保存すると、一括して開くことが出来る。

関連するHTMLファイルやCSSファイルが編集画面に開かれているとき、メニューバーの[ファイル][プロジェクトに名前をつけて保存]で保存すると、そのときの状態が拡張子「.wpr」がついて保存される。

開くときは、メニューバーの[ファイル][プロジェクトを開く]で、プロジェクトのあるフォルダから保存した関連ファイルが一括して開くことが出来る。

関連するファイルが多いときに一つずつファイルを開くより、簡単に一度に開くことが出来て直ぐ作業に入れる。

この機能を更に便利にするには、Windows の機能でファイル名の拡張子[.wpr]を HTML Project2 に関連付けしておくと、エクスプローラーでファイルをダブルクリックしたときプロジェクト(関連のファイル)が開いた状態で HTML Project2 を起動出来る。

ファイルの関連付け

更に HTML Project2 の設定で、ファイルリストに表示するフィルタに登録しておくと、ファイルリストに表示される。ファイルリストに登録する方法は、このテキストの[HTML Project2 の設定][2.ファイルの種類を設定する]にあります。

プロジェクトファイルを HTML Project2 を起動したときに表示されるフォルダに保存すると、 HTML Project2 を起動してプロジェクトファイルをダブルクリックすれば、関連のファイルが一度に表示される。

ファイルリストのフォルダを直接開く

直接開きたいフォルダを選択して、ファイルリストの上部にある6個のアイコンの内、左から3番目「お気に入りへの追加」をクリックすると、フォルダの「お気に入り」に登録され、左から2番目の「お気に入りへ移動」をクリックし登録された一覧から選択して、フォルダを開くことが出来る。

お気に入りに登録されたフォルダを削除する時は、HTML Project2 が保存されているフォルダの中にある[Setting]フォルダ中の[FavoriteDir.txt]を開き削除できる。(2007/4/29 add)

ツリービューに表示された位置の編集画面を探す

画面の下に表示されるツリービューの「階層」タブと「属性値」タブではダブルクリックした箇所の編集画面にカーソルが移動するが、「ビュー」タブでは連動することが出来ない。検索機能を使うと簡単に探すことが出来て長いHTMLファイルの場合便利。

ツリービューのビュータブで目的付近の語句を選択してコピーし、ツールバーの[検索]か、メニューバーの[検索][検索]で[検索文字列]に貼り付けて、[次を検索]ボタンをクリックすると、編集画面の目的の場所にカーソルが移動する。([検索文字列]の文字数は少ない方が早く検索される。)

編集画面に表示されているファイルと同じページを新規に作る

メニューバーの[ファイル][複製して新規作成]をクリックすると、編集中のページと同じものを「新規」ページとして複製されるので、別の名前をつけて保存する。(この場合保存していない編集中の箇所も新規ページに反映される。)

クリップボードにコピーした履歴から貼り付け

メニューの[編集][クリップボードから貼り付け]をクリックすると、それまでにコピーした履歴(複数)が表示されるので、貼り付けるものをクリックするとカーソルの位置に貼り付けることができる。

[設定][全般設定]の[キー入力支援]タブの[クリップボード履歴から挿入]にチェックを入れてある状態で、半角英数字入力モードでシングルクォーテーション[ ' ]を入力するとクリップボートの履歴から入力できる。(この段落2006/8/31追加)

選択した文章を編集画面にコピーする

ブラウザやメーラーの文章を選択して、ドラッグ&ドロップで、編集画面の任意のところへコピー出来る。

常用文を登録しておき、必要により選択して入力できる。

登録する語句を選択か選択コピーした語句を、メニューの[編集][お気に入り語句の登録]で登録しておき、[編集][挿入][お気に入り語句]で選択して入力できる。

タグだけを削除してテキスト文章を残す

タグを削除する範囲を選択して、メニューの[編集][選択部分の変換][タグを消去]をクリックすると、< >で囲まれたタグが削除され、テキスト文書だけが残る。この場合特殊文字はそのまま(「<」は「&lt;」となる)残る。

[編集][選択部分の変換][タグ以外を消去]とすれば、タグだけが残る。

画像ファイルをファイルリストから貼り付ける

画像を挿入するところへカーソルを置いて、ファイルリストからドラッグ&ドロップするとメニューが出る。[imgタグを挿入]をクリックするとそのファイルを表示するタグが入力される。(これはSusieプラグインがインストールしてあるファイルに対応している。)

 
Topへ

スタイルシートの再編集

スタイルシートを再編集するときは、タグの再編集ダイアログボックスから[style-スタイル]を選んでスタイルシートのダイアログボックスに入ることができるが、スタイルシートを記述している[" "][{ }]の間にカーソルを置いて、メニューの[スタイル][スタイルの再編集](ツールバー1にアイコンを作ると良い)をクリックすると、スタイルシートの再編集のダイアログボックスが出る。カーソルを置くところを間違わないように注意。

スタイルシートのダイアログボックスを開いたときの設定

スタイルシートのダイアログボックスの右下の[初期動作]で「何もしない」を選択しておくと、ダイアログボックスを何も設定されていない状態で開く。このときに「何もしない」以外を選択してあると、そのスタイルが設定された状態で開かれる。見えないところの設定に気が付かないでいると、思わないスタイルが設定されてしまう。[新規]ボタンで前の設定を削除できる。

複数行の一部を縦に選択して編集する

メニューの[編集][BOX選択モード]をクリックして、マウスポインターをドラッグすると、複数行の一部を縦に選択することが出来る。選択した部分の編集処理が終わるとBOX選択モードは解除される。

マクロツールバーの表示順序の組み替え

マクロツールバーの表示順序はマクロを作った順になるが、わかり易い順に変更出来る。メモ帳などのエディタで[HTML Project2]フォルダの[Setting]フォルダの中の[MacroList.ini]を開くと、縦に[h1]、Key=、[h2]、Key=、・・・と表示される。例えば [h1]、Key=、 を一組として順序を変え、上書保存する。

HTML Project2 を閉じたときの状態で次回に開く

メニューバーの[設定][全般設定]で[オプション設定ウインドウ]の[その他]タブをクリックして、[アプリケーションの初期状態]の[前回閉じた状態を再現]を選択しておくと、次回 HTML Project2 を起動したときに閉じたときの状態で開くことが出来る。

色を選択するときにカラーパレットを使う

スタイルシートなどで色を選択するときに、Windows の「ペイント」の[色の編集]や画像処理ソフトで使うカラーパレットで選択出来ます。

メニューバーの[設定][全般設定]で[オプション設定ウインドウ]の[その他]タブをクリックして、[色選択をカラーパレットで行う]のチェックボックスにチェックを入れます。

Webセーフカラー以外の色も選択できますが、ブラウザによって表示が違う場合があります。

前方タグのみ入力する方法

メニューバーの[設定]のプルダウンメニューで[テキスト非選択のたき前方タグのみ挿入]をクリックしてチェックを入れると、挿入する位置にカーソルを置いてメニューバーの[タグ]で選択したり、ツールバーのタブのアイコンをクリックしたりすると前方タグのみ入力されます。

[設定][テキスト非選択のとき前方タグのみ挿入]が薄い色になってチェックを入れることができない場合は、[設定][タグ挿入時のダイアログ表示]の[すべてのタグ]にチェックが入っています。[設定したタグのみ]に変更すると[テキスト非選択のとき前方タグのみ挿入]にチェックを入れることができるようになります。(この段落2006/8/31追加)

終了タグを入力するときは、ツールバーの[現在の位置でタグを閉じる]アイコンをクリックします。

このテキストによりマクロを作っている場合は、[改行間]等の範囲に前後のタグを入れる方法と、範囲を選択して前後のタグを入れる方法と、この前方タグのみ入れて要素の内容を入力して終了タグで閉じる方法の3つを使い分け出来ます。

XHTML対応のページつくり

HTML4.01にXMLを対応させた拡張できるHTMLXHTMLに対応する機能があります。メニューバーの[設定]のプルダウンメニューの一番上の[XHTMLモード]をクリックしてチェックを入れます。

メニューバーの[ページ設定]の初期設定や宣言関係がXMLに対応したものになります。

このテキストの[マクロを作る][htmlのマクロ]で作ったマクロの[html]の内容は自動的には変わりませんから、メニューバーの[登録タグ][タグの登録]で[html]の[前方タグ]の内容を右のように変更しておきます。(XHTML 1.0 Strictの場合)

また、要素の内容のない(終了タグのない)img、br、hr、mataなどの空要素のタグの終わりを「 />」と閉じることが出来ます。

この設定(XHTMLモード)でタグは小文字で書き(大文字で記入する設定が出来ない)、終了タグを省略しないで、属性の値はダブルコーティションでくくって入力しますから、head要素の宣言やタグを入れ子にすることなどを注意すれば、XHTML対応のファイルを作ることが出来ます。

a要素(アンカー)のname属性が廃止されるので、替わってid属性を使用することになりますが、ブラウザの対応が遅れていますから、当面はname属性とid属性の両方をアンカータグの中に記述します。

既に作ってあるHTMLファイルをXHTMLファイルに変更する場合

HTMLとXHTMLは根拠が違いますから、ファイル冒頭の宣言を上記のように変えなければなりません。

XHTMLの場合次のように書かなければならないので、このHTML Project2の機能を使って変更します。

  1. タグは全て小文字で書く。
  2. タグは必ず入れ子構造をとり、開始タグと終了タグは必ずセットに扱う。
  3. 終了タグを必ず書く。
  4. 終了タグのない空要素(img,br,hr等)には最後にスラッシュを入れる(例<br />)
  5. 属性値はダブルクォートで囲む。(シングルクォートでも可)
  6. 属性値の省略は出来ない。
  7. スタイルシートやJavaScriptを<head>のなかに<!--や-->を使って書き込まずに、外部ファイルに記述する。

大文字で入力されているタグは、範囲を選択してメニューバーの[編集][選択部分の変換][全てを小文字に]で一括して小文字に出来る。

本文に大文字が入っていたり、<mata>の中のフォントの種類や<!DOCTYPE>、JavaScript の中の大文字まで小文字になってしまうので、範囲選択には要注意。

別の便利な方法;メニューバーの[タグ][タグ関連ツール][タグの変換][タグを小文字へ]をクリックすると、ダブルクォートで囲まれた属性の値のなかの大文字はそのままだが、タグと属性は小文字になる。JavaScript の<input>のなかの[onClick= ]等の属性も[onclick=]になってしまうが動作に影響はないようだ。

メニューの階層が深いので、ツールバー4にアイコンをこのテキストの[HTYM Project2の設定][1.ツールバーのカスタマイズ]の方法で登録しておくと、ワンクリックでそのファイル全体のタグが変換される。

入力済みの空要素のタグの最後に「 /」を入れるにはキー入力で入力できますが、空要素の中にカーソルを入れて、タグの再編集を実行すると「 />」となる。

リストの各項目(<li> list item)のように終了タグを省略していた場合は一つずつ入力していかなければならないが、入力する位置にカーソルを置いて、ツールバー4の[現在位置でタグを閉じる](メニューバーの[タグ][タグ関連ツール][現在位置でタグを閉じる])をクリックすれば終了タグが入力される。このとき原因がわからないが、タグの親の終了タグが入ることがあるので入力された終了タグを確認する必要がある。

まだまだ他にも修正しなければならないところがあるかもしれない。HTML互換性ガイドライン等のページを参考にすると良い。

 
Topへ

ユニコードへの対応

HTML Project2 は、ntf32.dllをHTML Project2 のフォルダに置いておけば、ユニコード(Unicode)にも対応している筈です。

nkf(Network Kanji Filterネットワーク用漢字コード変換フィルタ)は、DLLとexeの二つの形で提供されています。

最新バージョンは、v2.0(2.0.8)ベクターのサイト  http://www.vector.co.jp/soft/win95/util/se295331.html からダウンロードできますが、私たちのようにプログラム作りに縁のないものには判り難いです。

ソース用ファイルではなく、nkf.exe nkf32.dll Windows用2.0.8 からダウンロードします。nkfwin.zipを解凍して、[2080]→[NT]フォルダの[nkf32.dll]が目指すファイルです。Windows 95,98,Me用のnkf32.dll は、[NT]ではなく[9x]フォルダの中の[nkf32.dll]です。同じ名前でも中身が違うようです。古いバージョンはUTF-8に対応していません。

次はHTML Project2 の設定です。

メニューの[設定][ファイルの入出力にnkf32.dllを使用]をonにし、アイコンが凹んだ状態にします。次の[ファイルを開くときUTF-8を仮定する]もonに設定。

準備ができたので、Sift-jisにないUTF-8の文字を含む新規ページを作ります。UTF-8の文字は[?]と表示されます。HTML Project2 がUTF-8に対応しているとは言っても、エディタはSift-JISで動いているのでしょう。

meta要素に charset=UTF-8 と記載すると編集画面のソースは日本文字は表示されるが、ビューは英数文字も文字化けしている。

[編集][文書全体の編集・変換][コード変換][UTF-8に]をクリックすると、ソースが文字化けして、ビューは日本文字が表示される。UTF-8の文字はソースもビューも[?]のまま表示される。ここにUTF-8文字を入力しても[?]が表示される。

このファイルをテキスト・エディタで読み込むとUTF-8のファイルになっている。[?]と表示されているUTF-8の文字を入力すると確定しても文字が表示される。これを保存してWebに載せると、UTF-8の文字が正しく表示される。

結局Sift-JISにある文字なら、UTF-8でも表示できるが、Sift-JISにない文字をHTML-Project2で入力しても入力できないのだから、UTF-8に変換もできないということ。

なお、[ファイル][コード変換して保存][UTF-8/LF]は、別の目的で使うのだと思います。/LF は改行コードで、Sift-JISの改行はLF+CRで上のテストで使ったUTF-8のファイルもLF+CRです(この項 2008-9-23 UP)

付録2 解決できないトラブル

このHTML Project2 は使っているうちに突然動かなくなることがある。今までに次のようなことがあった。使い方やパソコンにインストールされているソフトによって発生しないこともある。

プログラムの中身はわからないが、以上のトラブルはこのソフトを使い続けて何かが飽和状態になったような時に起こるようなに思える。
 このソフトは「setting」と言うフォルダの中に、色々な設定や使用したデータの履歴を保存しておいて、必要によって呼び出せるような仕組みになっている。メニューの[ツール][履歴の削除]で、[検索文字列][置換文字列][登録スタイル][タグ挿入履歴][クリップボード履歴][アドレスバー]の6つを削除できる。1個ずつ削除をするのは手数がかかるので、マクロを作って全部を1回のクリックで削除出来るようにして、作業の途中で一段落したらクリックするよう出来る。上記のトラブルに効果があるかどうかは判らない。

付録3 HTML Project2 の引越し

HTML Project2 は、このテキストの初めの方にある「HTML Project2のダウンロード」に書かれた方法でパソコンにインストールします。しかし、使い込んでいたHTML Project2 を「他のパソコンでも同じ状態で使いたい」というときに、新たにダウンロードしてインストールすると、ツールバーやマクロなど色々な設定を初めからやり直さなければなれません。以下は今までの環境を引き続いて使いたいときの方法です。

HTML Project2 はインストーラ付の自己解凍型(hprj27313.exe)で規定値のままインストールした場合は次の所にインストールされています。圧縮ファイル(hprj27313.cab)を解凍して使っているときは、自分で保存した場所になります。   C:\Program Files\Kaneto\HTML Project2

このフォルダ(HTML Project2)を別のパソコンにコピーすれば今までの設定のまま使用出来ます。(一つ上のKanetoでもよい)

HTML Project2 の色々な設定は、このフォルダ中にあるフォルダSettingにあるファイルに保存されています。(フォルダMacroには作ったマクロが、Templateにはテンプレートとして保存したファイル(.htt)があります。)

ただこのままでは、デスクトップにアイコンはありませんし、[スタート]ボタンから辿って起動することが出来ませんので、HTML Project2フォルダの中の実行ファイルHtmlProject2.exeのショートカットをデスクトップに作ります。

ショートカットを作る方法  このサイトの[ファイルの管理 2]

http://www.kisnet.or.jp/s_odake/pc/filexp2.html#a12

プログラムメニューに登録する方法  陽だまりサイトの[パソコンお助け情報]

http://www.kisnet.or.jp/~hidamari/help/xpcustomize/xp0015.html  (この項 2006/8/25 UP)

 
Topへ

home  >>  パソコンで楽しむ  >>  HTML Project2 を使う  >>「HTML Project2を使う」質疑応答    印刷用のページ  HTML Project2 を使う 2
2005年1月3日 UP  連絡 メールでどうぞ