はじめに
ホームページを見るには
Webページを作るには
HTML Project2のダウンロード
nkf32.dll とSusie プラグインのダウンロード
HTML Project2 の設定
タグの説明
ツールバーから作業をする
スタイルシートを使う
スタイルシートの説明
ここまで作ったHTML文書のソース
付録 こんな機能がある
付録2 解決できないトラブル
付録3 HTML Project2 の引越し
フリーソフト 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ページを作るのに最も大切なものは、HTMLの知識よりも作るページの内容です。私たちは情報が欲しい人に、正確な情報を正しく伝えるためにWebページを作ります。伝える情報について十分な知識があることが望ましいことです。
次に必要なものは作る人の感性です。同じ情報でもページを作る人の感性で違った見方になります。そして好みも入り出来上がったページの見え方に反映します。
伝える情報があり、ある程度の感性を持っていれば、HTMLなど面倒なことを知らなくても、ホームページ・ビルダーなどのパッケージソフトを使えばWebページを作ることが出来ます。また、Wordなどのワープロソフトやその他のアプリケーションで作ったページをWebページにすることもできます。しかし、アプリケーションの仕様に依存することになり、細かなところを自分の思うように表現するには、HTMLのタグを編集する必要があります。
タグをメモ帳などのエディタで一字ずつ入力していくのは大変ですから、入力を支援するHTMLエディタというソフトがたくさんWeb上で提供されています。
いろいろな作り方がありますが、どの方法でもHTMLファイルを作ります。ここでは、誰でも同じソフトを手に入れる事が出来るため情報を共有できる、フリーソフトHTML Project2を使います。HTMLの知識がある程度必要ですが、実際に使うタグは限られていますから、必要の都度そのタグを理解すればよいと思います。
前項で出てきたW3Cで定めたHTML4.01では、文書(の構造)を記述する方法が定められていて、その文書の表現を調整する方法はスタイルシート(CSS)として別に定められています。以前はHTMLの中でページの見栄えも編集していましたが、HTMLの中から削除されたり、「推奨しない」とされたりして消えていくことになります。これから作るWebページは、なるべくこれらの方針に沿って作ることが望ましいと思います。
(2007/4/1の現況で書かれています)
フリーソフトHTML Projict2は次のサイト(Kaneto'HP)からダウンロードできます。
http://homepage3.nifty.com/tkaneto/ 他のサイトからは?質疑応答へ移動
どういう作用をするのか判りませんが、文字化け防止の妙薬?nkf32.dll(V2.0.2.3以降のバージョン)を用意すると、文字化けする文字をWindowsが使っているShift-JISに変換してくれます。そして、画像を表示するのにSusie のプラグインを使いますのでこれも用意します。
このソフトは色々なところで使う人が使いやすく設定出来るようになっています。逆な言い方では上手に設定できないと思うように動かせないソフトです。ですからユーザー間で情報の交換が必要です。ここにあげた設定はごく一部で方法も一例です。使い方によっては必要ないものがあります。
メニューバーの[表示]をクリックすると、[ツールバー1]〜[ツールバー6]にチェックが入っていますが、使いやすい様に整理します。[ツールバー5]と[ツールバー6]のチェックを外し見えなくします。[ツールバー1]にはこのソフトを操作する基本的な機能ですからそのままにしておいて、[ツールバー2]にはブロック・レベルのタグ、[ツールバー3]にはインライン・レベルのタグ、[ツールバー4]には特殊文字とタグ操作の機能というように機能別に変更します。
メニューバーの[設定][ツールバーの編集]をクリックします。[ツールバーの編集]画面の左上の[ツールバー2]をクリックすると、その下に現在設定してある機能のアイコンが並んでいます。このうち不要のものを選択して[削除]ボタンをクリックすると削除されます。
右側上にはメニューバーの項目があります。この項目を選択するとその下に項目の中の機能のアイコンが見えます。右上で[タグ]を選択して[ツールバー2]に追加するブロック・レベルのタグ(たとえば 段落-<P>)を選択して[追加]ボタンをクリックすると左側に入ります。ツールバーの中の順序は[上へ][下へ]ボタンで調整できます。[挿入]ボタンは、左側の選択したアイコンの上に挿入されます。
このようにし例えば次のようにツールバーを作ります。「ツールバーのアイコンが見えない」質疑応答へ移動。
画面左側のファイルリストに表示するファイルの種類は、初期値ではフォルダ内にあるhtm、shtm、css、js、vbs、txt のファイルを表示していますが、画像ファイルを表示したほうが便利です。
メニューバーの[設定][全般設定]の[オプション設定]の画面で、[拡張子とアイコン]タブをクリックし、[ファイルリストの表示]の[フィルター指定]を選択して、テキストボックスの中に次のように画像ファイルの拡張子を書き加えます。 [;*.jpg;*.gif] 「入力の仕方」質疑応答へ移動
HTML Project2 を起動したときに左側のファイルリストに表示されるフォルダを指定できますので、HTMLの編集にいつも使うフォルダ(例えば'\My Documents\My Webs')を指定しておきます。
メニューバーの[設定][全般設定]の[オプション設定]の画面で、[パス設定]タブをクリックして[ドキュメントルート]のテキストボックスに目的のフォルダのパスを入力します。テキストボックスの右にあるフォルダのアイコンをクリックすると、[フォルダの参照]画面で「デフォルトディレクトリの選択」が出来ます。[絶対参照で挿入]のチェックボックスがありますが、ここにチェックを入れるとリンク先が絶対パスで挿入されます。サイト内の場合は相対パスの方が何かと都合が良いと思います。
Internet Explorer は特に設定しなくても表示できます(ツールバー1の[IEで表示]をクリック)が、それ以外のブラウザで表示して確認するときには設定が必要です。同じタグを使ってもブラウザによって見え方が違うときがあります。
メニューバーの[設定][全般設定]の[オプション設定]の画面で、[パス設定]タブをクリックして[Netscap.exe]のテキストボックスにNetscap.exeのあるフォルダのパスを入力します。「3.」と同様テキストボックスの右にあるフォルダのアイコンをクリックすると、[ファイルを開く]画面でパスの指定が出来ます。[DDEを使う]のチェックボックスがありますが、チェックするとどう違うのか良くわかりません。DDEはアプリケーション間通信のプロトコルとのことです。
同様に[指定ブラウザへのパス(S)ここを指定しないとデフォルトで開きます]のテキストボックスにその他のブラウザの実行ファイルをフルパスで入れます。(例えばFirefox が初期値の場所にインストールされている場合C:\Program Files\Mozilla Firefox\firefox.exe)
ツールバー1にある[(指定)ブラウザで表示](アイコンはOperaのアイコンになっています)をクリックすると、編集中のファイルがFirefoxで表示されます。
Internet Explorerの表示方法を設定するときは、メニューバーの[設定][全般設定]の[オプション設定]の画面の[IE設定]タブで出来ます。
このソフトのヘルプには、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追加)
このソフトは編集中のファイルを保存しなくても、画面下の[ツリービュー]で表示を確認することが出来ます。編集が反映されてないときはツールバー1の[表示を更新]をクリックすれば最新のものに更新出来ます。しかし、保存していないとリンクなどの働きが正しく動かないことがあります。
ファイルを編集して保存してないときは、ファイル名のタブに大きいチェックマークがついて判りやすいのですが、上書き保存をしなくても表示して見るときに保存された方が便利と思うときは次の設定が出来ます。
メニューバーの[設定][全般設定]の[オプション設定]の画面の[その他]タブで、[ファイル保存時に表示を更新]と[ブラウザで表示前にファイルを保存]のチェックボックスにチェックを入れます。
注意:この設定をすると[新規作成]で新しい編集画面で何か入力して、ツリービューに表示される段階で、保存されてないと上書き保存が出来ないため「保存画面」が出ます。まだ作りかけのファイルであっても名前をつけて保存しないと、次の作業に移られません。
編集画面の表示は、メニューバーの[設定][全般設定]の[オプション設定]の画面の次のタブで設定出来ます。使ってみて初期値で不満のときは設定を変更します。
タグを挿入するときにダイアログボックスで属性を編集する事が出来ます。使用してみて全くダイアログボックスが出ない場合や出てきて邪魔になる場合は設定を変更出来ます。
メニューバーの[設定][タグ挿入時のダイアログ表示]をポイントすると、[表示しない][設定したタグのみ][すべてのタグ]を選択できます。
[設定したタグのみ]を選択した場合、メニューバーの[設定][全般設定]の[オプション設定]の画面の[登録語句とタグ属性]タブをクリックします。[常に編集ダイアログを開くタグ]のテキストボックスを編集(タグを入力して追加または削除)するとタグを入力したときにダイアログボックスが出るのを調整出来ます。
HTMLファイルを選択してHTML Project2を起動できるようにWindowsの設定をします。
例えば、次のようにテキストボックスに入ります。
C:\Program Files\Tool\Kaneto\HTML Project2\HtmlProject2.exe 「.exe拡張子が見えない」質疑応答へ移動
この設定でHTMLファイル(拡張子が".html"または".htm")のファイルを選択して右クリックしたときに出るショートカットメニューに「HTML Project2で開く」というメニューがあり、クリックするとHTML Project2が起動してそのファイルが読み込まれます。
ショートカットメニューで単に「開く」をクリックするとHTMLファイルに関連付けされているアプリケーション(普通Internet Explorer)が起動します。
そのほかこのソフトを使っていく上で設定しておくと便利だと思われる設定です。
美しい花を見たり鳥のさえずりを聴いたりするときに、花や鳥の名前を知っていた方がずっと親しみを感ずるし楽しくなります。Webページを作る時も使われている用語を理解している方が、理解が進みますし興味が深まります。「やりたい事が出来た」だけでなく、「こうやったからこうなった」と言えるようになりたいものです。それにしても馴染みの薄い言葉が出てくるのが悩みの種です。面倒ですからざっと見て実際にソフトを動かすことを先にやり、時折「戻って用語を確かめる」を繰り返した方がやりやすいと思います。。Webには沢山情報があります。ブラウザの検索窓で知りたい言葉を入力し、スペースを1つ空け「とは」と入力して検索すれば、知りたい情報を入手できます。(2007/4/23 add)
HyperText Markup Language の略。「ハイパーテキスト」とは、「普通のテキスト(文字列、文書)にない機能を持ったテキスト」という意味。超テキストというわけですが、「ハイパーリンク(文書のある場所から別の文書の場所へ関連付け)のあるテキスト」を言います。「マークアップ」は、文書に目印をつけて(マークアップ)その部分がどんな役割を果たしているか(ワープロソフトの書式のようなもの)を示すこと。「ランゲージ」は言語というよりは「言葉遣い・言い回し方」のこと。というように見ると少し乱暴な言い方ですが「ハイパーリンクのある文書の書き方」ということになります。画像・動画とWebページは賑やかになっていますが、元はコンピュータで処理しやすい文字の並んだ文書(電子文書)が基本でした。
Document Type Definition 文書型定義 HTMLの要素やその属性を細かく定義しています。W3Cは勧告でHTML4.0から、それまでにブラウザのバージョンアップに従い、本来の文書構造だけでなく、表現を表わすタグが多く利用されてきたものを、廃止する方針を採りました。HTMLは文書の構造を規定して、表現を表すものはスタイルシートを使用することを推奨しています。HTML4.0では3つのDTDを定めています。
フレームを使うページは、Frameset DTDでHTML文書を作ることになります。直ちに使えなくなるということではないでしょうが、これから作るページには廃止予定の要素や属性は出来るだけ使わないほうが良いでしょう。
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)といいます。「カスケード」は、「滝・(電気の)直列(縦つなぎ)・段階的に行う」などの意味があります。実例の方が判り易いと思います。
メモ帳などのエディタで次のような文字を入力してテキストファイルを作り、拡張子を[.CSS]として保存します。(ファイル名は例えばstyle.css)
HTMLファイルの<head>要素の中に
<link rel="stylesheet" type="text/css" href="style.css"> と書きます。
すると、<body>タグの中に属性を書かなくても背景色が表示されます。そのページの中に<h1>、<h2>、<p>要素を何回使っても同じように表示されます。また、別のHTMLファイルの<head>要素の中にこのCSSファイル"style.css"にリンクすることを書けば、同じ見え方のページを作ることが出来ます。
<head>要素の中にその文書(ページ)だけのスタイルシートを設定することが出来ますし、特定の要素のタグに属性として書き込めば、その要素のみに適用させることも出来ます。
HTML Project2を起動したときに左側に縦にあるウインドウが「ファイルリスト」です。メニューバーの[表示][ファイルリスト]をクリックすると表示しなくなります。編集画面を広く使いたいときに消しておくことが出来ますが、いろいろなファイルを呼び出して編集するときは表示させておいた方が便利です。「起動フォルダの設定」によりHTML Project2を起動したときにファイルリストに表示されるフォルダを指定できます。
ファイルリストは独立したウインドウです。大きさや位置を変更出来ます。ファイルリストの上辺にマウスポインタを置き「十字の矢印」になったときにそのままドラッグすると移動出来ます。また、編集画面との境にマウスポインタを置き「左右の矢印」になったときにそのままドラッグすると大きさを変えることが出来ます。
ファイルリストの上部には[一つ上の階層へ][デスクトップ][マイドキュメント]へ移動したり[エクスプローラー]を起動したりするボタンが用意されています。ファイルリストでフォルダを選択して[お気に入りに追加]ボタンをクリックすると、[お気に入りへ移動]ボタンをクリックしたときの一覧に登録されます。[お気に入りへ移動]で目的のフォルダをクリックしてファイルリストにそのフォルダを表示させることが出来ます。
お気に入りに登録されたフォルダを削除する時は、HTML Project2 が保存されているフォルダの中にある[Setting]フォルダ中の[FavoriteDir.txt]を開き削除できる。
下の横に長いウインドウは「ツリービュー」です。メニューバーの[表示]の[ツリービュー]をクリックすると表示しなくなります。表示してないときに[ツリービュー]をクリックすると表示します。ツールバー1の[ツリービュー拡大表示]をクリックすると、編集画面・ファイルリスト・ツリービューの部分が全部ツリービューとして大きく表示されます。
ツリービューの下の[階層][属性値][ビュー][検索]のタブで表示を切り替えることが出来ます。ツールバー1の[ツリービューの切り替え]をクリックすると順に切り替えます。
[階層]タブをクリックすると編集中のページのタグが階層に表示され、終了タグが洩れているなどの問題があるところに赤いマークがついて警告します。そこをダブルクリックすると編集画面の問題のある近くへカーソルが移動します。
ツリービューの[ビュー]タブをクリックすると、編集中のページが表示されます。編集画面の編集結果が即時反映されますが、反映されないときもあります。反映されていないときにツールバーの[表示の更新]をクリックすると反映します。「ファイル保存の設定」により逐次反映するようになります。
検索を実行するときに[検索]タブを開いていると、検索実行後ツリービューに検索したキーワードを含む行が行番号をつけて表示されます。目的の行をクリックすると編集画面でその場所へカーソルが移動します。
ツリービューは独立したウインドウです。大きさや位置を変更出来ます。ツリービューの左辺にマウスカーソルを置き「十字の矢印」になったときにそのままドラッグすると移動出来ます。また、編集画面との境にマウスポイントを置き「上下の矢印」になったときにそのままドラッグすると大きさを変えることが出来ます。
HTMLやCSS文書を編集する場所です。エディタですからTEXTファイルも編集出来ます。ファイルリストのファイルをダブルクリックするとそのファイルを編集画面に開くことが出来ます。また、ブラウザやメーラーの文書やファイルリストのファイルをドラッグ&ドロップで編集画面にコピー出来ます。
同時に複数のファイルを編集画面に開くことが出来、ファイル表示タブによって切り替えられます。メニューバーの[設定][全般設定]の[マージン]タブの[ファイル表示タブ]で、ファイル名が書かれたタブの位置を編集画面の上だけでなく、下に表示させたり、タブではなくボタンにしたりすることが出来ます。
多数のファイルを開いて編集しているとき、ファイル表示タブをドラッグ&ドロップして移動させ関連するファイルを隣接させることが出来ます。
画面上部のメニューバーとツールバーなどは、メニューバーの[表示]でそれぞれのバーにチェックを入れると表示出来ます。それぞれのバーの左端をポイントして、マウスポインタが十字の矢印になったときドラッグして移動出来ます。
アドレスバーとクイック検索バー以外のバーは、全てのボタンを表示できるスペースがないとき、左側のボタンを表示出来ないことがあります。そのとき非表示の部分に「>>」印が表示されています。ここをクリックすると下方に非表示の部分が表示されます。なるべく使わないバーやボタンは表示させないで、全てのボタンが見えるようにした方が使いやすいと思います。[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/ です。
Webページを作るのに「画像を用意する」「ロゴマークを作る」「挿入する音楽ファイルを探す」などが目立ちますが、情報の基本はテキスト(文字の文書)です。何を伝えるか文章をしっかり作って、それを読みやすくマークアップするのがWeb作りの基本です。ここでは次のような手順を想定してブロックレベル要素の設定を行う簡単なマクロを作ります。
伝える情報の文書を作る → HTMLファイルの基本設定
→ ブロックレベル要素を設定→ インライン要素を設定
→ スタイルシートを設定
私たちがWebページを作るのに使用するタグは限られています。Webページの骨組みになるブロックレベル要素のタグの入力を簡単にするマクロを作ります。ブロックレベル要素の中にインライン要素を入れて、必要に応じてそれぞれのタグの属性やスタイルシートを編集します。
2004年に作った「簡単なWebページを作る」では、タグを入力するときには、まず「<」を入力してキー入力支援機能を使いました。ツールバーのボタンを使うときは、例えば「春が来た」という文字列を選択してツールバーの[h1]のボタンをクリックします。ここで作るマクロは、カーソルを「春が来た」の中(中であればどこでも良い。見出しですから「春が来た」の前後に改行が必要)に置いて、登録したマクロボタンをクリックすれば、<h1>春が来た</h1> と「春が来た」の前後にタグがはいります。「選択する」か「クリックする」かの違いだけですが、よく使う<p>(段落)や<ol>(順序付きリスト)等のときは効果があります。
以上で<h1>の「現在の改行間」を選択して「第一段見出し」のマークアップというパターンのマクロが出来ました。ウインドウの左に[現在の改行間][第一段見出し−<h1>]と表示されています。マクロを実行すると上から順に実行していきます。
マウスでメニューバーの[検索][選択][現在の改行間]→[タグ][レイアウト][第一段見出し−<h1>]と操作することを一度に実行するのです。
メニューバーの[表示]で[マクロツールバー]にチェックが入っていれば、[h1]ボタンが見えるはずです。
メニューバーで[ツール][マクロの登録]をクリックして、[マクロの編集&登録]ウインドウの中央[新規]ボタンをクリックすると、前に設定したものが消えますから、上と同じようにして、他のブロックレベル要素のマクロを作ります。
開始タグ | 登録名 | 検索 | タグ |
---|---|---|---|
<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>は少し違います。
先ず、HTML Project2 に用意されていない「改行」を[登録タグ]に登録します。
つぎにマクロ登録をします。(定義リスト<dl>の例)
ol、ulも同様にして登録します。
この3つのマクロがうまく動くようにカーソルの位置の設定をしておきます。
ページ全体の設定でメニューバーの[ページ設定]でも出来ますが、クリック1回で文頭・文末に必要なタグを入力することが出来ます。先ずタグの登録をします。
次はマクロの登録です。
メニューバーで[ツール][マクロの登録]をクリックし中央[新規]ボタンをクリックして、[編集]の[すべて選択]→[登録タグ](下の方)の[html] で登録出来ます。作ったマクロが動かない?質疑応答へ移動
例えば、下のような文章があります。(柏崎市老人クラブ連合会編 「語り継ごう 柏崎の知恵ぶくろ」より)
この文章をHTML文章にしてみます。
HTML Project2 を起動した状態では編集画面は「新規」の何もない白いページになっています。もし何か編集中の場合はツールバーの「新規作成」をクリックして、編集画面に「新規」の何もない白いページを表示させます。「新規」のページは左上に文字カーソルが点滅していて文字を入力できる状態になっていますから、上記の文章を入力します。全文キーを打って入力するのは大変です。上記文章をドラッグして選択してコピーし「新規」編集画面へ貼り付けます。(ドラッグ&ドロップでもコピーされる筈です。)
すると「名前をつけて保存」のウインドウが出てファイルとして保存するように促します。キャンセルしても取り消しが出来ないようになっています。ほかの作業は出来ません。これは「表示前にファイルを保存する」設定をしてあるためで、例えば「tiebukuro.html」と名前をつけて保存します。編集画面の「新規」と表示されていたタブが「tiebukuro」に変わります。
このままでは下のツリーバーのビューで見ても、文字がピッシリ並んでいるだけで改行が入っていません。編集画面にある改行は、ブラウザでは無視されて一行の文字列になっています。
これからHTMLのタグをマクロを使って入れてみます。マクロを使わなくてもタグの必要な場所でタグを入力しようとすると、このソフトの入力支援機能が働いて楽に入力できるようになっています。(「簡単にWebページを作る」参照)
tiebukuro.htmlの文章の中(どこでも良い)をクリックしてカーソルを表示させて、マクロツールバーの「html」をクリックします。
メニューバーの[ツール][マクロの実行]をポイントして[html]をクリックでも、ツールバーの[マクロの実行][html]でも同じです。
それぞれのタグの説明は次の項でします。兎も角これでHTML文書になります。
先ず最初にHTML文書に必須の「タイトル」を入力します。これはブラウザで表示した場合タイトルバーに表示されます。閲覧者がお気に入りへ登録するとこのタイトルが表示されます。検索サイトのロボットが収集する重要なキーワードになります。
<title>◆</title>の◆の部分に「柏崎の知恵ぶくろ」と入力します。
続いて、最初の「語り継ごう柏崎の知恵ぶくろ」の中にカーソルを置いてマクロツールバーの「h1」をクリックします。「語り継ごう柏崎の知恵ぶくろ」を<h1>と</h1>が挟みます。これが一番大きい見出しです。
「■1章■健康に関すること」は二番目の見出しにします。「■1章■健康に関すること」の中にカーソルを置いてマクロツールバーの「h2」をクリックします。
次は、「以前は、薬は大変高価なものだったので、・・・」の段落の中にカーソルを置いて、マクロツールバーの「p」をクリックします。ツリービューで見ると第一第二の見出しが大きい文字で、次に「以前は・・・」の段落が表示されて、タグを入れてないところは文字がべたに並んでいます。
続いて「▼風邪▲」は三番目の見出し「h3」にします。
「・風邪ひきには卵酒がよい。」以下は、箇条書きになっているので「番号なしリスト−ul」のタグを入れます。
これまでに使われたタグの説明を簡単にします。詳しくは解説書籍や外部ツールに登録した「とほほのWWW入門」などのサイトで調べてください。
HTML文書では、文書中で使用しているHTMLのバージョンを宣言する必要があります。正確には右のように書くのですが、URLを省略しています。「HTMLの用語−DTD」で説明してある3つのDTDの中で、フレームと廃止予定の要素を使わない[Strict DTD]に準拠していることをここで宣言しています。(Strict: 厳格な・正確な・完全な)
もし、フレームを使う場合は、Frameset DTDを宣言しなければならないし、フレームは使わないが廃止予定の要素は使う場合はTransitional DTDを宣言しなければなりません。宣言した場合その内容に従った文章にしなければなりません。 「Transitional DTDとFrameset DTDの宣言の仕方」質疑応答へ移動
htmlは、HyperText Markup Language の略。この要素の内容が HTML 文書であることを示します。 HTML 文書には、<title>〜</title> がなければなりません。開始タグの中の属性[lang="ja"]は、日本語を使用することを示しています。
ヘッダ。文書のタイトルや文書全体に関する指定などのデータを書きます。
メタ。METAinformation(メタ情報)の略。後から追加される情報と言う意味でしょうか?
終了タグがありません。
http-equiv="content-type"はHTTPヘッダ名を指定し、content="text/html; charset=Shift_JIS"は内容を指定します。これで文字コードにShift_JIS(シフトJIS)を使っていることを宣言しています。こうすることによって文字化けすることを防ぎます。
他にmetaは、スタイルシートの基準言語の指定、文書の著者を明記、文書に関連するキーワードの指定、検索ロボットの制御、イメージツールバーの無効化などの機能があります。
リンク。外部スタイルシートを指定しています。この場合この文書のあるフォルダの中にある(まだ作ってありません)style.cssで設定してあるスタイルがこの文書に適用されます。
タイトル。HTML文書は<html>、<head>、<body> は省略可能ですが、<title> は省略出来ないことになっています。ブラウザのツールバー、履歴やお気に入り、検索エンジンの検索結果などで表示されます。検索ロボットが収集するキーワードのウェイトが高いと言われています。
この要素の内容に本文を書きます。HTML文書中に1個の<body>要素を書きます。中に包含する要素はブロックレベル要素で、インライン要素で直接入れられるものはHTML4.01 Strict の場合<script> のみです。
Heading(見出し) 見出しのレベルは h1〜h6 まであり、h1 が一番大きな見出。単にフォントの大きさを変更する目的では使うべきではありません。インライン要素のみ包含出来ます。
Paragraph(段落) 一つの段落をあらわします。インライン要素のみ包含出来ます。(ブロックレベル要素を中に入れることは間違い。)Internet Explorer では1行空けて表示されます。(スタイルシートでつめることが出来る。)
Unordered List(順序の無いリスト) 順序つきリストは<ol>で、1・2・3などの順序が付きますが、<ul>は黒丸・白丸・四角のマークが行頭につきます。項目の<li>要素のみ包含出来ます。
List Item (リストの項目) ブロックレベル要素とインライン要素を包含出来ます。
Break(改行) 強制的に改行を行います。行末で使い終了タグがありません。
「登録したマクロの使い方」で作った「語り継ごう柏崎の知恵ぶくろ」をマクロを使わないで作る場合について考えて見ます。メニューバーで作る方法は「簡単な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>にはリンクが書かれていますから、ブラウザで見ればスタイルシートが適応されて表示される筈です。「表示が変わらない」質疑応答へへ移動
少し見栄えが良くなりましたが、個々の説明は後にして少しインラインに埋め込む方法で変更してみます。
これで、リストの部分の行間が少し広くなり読みやすくなりました。
次は<p>の部分です。元の文章ではこの部分は囲んでありました。
<p style="color:#336633;background-color:#ccffff; margin:0 20%;padding:1ex;border-style:inset;">と
style属性が書き込まれました。
ブラウザで見ると、▼風邪▲以下が画面一杯に広がっていますので、左右に10%の余白を取って中央80%の部分に表示させます。
これで <body style="margin:0 10%;"> となります。
ブラウザで全体を見て好みで見栄えを調整出来ます。ブラウザやディスプレイによって同じファイルでも見え方が違いますが、色のバランスが見栄えに大きく影響しますのでいろいろな色で試し見てください。画像ファイルを全く使わなかったのですが、文字だけでも見やすく情報を伝えることが出来ます。
スタイルシートを外部ファイルに書く場合と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のタグの再編集]の隣に[スタイルシートの再編集]のボタンを作っておくと便利です。)
それぞれの属性の値に長さの数値を入れるときに単位も入力します。単位に絶対値と相対値があります。出来るだけ相対値を使った方が環境(文字の大きさ、ウインドウの幅、モニタの解像度など)の違う状態でページを見たときに対応できると思います。
絶対値の単位 | 相対値の単位 |
---|---|
|
|
スタイルシートのダイアログボックスの最初の[色と背景]で背景色や背景画像を設定できます。
属性を選んでテキストボックスの右のボタンをクリックすると、色を選択出来ます。
[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上には色に関した情報も沢山あります。
今まで出てきたスタイルシートの属性と値について簡単に説明します。
ここまで作ったページは単独のページです。自分の手元において置くファイルならこのままでもよいのですが、Webページとして他のページと関連を持ったせるにはハイパーリンクを設定します。また、現在見ているページが、サイトのどの位置にあるのかを同時に示すことが出来ると閲覧者が助かります。
ページのはじめの方にこのページへ入ってくるまでの経路と関連のページを表示して、クリックすると移動できるようにこのテキストの最初にあるようなリンクをつくります。
ここでは便宜上「語り継ごう柏崎の知恵ぶくろ」のページは、[html]フォルダーの「ホームページ」(ファイル名index.html)から「生活」フォルダ(フォルダ名life)の中のlife.htmlを通って、tiebukuro.htmlへ移動してくるものとします。
以上でリンクが入りました。このページを読み終えてから元のページに戻ることが出来ます。現在見ているページはリンクが張られていませんから通常の黒い文字で表示されています。また関連して違うページへのリンクも同様に作ることが出来ます。このテキストのソースの最初を参考にしてください。リンクの方法がわからない?質疑応答へ移動
このページについての問い合わせ先として、ページを作った人のメールアドレスなどを書いておきます。セキュリティの面から住所・氏名・電話番号などの個人情報は普通書きません。メールアドレスもウイルスメールをもらったり迷惑メールの標的になりますので公開したくないのですが、公開したページに責任を持つ意味がありますし、自分の作ったページに対する反響を知るためにもセキュリティ対策は別に用意して、書いておくとよいでしょう。私はメールアドレスにWebメールのアドレスを載せていますが、迷惑メールやウイルスメールが沢山舞い込んできます。我慢できなくなったらアドレスを変更すればよいのですが、Webページのアドレスを変更するのも大変なので我慢しています。別に掲示板で質問・意見を受ける方法もありますが、CGIなど難しいのでここでは扱いません。
ページの最後の</body>の前の行頭にカーソルを置いて、ツールバー3の[水平線]をクリックします。<hr> と表示されます。
ツリービューの[ビュー]で見ると水平線がウインドウの80%の幅で中央に表示されています。これは余白の設定されている<body> 〜 </body>の中にあるので、上の<p>や、<ul>と同じ様にstyle="margin:0 10%;" を継承しているためです。
今まで表示する文字(文章)を作っててからタグを入力していましたが、タグを先に用意してから文字を入力することも出来ます。タグを入力する方法はいろいろあります。入力するところにカーソルを置いて次のいずれかの操作をします。
タグが入力されたら「開始タグ」と「終了タグ」の間に情報を入力します。
例えば2005年2月7日 UP NET・陽だまり 電子メール と入力します。
表示の仕方はブラウザで違いますが、Internet Explorer で見ると斜体の太字で表示されます。
文字列[電子メール]を選択して、ツールバー3の[ハイパーリンク]をクリックすると、カーソルのところに<a href=" と表示され履歴がプルダウンリストに出ます。リストの最後のリンク先ソースのURL:値=%URL をダブルクリックすると[ファイルを開く]ダイアログボックスが開きリンク先のHTMLファイルを指定出来ます。
ここではメールアドレスを入れますので、mailto:hidamari@city.kashiwazaki.niigata.jp と入力します。
ページ閲覧者がこのリンクをクリックすると、メーラーが起動してあて先にアドレスの入ったメッセージ作成ウインドウが開きます。件名と本文を書けばメッセージが出来上がります。
以上で一先ず「語り継ごう柏崎の知恵ぶくろ」のページの形が出来ましたので、このテキストを終わります。次の段階のテキストも作成する予定です。
僅かなタグしか使っていませんが、このテキストで使ったHTML Project2 の使い方とHTML文書の基本的なものを織り交ぜてあります。実際にWebページを作るときは、いろいろな要素が入りもっと複雑になりますが、最初から複雑にしないで簡単なものを作って次第に自分の考えるイメージに近づけるとよいと思います。
Webページ作りは、「自分以外の人が見て下さる。」 ということを忘れないようにしたいものです。
今まで作ったページのソースは次の通りです。
[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追加)
ブラウザやメーラーの文章を選択して、ドラッグ&ドロップで、編集画面の任意のところへコピー出来る。
登録する語句を選択か選択コピーした語句を、メニューの[編集][お気に入り語句の登録]で登録しておき、[編集][挿入][お気に入り語句]で選択して入力できる。
タグを削除する範囲を選択して、メニューの[編集][選択部分の変換][タグを消去]をクリックすると、< >で囲まれたタグが削除され、テキスト文書だけが残る。この場合特殊文字はそのまま(「<」は「<」となる)残る。
[編集][選択部分の変換][タグ以外を消去]とすれば、タグだけが残る。
画像を挿入するところへカーソルを置いて、ファイルリストからドラッグ&ドロップするとメニューが出る。[imgタグを挿入]をクリックするとそのファイルを表示するタグが入力される。(これはSusieプラグインがインストールしてあるファイルに対応している。)
スタイルシートを再編集するときは、タグの再編集ダイアログボックスから[style-スタイル]を選んでスタイルシートのダイアログボックスに入ることができるが、スタイルシートを記述している[" "][{ }]の間にカーソルを置いて、メニューの[スタイル][スタイルの再編集](ツールバー1にアイコンを作ると良い)をクリックすると、スタイルシートの再編集のダイアログボックスが出る。カーソルを置くところを間違わないように注意。
スタイルシートのダイアログボックスの右下の[初期動作]で「何もしない」を選択しておくと、ダイアログボックスを何も設定されていない状態で開く。このときに「何もしない」以外を選択してあると、そのスタイルが設定された状態で開かれる。見えないところの設定に気が付かないでいると、思わないスタイルが設定されてしまう。[新規]ボタンで前の設定を削除できる。
メニューの[編集][BOX選択モード]をクリックして、マウスポインターをドラッグすると、複数行の一部を縦に選択することが出来る。選択した部分の編集処理が終わるとBOX選択モードは解除される。
マクロツールバーの表示順序はマクロを作った順になるが、わかり易い順に変更出来る。メモ帳などのエディタで[HTML Project2]フォルダの[Setting]フォルダの中の[MacroList.ini]を開くと、縦に[h1]、Key=、[h2]、Key=、・・・と表示される。例えば [h1]、Key=、 を一組として順序を変え、上書保存する。
メニューバーの[設定][全般設定]で[オプション設定ウインドウ]の[その他]タブをクリックして、[アプリケーションの初期状態]の[前回閉じた状態を再現]を選択しておくと、次回 HTML Project2 を起動したときに閉じたときの状態で開くことが出来る。
スタイルシートなどで色を選択するときに、Windows の「ペイント」の[色の編集]や画像処理ソフトで使うカラーパレットで選択出来ます。
メニューバーの[設定][全般設定]で[オプション設定ウインドウ]の[その他]タブをクリックして、[色選択をカラーパレットで行う]のチェックボックスにチェックを入れます。
Webセーフカラー以外の色も選択できますが、ブラウザによって表示が違う場合があります。
メニューバーの[設定]のプルダウンメニューで[テキスト非選択のたき前方タグのみ挿入]をクリックしてチェックを入れると、挿入する位置にカーソルを置いてメニューバーの[タグ]で選択したり、ツールバーのタブのアイコンをクリックしたりすると前方タグのみ入力されます。
[設定][テキスト非選択のとき前方タグのみ挿入]が薄い色になってチェックを入れることができない場合は、[設定][タグ挿入時のダイアログ表示]の[すべてのタグ]にチェックが入っています。[設定したタグのみ]に変更すると[テキスト非選択のとき前方タグのみ挿入]にチェックを入れることができるようになります。(この段落2006/8/31追加)
終了タグを入力するときは、ツールバーの[現在の位置でタグを閉じる]アイコンをクリックします。
このテキストによりマクロを作っている場合は、[改行間]等の範囲に前後のタグを入れる方法と、範囲を選択して前後のタグを入れる方法と、この前方タグのみ入れて要素の内容を入力して終了タグで閉じる方法の3つを使い分け出来ます。
HTML4.01にXMLを対応させた拡張できるHTML、XHTMLに対応する機能があります。メニューバーの[設定]のプルダウンメニューの一番上の[XHTMLモード]をクリックしてチェックを入れます。
<メニューバーの[ページ設定]の初期設定や宣言関係がXMLに対応したものになります。
このテキストの[マクロを作る][htmlのマクロ]で作ったマクロの[html]の内容は自動的には変わりませんから、メニューバーの[登録タグ][タグの登録]で[html]の[前方タグ]の内容を右のように変更しておきます。(XHTML 1.0 Strictの場合)
また、要素の内容のない(終了タグのない)img、br、hr、mataなどの空要素のタグの終わりを「 />」と閉じることが出来ます。
この設定(XHTMLモード)でタグは小文字で書き(大文字で記入する設定が出来ない)、終了タグを省略しないで、属性の値はダブルコーティションでくくって入力しますから、head要素の宣言やタグを入れ子にすることなどを注意すれば、XHTML対応のファイルを作ることが出来ます。
a要素(アンカー)のname属性が廃止されるので、替わってid属性を使用することになりますが、ブラウザの対応が遅れていますから、当面はname属性とid属性の両方をアンカータグの中に記述します。
HTMLとXHTMLは根拠が違いますから、ファイル冒頭の宣言を上記のように変えなければなりません。
XHTMLの場合次のように書かなければならないので、このHTML Project2の機能を使って変更します。
大文字で入力されているタグは、範囲を選択してメニューバーの[編集][選択部分の変換][全てを小文字に]で一括して小文字に出来る。
本文に大文字が入っていたり、<mata>の中のフォントの種類や<!DOCTYPE>、JavaScript の中の大文字まで小文字になってしまうので、範囲選択には要注意。
別の便利な方法;メニューバーの[タグ][タグ関連ツール][タグの変換][タグを小文字へ]をクリックすると、ダブルクォートで囲まれた属性の値のなかの大文字はそのままだが、タグと属性は小文字になる。JavaScript の<input>のなかの[onClick= ]等の属性も[onclick=]になってしまうが動作に影響はないようだ。
メニューの階層が深いので、ツールバー4にアイコンをこのテキストの[HTYM Project2の設定][1.ツールバーのカスタマイズ]の方法で登録しておくと、ワンクリックでそのファイル全体のタグが変換される。
入力済みの空要素のタグの最後に「 /」を入れるにはキー入力で入力できますが、空要素の中にカーソルを入れて、タグの再編集を実行すると「 />」となる。
リストの各項目(<li> list item)のように終了タグを省略していた場合は一つずつ入力していかなければならないが、入力する位置にカーソルを置いて、ツールバー4の[現在位置でタグを閉じる](メニューバーの[タグ][タグ関連ツール][現在位置でタグを閉じる])をクリックすれば終了タグが入力される。このとき原因がわからないが、タグの親の終了タグが入ることがあるので入力された終了タグを確認する必要がある。
まだまだ他にも修正しなければならないところがあるかもしれない。HTML互換性ガイドライン等のページを参考にすると良い。
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)
この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)