| ＷＺエディタ・マニュアル |
Ｗｅｂページとは何か？ とか、ＨＴＭＬとは何か？ といったことは、市販の参考書を読むなり、参考サイト（神崎正英氏の「30分間HTML入門」など）を見るなりして、各人が独学してもらいたい。
とりあえず、筆者の職場で有志が作った初心者用Ｗｅｂページ作成マニュアルに、上記サイトの要約が記載されているので、引用すると――。
- HTMLは文書の構成パーツを「要素」として（タグによって）マークアップする。
- HTML文書はhead要素とbody要素で構成され、headとbodyの両要素を合わせたものがhtml要素になる。html要素にはマーク付け言語情報を書く。
- head要素の中に、分かりやすいtitle要素を書く。文字コードも必要ならここでmeta要素を使って示す。
- body要素（本文）は段落（p要素）と見出し（h1〜h6要素）で構成され、必要に応じてリスト（ul, ol, li要素）を使って情報を見やすく整理する。
- ハイパーリンクはa要素を使う。
- 強調するところはem, strong要素で示し、画像が欲しければimg要素を使う
- 文書にはaddress要素で署名する。本文と署名のように役割が異なるセクションはhr要素で区切るとわかりやすい。
以上、The Web KANZAKIの「30分間HTML入門」より
これと合わせて、スタイルシートについても、付言しておく。
「スタイルシート（css ＝cascading style sheet）」は、1994年に発案され、1996年に最初の仕様書「css 1」が作られた。
Ｗ３Ｃの発足が 1995年だから、HTML の初期から、構想されていた、と考えてよいだろう。その後、1998年に「css 2」が勧告され、2005年の現時点でも、これが、ごく一般に使われている。（厳密に云うと、css とは、ＨＴＭＬに対するスタイルシートの最も一般的な記述言語の１つであるが、ここでは、ほぼ同一のもの、として扱っている）。
スタイルシート（css）の書式は、次の通りである。
セレクタ { プロパティ: 値 ; }
「セレクタ」とは、ＨＴＭＬでの「タグ」に相当し、「プロパティ」とは「属性」に相当する。
こうした用語を、しかも同じＨＴＭＬ関係なのに、別な言葉を使うのは感心しないのだが、今のところ適当な訳語がないため、カタカナ表記される。
各要素の宣言は、半角英数字で記述し、プロパティの後は「:（コロン）」、１つの宣言（値まで）の後は「;（セミコロン）」で区切る。
実際の記述例としては――、
h1 { color: #FFFFE0 ; }
――のようになる。
HTML とスタイルシートとの関係性を、簡単に云うと、本質的に表現力がない HTML を補完して、そのレイアウトやデザインに相当する仕様を、スタイルシートが担当している、と思えばいい。
小難しくいうと、HTML タグは、Ｗｅｂページの論理構造を記述し、スタイルシートは、その表現構成を記述する、とも云える。
スタイルシートを使うことによって、ページのデザインをHTML から切り離し、しかも複数ページのそれを、1個のファイル（＝css ファイル）で記述し、かつ運営することが可能になった。1枚のスタイルシートを書き換えることで、複数のページを、一度に、そのデザインを一新することも出来るのだ。
これは、Ｗｅｂデザイナーにとっては、非常に便利かつ、効率的なシステムである。
抽象的なことを、くだくだしく云ってても仕方ないので、具体的に、では、何が出来るのか？ というと、たとえば、テーブルタグによる凝ったレイアウトでもしない限り、普通のＨＴＭＬでは、行間指定が出来ない。だが、スタイルシートを使えば、これが（簡単に）可能になる。
例えば、このページでは、フォントを「15 pt（ポイント）」に、行間を「150%」に指定している。
詰めて書かれたページで、しかもテキスト主体だと、非常に見づらいものだが（最近のブラウザは、かなり賢くなり、そうしたページでも、適当に行間を開いて表示してくれるようになったのだが、それでもスタイルシートによる指定がないと、視認性は劣る）、この指定によって、かなり見やすくなっている（はずである）。
本当は、多種多様なユーザごとに異なる環境に対応するには、絶対表示であるポイント制などではなく、相対表示がいいのだが、異なる環境における動作確認をするためには、別なマシンが必要だし、それは面倒なので、こうしている。15吋のＣＲＴ画面だと、大きすぎて見づらいかも知れない。
試しに、行間指定を「無し」にした文章を、比較のために、表示してみよう。
以下に、このページを記述中にボツにした文章を、スタイルシートでの行間指定なし（行間「100%」指定に相当）、の設定で記述してみる。
どうだろうか？ かなり、鬱陶しい印象を与えるのではないか。
短い文章ならともかく、これが延々と100行以上も続くと、読むのをブン投げるユーザも出るだろう。
メールなどでも、そうだが、ＰＣの画面上で読むしかない文章は、出来るだけ、段落ごとに改行して空白行を入れた方が、視認性は向上する。
繰り返すが、ＨＴＭＬだけでは、上記のようにしか、表現できないのだ（これを回避するための、テーブルタグによるレイアウトというのは、裏技に近いものであり、今でも商業Ｗｅｂデザイナーは、かなり頻繁に、これを使ってはいるが、けしてＷ３Ｃが推奨する正規の表現方法ではない）。スタイルシートを加えるだけで、こうした窮屈さから逃れられる。
また、企業サイトではなく、個人のＷｅｂページであろうとも、読んでもらわなくては、意味がない。だからこそ、視認性が求められるので、スタイルシートによって、それが向上するなら、それに越したことはないだろう。
少々、面倒でも、またＷｅｂデザイナーでない個人であっても、今現在、この使用をためらうことは無益だと思われる。
そこで、まず、ＨＴＭＬ本体の前に、スタイルシートについて述べることにする。
ソースを見れば判ると思うが、筆者のＷｅｂページにおけるスタイルシートは、かなり長いものが多い。だが、これは、元になったページからコピーして使い回ししているためであり、そこに記述している全部の要素が必要だ、というわけではない。
必要かつ充分なスタイルシートとは、要するに、フォントサイズと行間指定だけだろう。
あとは、Ｗ３Ｃが「将来的に廃止予定につき、非推奨（deprecated）」としているタグなどの代替表現である。
とは云っても、フォント指定などで、今でもなお、Ｗ３Ｃが非推奨にしているタグは平気で使われている（それも、プロのＷｅｂデザイナーが作成した企業サイトでも使われている）ので、そう気にすることはない。
さらに云うと、必ずしも、最新のデザインは汎用性が高いとは云えない。
つまり、世の中には、古いマシンやＯＳ、そしてその上で動作するブラウザもオールドファッションドなものが未だに使われていることが結構、多い。
IE の ver.3.0 はさすがにないかも知れないが、Netscape Navigator の ver.4.5 あたりは、場所によっては、現役である。
マシンや環境の違い、ということも考慮に入れなければならない。
確かに世界のＯＳのシェアの９割はＷｉｎｄｏｗｓかも知れないが、Ｍａｃユーザもいれば、ＵＮＩＸ（Linux を含む）ユーザもいる。その上で動作するブラウザとして、IE 6.0 なんて、ないのが実情である。また、レガシーフリーでヴァージョンアップしてゆくＭａｃでは、新しいＯＳに古いソフトが付いていかないこともあり、ソフトに引きずられて、新ＯＳを導入できない、というユーザもいる。勢い、未だにNetscape Navigator 4.5 が現役、といった状況が発生する。
もちろん、通常は（商業Ｗｅｂデザインの世界では）、こうしたユーザを無視してＷｅｂページは作られているし、作っても構わないと思う。
必ずしも、いつも新しいものが良い、とは云わないが、そこまで面倒みきれない、というのも事実である。
未だにＭａｃ上で、Netscape Navigator 4.5 やIE 5.0 を使っている人を想定して、Ｗｅｂデザインをやろうとしても、どだい、動作確認のためのマシンが、大半のユーザの手元にないため、事実上、それは不可能な話だ。
割り切って、自分の環境で複数のブラウザ――IE 6.0 とMozilla FireFox あたり――で動作確認すればＯＫだろう（Mozilla とは、旧Netscape のオープンソース開発グループであり、FireFox は、2004年11月にリリースされた、その公式にして最新のブラウザである）。
だから、スタイルシートは、極端に云えば、基本的に、以下の記述だけでもいい。
<STYLE TYPE="text/css"> <!--
body {background-color : "lightcyan"; color : "black";} p.txt{font-size : 15pt; line-height:150%;} --> </STYLE>
上記のスタイルシートで、ページ本文は――、
「body {background-color : "lightcyan";」という指定によって、
（つまり、このページで使われている色）に指定され、
「 color : "black";}」によって、
ページ内のに指定されている。
また、段落タグは、「p.txt{font-size : 15pt;」によって、
に指定され、
「line-height:150%;}」によって、
に指定されている。
スタイルシートの記述書式として、前後を宣言文の「<STYLE TYPE="text/css">」と、「</STYLE>」で囲むことになっている。
また、スタイルシートを認識しないブラウザもあるため、スタイルシートの箇所だけ、どのブラウザでも不可視にするよう、ネスト（入れ子）にして、さらに「<!--」と「-->」で内側に囲んでいる（ＨＴＭＬでは、「<!--」のように、タグ冒頭に「!」がある要素は、コメント行と見なされ、不可視となる）。
各セレクタ（タグに相当）のプロパティ（属性に相当）とその値は、「;（セミコロン）」で繋げて、複数、記述することが出来る。
さらに、一般的に、スタイルシートの記述では、同じセレクタのプロパティは、１行で続けて記述するより、プロパティごとに改行して、その際、インデント（行頭揃え）を行うことが多い。上図の「body」と「p」要素のプロパティを参照。
理由は、当然、その方が見やすいからで、インデントは、半角スペースないし、タブを使って行う（筆者は、半角スペースを使っている）。
オートインデント機能をオンにしていると、インデントした行の次の行も、自動的にインデントされるので、それほど面倒な作業ではない。
これらに規則などなく、単に、視認性のために行っていることなので、方法は、各人の自由だが、沢山の項目を指定して、複雑になると、スタイルシートは（後で見直す時などは、特に）判りにくいものなので、やっておいた方がいいと思われる。
ここでは、スタイル要素の指定を、「class=" "」形式（クラスセレクタ）で記述しているが、「id=" "」形式（ID セレクタ）もある。この場合、スタイルシートと本文内での記述の書式が異なってくる。なお、「id セレクタ」は表現として、「class セレクタ」に優先するが、同一のＨＴＭＬ文書内で、そこに記述された 「ID属性値」は、同じ値を複数の要素に指定できない。すなわち、１つの要素（タグ）についてしか記述できない、というデメリットがある。混在して書く時は、注意が必要であるが、一般的に、「ID 属性」は１つの要素を特定するために使い、「クラス属性」は複数の要素で使う、と憶えておくといいだろう。
このあたりは、ややこしいので、ここでは「class=""」形式だけで通す。
筆者も実作では、多く「class=" "」形式を使っている。だが、くわしくは、各人、参考書を読んでもらいたい。
また、筆者は、（ボディタグ以外の）セレクタをクラス分けして、デフォルトのタグ以外に、複数の指定をするようにしている。
つまり、「p {font-size:15pt; line-height:150%;}」といった書式はしない。必ず、上図のように、クラス分けをしている。
１つのタグの指定にクラス分けをせず、つまり、そのタグをデフォルトで使うと、全て、そのスタイルシートが適応される、という方法は、（ボディタグ以外の要素では）止めた方が無難である。
クラスセレクタで、用途別に指定した方が柔軟性があるし、間違いも少なくなる。
特に段落タグの「<p>」などは、同じページ内で、さまざまな使い方が考えられるので、クラス分けした方がよい、と思われる。
なお、ここでは判りやすく、フォント色や背景色を、直接、カラーネームで指定しているが、対応してないブラウザのために、出来れば、（事典を参照して）16進法で記述した方がよい。赤や黒など、基本的な16色だけは、IE をはじめ、大抵のブラウザでも対応しているが、それ以外の色名は、Ｗ３Ｃでは、保証されていないからである。ちなみに、最初の記述例に挙げた「#FFFFE0 」は色名では「lightyellow」を表す。
また、これらのスタイル要素は、ヘッダ要素内の、タイトル要素(<title> 標題</title>）の後に記述するのが普通である。
タイトル要素は、通常、１行ですむから、スタイルシートは、その直後の、「</head>」の直前に記述することになる。
さて――。
この２つの指定だけで、デザイン上、かなりな違いが出てくる。
段落タグの指定範囲内では、従来までのキツイ行間「100%」は、ゆったりしたものとなり、いくつかの廃止予定の非推奨タグ（フォントタグやボディタグの背景色など）が、代替表示されている。
とりあえず、ビギナーがＷｅｂページを実作するに当たって、これだけの指定で充分だと思われる。
もっとも、Ｗ３Ｃの「deprecated＝廃止予定の非推奨タグ」とは云っても、現在、それが使われないか、というと、そうでもなく、実際には、結構、便宜的に使用されている。
特に「<FONT COLOR="色名">」といったフォント色の指定属性のタグなどは、カラーグラデーションといった裏技には不可欠なので、未だに、よく使われる。
要は、ケースバイケースで、最終的に、Ｗ３Ｃの勧告が奏功するに至るまでには、非推奨タグも、しぶとく生き延びるのだろう。
なお、付言しておくと、ＨＴＭＬでの色指定は、絶対的なものではない。環境によっては全然、違う色になる。ブラウザがスタイルシートに一部未対応なNetscape Navigator 4.x などは論外としても、ディスプレイの差（ＣＲＴか液晶か）や、その解像度・輝度の設定によっても異なる。自分の現在の環境だけで動作確認して安心していると、思わぬ陥穽におちいることがあるので、留意されたい。これは、カラーネームで記述しようが、16進法で書こうが同じである。
上記のスタイルシート（これは、内部に実装してもよいし、外部シートに記述して、ページにリンクしてもよいが、ここでは、判りやすく、ページ内に記述する形式をとる）で、指定されたプロパティ値を、実際には、どのようにページ本文に指定するか、というと――。
（背景色と、フォント色は、すでに決まっているので、問題ないが、段落タグ（セレクタ）の「<P>」のプロパティとその値は、ページ本文のタグ内で、別途、個別に指定しないと、有効にならない）
以下のように記述する。
<P class="txt"> ここから本文。 …………<BR> …………<BR> ここまで本文。 </P>
もちろん、強制改行の「<BR>」は、必要がなければ、記述しなくても構わない。
ブロックレベル要素である、「<P>」と「</P>」で、本文を囲めば、その前後に自動的に空白行が入るので（だから、段落タグ、というのだが）、その中で改行する必要がなければ、一連の文章を、段落タグ内に収める形で書いていって、問題はない。
ただし、あまり長い文章は、画面を見るユーザには苦痛なので、適当な区切りで空白行を入れ、視認性を高めた方がよいだろう。
ともあれ、こう記述することによって、上記の「本文」は、スタイルシートの指定が応用され、フォントサイズは15ポイント、行間は 150% で表示される。
しかしながら、面倒なことに、フォントサイズに関しては、その指定の仕方が沢山ある。
絶対指定でも、「pt （＝ポイント）」と「px（＝ピクセル）」、相対指定では「em （＝文字の倍率）」と、合計３つ。加えて相対指定で「より大きい」を意味する「large」や「より小さい」を意味する「smaller」などがあるし、「% （＝パーセンテージ）」で表示も可能だ。
ブラウザには、フォントの大きさを変える機能があるのだが、通常、ユーザは、見るＷｅｂページごとに設定を換えたりはしない。相対指定は、だから絶対指定より融通が効くが、ある条件下では、逆に非常に見づらくもなる。だが、これらは、もう好みの問題と云えるだろう。どちらがベストだ、とは云えない。
とにかく、どれか１つ知っていれば、それで充分だと思うので、とりあえず、ここでは、ワープロソフトなどとも整合性のある「pt : ポイント」で通すことにする（Photoshop 等のユーザは、「px : ピクセル」 が親しみやすいかも知れない）。各人、参考書を読むなりして、好きな書式で書いてもらいたい。
ただ、１つだけ注意。これらの指定は「統一」しておいた方がよい。ポイントとピクセル、またパーセンテージを、特に同一のセレクタ内や、同種類のセレクタ群の中で、混同して使うと、ブラウザによっては、不具合が生じる可能性がある。どれか１つに決めてもらいたい。
（同じセレクタ内でも、フォントサイズにポイントを、行間指定にパーセンテージを使っても、それは混同ではない）
| e-mail:noah@fialka.bizland.com |