| ＷＺエディタ・マニュアル |
エディタのマニュアルのはずなのに、なんだかＨＴＭＬの入門書のようになってきた(^^;)。
だが、仕方がない。ある程度、ＨＴＭＬに関することを述べておかないと、話の先が進まないし、これを読むユーザの誰もが、すでにＨＴＭＬに熟知しているとも思えない以上、脱線は許容範囲と了解されたい。
さて、スタイルシートの書式まで進んだので、今度は、具体的なＨＴＭＬ全体の書式について記す。
その前に――。
こんなことを云うと、なんであるが、必ずしも、真っ当な「正書法」に従って（つまり、Ｗ３Ｃの勧告や、ＨＴＭＬの参考書の通りに）記述しなくてもよい。ことに、最近のブラウザは、少し間違ったＨＴＭＬでも、誤りを吸収して、それなりに表示してくれるのだ。
だからといって、最初っから、きちんとした書式を無視していい、というのでないことは当然である。だが、あまり厳密にしなくても、いいのだ、ということは、心にメモしておいてほしい。
現実に、本職のＷｅｂデザイナーでも、そして、市販やＷｅｂ上でＨＴＭＬについて解説をしているような達人でも、いつもいつも、正書法に則って書いているわけではないのである。 注※
では、まず、大雑把なＨＴＭＬの作例を示そう。下記のＨＴＭＬは「こちら」のように表示される。
これは、「正書法」には外れているが、ブラウザでは、それなりに表示される、という例である。
<html>
<head>
<title>エディタとは何か</title>
<STYLE TYPE="text/css">
<!--
body { background-color : "lightcyan";
color : "black";}
p.txt{ font-size : 15pt;
line-height:150%;}
-->
</STYLE>
</head>
<body>
<h1>エディタとは何か</h1>
<p class="txt">
エディタとは、「書く」ことだけを目的に作られたソフトである。
書くだけなら、ワープロソフトでもいいようなものだが、本格的にモノを書く
という行為には、エディタが適している。
</p>
<h2>エディタとワープロソフトの違い</h2>
<p class="txt">
エディタは、基本的に、書くこと、そして書いたものを編集することを一義的に作られている。
他方、ワープロソフトは、いかに見栄えよく印刷されるか、ということが最終的な目標となる。
この差が、２つのソフトの違いだろう。
エディタの編集機能（検索、置換その他）は、ワープロソフトの及ぶところではない。
だが、それだけに、文字装飾や印刷の機能を本来的に持たない
（ＷＺエディタには付いているが、オーバースペックとの評もある）
だから、その分、書いた物を見栄えよく印刷する、といった目的には適していない。
</p>
<p class="txt">
では、なぜ、物書きがワープロソフトではなく、エディタを選ぶか？ というと
物書きの最終的な目的が、「見栄えよく印刷する」ことではないからだ。
物書きは、「原稿」を書いているのであって、それは企業内のオフィス文書ではない。
要するに、見栄えのよい版下を作成する必要はなく、それらの仕事は、編集を通して、
印刷所が代わりにやってくれるのであるから、書くことだけ、その編集作業だけに
専念すれば、それでよい。そのためには、本質的に目的の異なるワープロソフトを
使う必然性が、はじめから、ない、と云えよう。
</p>
</body>
</html>
ここでは、前ページで記したスタイルシートを採用している。
（なお、ページ表示の都合上、適当なところで改行しているが、上記の文章で、段落タグ内は、強制改行タグがないので、ブラウザ上の表示では、全部、つながって表示される）
ＷＺエディタでＷｅｂページを作成する際は、スタイルシートは、あらかじめ記述しておく。
それだけでなく、最初から、ＨＴＭＬ文書としての体裁を整えておく。
すなわち、必須タグである宣言タグの「<html>」と対の終端タグ「</html>」、ボディタグの「<body>」とその終端タグ「</body>」、ヘッド要素およびタイトル要素の「<head>」「<title>」やそれらの終端タグ「</head>」「</title>」などは、最初から記述する。
さらに、新規作成ファイルであっても、作成前に、拡張子「.html(または htm）」を付して、名前を付けて保存しておく。
こうすることによって、そのファイルは、ＨＴＭＬ文書としてＷＺエディタから認識されるので、各種の色分け機能などが働き、タグ、プロパティ、値などの見落としがなくなる。
なによりも、自分が、単なるテキストファイルを打鍵しているのだ、という意識ではなく、ＨＴＭＬ文書を作っているのだ、という自覚が、そこには生まれる。これが大切なことである。
さて、そうした前提で、上記の例に則して云うと、スタイルシートの適用と、エディタ機能の、兼ね合いを、どう付けるか、である。
ボディタグのプロパティは、さておき、問題は、段落タグの「<p>」である。
上図で、赤で記した「<p class="txt">」と、その終端タグ「</p>」で囲まれた範囲が、冒頭に記したスタイルシートの、段落タグの指定の適用を受ける。
つまり、この範囲内の文字列は、ブラウザ上では、絶対指定でフォントサイズが「15ポイント」、相対指定で、行間が「150%」になるのだ。
上記のＷｅｂページは、最初から文章が出来ているわけではなく、ページを作成しながら、内容＝コンテンツである文章を書いている。
つまり、あらかじめ書いてある文章を「流し込む」形式ではなく、内容を考えながら、このＷｅｂページは作られている、とする。
その場合、段落タグの機能（ＷＺエディタにおける、自動タグ挿入機能による、それ）が邪魔となる。
そこで、前述したように、とりあえず、段落タグは記述しておくが、その際、文章が１区切りつくまで、「<p class="txt">」とするのではなく、仮に「<★p class="txt">」と記述しておくのである。
こうすれば、不用意な改行操作（＝リターンキー押下）によって、強制改行タグ「<BR>」が挿入される畏れもなく、考える通りに、自由に文章が書ける。思考の速度に従って、それを邪魔されることなく、文章を書くことと、Ｗｅｂページ作成の両方を平行して、専念できる。
最終的にページ作成が完了するか、あるいは、文章の１区切りがついた段階で、エディタの置換機能を使って、「★」を削除すれば、本来の段落タグの機能が働くようになる。
削除は、「★」マークだけを置換するのではなく、検索文字列として、「<★p class="txt">」を、置換文字列として、「<p class="txt">」を入力して行う。これによって、例えば「卓駆★」などに付された「★マーク」まで、削除される失敗が避けられる。
ところで、スタイルシートは、筆者の場合、最初から、綿密なトータル・デザイニングを行って、計画的に書いているわけでもないため、後で追加することが多い。
人によっても違うだろうが、緻密な計算をしていても、やはり、途中で追加や修正をすることは、あると思われる。
（むろん、これは内部に実装した場合で、外部シートでは、この限りではない）
そうした際に、かなり長めのページを書いている時など、スタイルシートは冒頭にあるから、文章の現在位置と、スタイルシートを往復し、さらに、動作確認のために、その都度、ブラウザまで見なければならない。
これは、ちょっと面倒な作業であるし、往復するのもラクではない。
そのための Tips として、筆者は、次のようなことをやっている。
現在位置に、まず、「★★」と仮に入力する。ここで、すでに対応すべきスタイル要素の指定を記述しておいてもよい。
そして、キーカスタマイズしたツールバーの「↑（文書冒頭にジャンプ」アイコンで、冒頭に飛び、そのへんにある、スタイルシートに追加を行う。
そして、今度は、検索ボックスに「★★」を入力して、「↓（検索）」機能で、元の位置に戻るのである。
たったこれだけのことだが、作業効率は、かなり向上する。もちろん、追加・修正の作業が終わったら、「★★」は削除すればいい。
さらに、ブラウザでの確認は、その都度、ＣＴＲＬ ＋ Ｓ キー同時押下で上書き保存して、（あらかじめ立ち上げておいた）ブラウザに移って、これを「リロード（再読込）」して、動作確認する。
リロードは、アイコンをクリックしてもいいし、IE では、Ｆ５キー押下、Netscape では、ＣＴＲＬ ＋ Ｒのショートカットキーが使える。
筆者の例だと、フォントカラーなどの指定に、よく、この作業を使う。
「<span>」というタグを使うことが多い（本文タグで、「<font color="">」でもいいのだが、スタイルシートによる、部分的なフォントカラーの指定の方が柔軟性があるし、こちらをよく使う）。たとえば、本文中の、一部の文字列に対して、青や赤のフォントカラーで、該当箇所を強調したい、とする。
次のようなスタイルシートの追加となる（赤字の部分）。
<STYLE TYPE="text/css"> <!--
body {background-color : "lightcyan"; color : "black";} p.txt {font-size : 15pt; line-height:150%;} span.blue {color: "blue";} span.red {color: "red";} --> </STYLE>
これに対応する、本文タグの指定は、次のようになる。
<span class="blue"> 本文。 </span>
「<span>」タグは、インラインレベル属性だから、前後に改行などせずに、本当に局地的な部分を装飾するのに使える。
全体を「<P>」タグで指定した中で、本文の一部だけを、赤字や青字にしたい時など、便利である。
注※ 正書法に則ったＨＴＭＬ文書とは、どういうものか？ というと――。
まず、冒頭の１行目に、マークアップ言語の「ドキュメントタイプ定義（＝文書型宣言）」が必要である。これは――、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
――を行う。このように整えても、表示上は「こちら」のように最初のと見た目は、まったく変わらない。
だが、（他にも、あるのだが）、こうした措置を講じて、初めて、どこに出しても恥じることのない「よそゆき」のページとなり、晴れて公開できるのだ。
これらの宣言やタグが、どういった性質のもので、なぜ必要であるか、といったことは、参考書を読んでもらいたい（とても、一言では語り尽くせないのである）。
なお、こうしたＷｅｂページの文法チェックは、自分１人で行うのは、大変である。
文法だけでなく、「アクセシビリティ」といって、視覚障害者等に対応したチェックもある（IBM や富士通は企業として、これに取り組んでいる）。
だが、幸い、フリーサイトでやってくれるところがあるので、それを利用するとよい。下記のページでは、詳細な文法チェックを行い、間違いを指摘して、採点までしてくれる（満点とったら、「よくできました」マークが貰える。幼稚園児なみの喜びが得られよう(^^;)）。
「Another HTML-ling gateway」
| e-mail:noah@fialka.bizland.com |