戻る

ホームページ作成入門

NET・陽だまり 勉強会 テキスト

小竹 進
インターネットの利用が飛躍的に普及し、普通の高齢者が自己表現の場としてホームページを使う事が出来るようになってきた。いろいろな表現の手段がある中で、ホームページは簡易なものから高度な技術を使ったものまで選択の幅が広い。ホームページを作ること自体は、難しい技術を使わなくてもある程度のものは作ることが出来る。折角作ったものは大勢の人から見てもらいたいし、見た人から評価してもらいたい気持ちを持つ。
ここではホームページを作るために必要な基本的な知識や考え方に触れ、技術的な事はタグを含めたHTMLファイルの作り方やスタイルシートの簡単な説明と、初歩的なホームページを作るための情報を集めてみた。ホームページを作る人が多くなることに役立てば良いと思う。

1 どんなホームページが良いか

自分のホームページを作るには、まず人が作ったホームページを見てみる。新しいことをはじめるには、人真似から始めると良い。新しいことを学ぶときに、人真似は恥ずかしいことではない。色々な種類のホームページを問題意識をもって見てみる。
  1. どんな感じのホームページが自分のホームページにあうのか?
  2. もっと見たくなるようなホームページはどんなのが良いか?
  3. 二度と見たくないホームページは?
  4. じっくりと読ませるホームページは?
  5. 見て楽しくなるホームページは?
どんなものにするかは作る人の好みで決まる。自分が「いやだなぁ」と感じるホームページは、他の人もそう感じると思う。だからそういうものは作らなくなる。出来るだけ色々な人が作ったホームページを見ると良い。
インターネットに接続しはじめたときは、あっちこっちのホームページを回ってウエブサーフィンを楽しむが、「自分が作るとしたら…」という気持ちを持って改めて見てみる。

2 どんな内容のホームページを作るか

ホームページ作りで一番大切であり悩むことが、ホームページの内容を何にするかということだ。特別な研究テーマを持っているとか、人並み以上の趣味や特技があるという場合は、それをホームページの内容にすればよい。こういうものが無い人はどうしたら良いだろうか。
ペット(例えば飼っている犬)の写真を並べただけでもホームページは出来る。それで自分が満足できればそれでも良いが、折角作ったものなら多くの人から見てもらいたいという気持ちになる。見た人が「見てよかった」と思うような、人の役に立つような情報にしたいと誰もが思う。犬の表情の変化を旨く組み合わせて、言葉を入れ物語を作れば、電子絵本が出来る。また、犬の躾の体験記録にすれば、これから犬を飼う人、飼いはじめて間も無い人に喜ばれるかもしれない。もしかしたら犬好きの新しい友達が出来るかもしれない。食材は料理する人により美味しくもなるし、まずくもなる。食べる人によっても感じ方が違う。
ホームページは誰が見るか判らない。作った人が見てもらいたいと想定した人だけが、見るわけでない。その道の専門家が見ることもあるし、新しい知識・情報を得ようとして探し当てられるかもしれない。どんな人から見てもらっても良い内容にしておくよう心がけると良い。
ホームページを作る技術的な参考書はたくさんある。技術的なことよりも、どんな内容のページにするかが大変難しい。けれども、考え様によっては、出版物のように印刷してしまったら変更できないということは無く、公開してからも何時でも何回でも変更できるので、「気軽に作って次第に完全なものに仕上げていく。」ということが出来る。
ホームページは最終的には、自分が満足する物を作ることになる。それが独り善がりのものになるのか、多くの人からお世辞でなく賞賛の声を聞くようなものになるのか、それは内容と作り方にかかっている。
内容によってはプラグインなど特殊なソフトによりブラウザの機能を補わないと見ることができないものがある。「できるだけすべての人に見てもらいたい」という場合は、そのような機能を使わないシンプルな表現にする。しかし、どうしてもその特殊な機能を使って表現しなければ、自分の見てもらいたいものが表現できない場合がある。特殊機能の見るためのソフトは多くの場合、Web上から手に入るものだが、それを導入するかどうかは、ホームページを見る人が決める。普遍的な特殊機能ならページの中で導入を促す方法があるが、場合によっては特殊な機能を使わない人からは「見てもらわなくてもよい」と割り切ってしまう方法もある。また、特殊機能を使わないページを別に作って見る人から選択してもらうことも出来る。

3 どの方法でホームページを作るか

(1) 人から作ってもらう。
いまは「ホームページデザイナー」などと言うホームページ作りを職業とする人がいる。企業や作る時間の無い人には便利な存在だ。費用がかかるがあらかじめ良く打ち合わせして置けば、自分で作るよりも見栄えのするものになる。注意することは、ホームページは一度作ればそれで終わる訳ではない。常に更新しつづけることになる。元を作ってもらい、その後の更新を自分でやるのか、更新も人から作ってもらうのか考えておかなければならない。自分で更新するときはサイトの構成・フォルダ名・ファイル名・リンクなどが判りやすい構成にしてもらうと良い。
ホームページは作る人の感性が作品に大きく影響するから、作成を依頼するとき打ち合わせを十分にして、自分の希望を正確に伝えておく必要がある。また、依頼する人の選定を慎重にする。
(2) 自分で作る。
ワープロソフトWordで作った文章を貼り付けた図も含めて、「Webページとして保存」で保存してもホームページが出来る。30KBのWordのファイル(図を含まない)をこの方法でHTMLファイルを作ると、70KBのファイルサイズになる。Wordの書式をスタイルシートで細かく規定するのでファイルサイズが大きくなる。これを必要なタグだけで書くと7KB足らずで出来てしまう。ホームページの場合ファイルの大きさは、インターネット上で見える速さに影響する。本当に必要な情報なら数十分待ってもページを開くが、内容が判らないときは余程忍耐強い人でないと待ってくれない。Wordで作るのは簡単な方法だが、本格的に作るには良い方法とはいえない。
ホームページビルダーやFrontPageのようなホームページ作成ソフトというものがある。背景・ボタン・カットなど画像のツールも揃っている。タグを知らなくてもビジアルな画面で見栄えのするページを比較的簡単に作ることが出来る。しかし、細かな細工をするにはHTMLのタグの知識があったほうが良い。同じホームページ作成ソフトでも、アイコンやメニューでタグを呼び出すソフトがある。こちらはある程度タグの知識がないとホームページは作られない。
ホームページを作るソフトを使わなくても、テキストファイルを作るメモ帳などのエディタで、必要なタグとファイル名・文章を入力してファイル名の拡張子を「.html」か「.htm」にして保存すれば、HTMLファイルは出来る。この方法はある程度のタグの知識と文字入力の努力が必要。
人の作ったホームページを真似て作ることも出来る。人が作ったホームページには著作権が発生するが、誰でもタグを組み合わせてホームページを作ることが出来るのだから、タグの使い方を真似ることには著作権は発生しない。たとえば小説の作家が書いた文をそのまま使うことは出来ないが、作家が使った文法を見習って使う事は出来る。文法はみんなが使うものでその作家の独占ではない。HTMLのタグも同じである。気に入ったホームページのソースコードを元にしエディタで編集して、実際には単純には行かないが、画像と文を入れ替えれば体裁が同じで内容の違うホームページができる。タグの勉強にもなる。
テンプレートを使う方法もある。同じ形態で違うホームページをたくさん作る場合は、元になるテンプレートに要所要所の画像や文字を入れて出来上がる。変化がなく面白くないようだが、全体から見ると体裁の統一が出来ていて、落ち着いたホームページになる。陽だまりホームページの写真情報の多くはこの方法で作られている。

4 どんな体裁のホームページにするか

自分でホームページを作るとして(人から作ってもらうにしても、どのようなものを作ってもらいたいのか自分の希望を伝えなければならない。)、作るホームページの内容がどういう性格のものかによって、ホームページの形態が変わってくる。企業や製品の紹介を目的にしたもの、自分の趣味を紹介するもの、研究成果を発表するもの、地域の情報をまとめたもの、「私だってこんなことが出来る。」と自己主張するもの、人が見て喜びそうな(と自分が思っている)もの、等等…。自分が作ろうとしているホームページかどういう性格のものか考える。
どんな人からホームページを見てもらうのかと想定するのも、ホームページの性格を決める一つの方法になる。ホームページを見てくれる人は、通信費・接続料の経費を負担して、更にそのための時間を割いてみてくれるのだから、この人たちの期待に応えなければならない。こう考えると自己主張・自己満足だけのものや、独り善がりなものにはならない筈だが、見てくださる人の立場に立ったものを作るのは容易な事ではない。
ホームページの性格が決まれば、それに見合った体裁を考えればよい。作る人の好みが当然織り込まれることになるが、職業により作業着が決まるようにホームページの体裁も決まってくる。
ホームページの場合は一度決めた体裁は変更できる。ページの量にもよるが、リニューアルは比較的簡単に出来るから、兎も角作ってみて変えたくなったら変えてみるのも一つの方法である。

5 ホームページの構成を決める

ホームページは1ページで終わると言うことは余り無い。リンクで結ばれた複数のページになる。1つのページでも画面を分割してスクロール出来る「フレーム」という作り方もある。書籍のように目次があって、章や項目に分かれていて目的の場所のページを探すというようなことを想定して、ホームページの構成を決める。
書籍の目次に相当するものが、「index」「menu」などだが複雑なサイトでは、index が幾層にも階層になっていることがある。項目は次第に増加するので対応できるindex にしておくと良い。初めての人が訪れたときに、どの項目の中にはどういう内容があるかが、判り易くなっている必要がある。見たい項目に辿り着くのに、迷いながら辿り着くのと、手数がかかっても判り易いのとでは、訪れた人の印象がずいぶん違う。同じ事なら気持ちよく見ていただこう。
ホームページを作る側にとっても、構成は判り易くしておいた方が、後の手入れの難易に影響する。自分の作ったHPでも時間がたってから見ると構成が判らなくなっているときがある。index 毎にフォルダを分けておくとか、フォルダ名、ファイル名のつけ方を工夫して構成がわかりやすくしておくと良い。どのページでも使う共通したボタンなどの画像データは、最初のフォルダ(「html」が普通)に入れておき、特定のページで使うデータファイルは一つのフォルダにまとめて入れておく。
フレームで画面を仕切り、indexなどを何時も見えるようにすることができるが、多用すると構成が複雑になるし、内容を表示する画面が狭くなってしまう。ホームページは情報を伝える手段なのだから、肝心の情報の内容が見難いのは歓迎されない。
リンクを index を通さずに縦横無尽に張り巡らすこともできるが、判り易さを優先させると別の系列のページに移るときは、一旦 index に戻ってから次のページへ移動するようにした方がわかり易い。
index のページは、目次の役割を持っているのだから、ページ内容の「案内」に徹すべきであり、シンプルにして表示が速く出来るようにすべきだと思う。
項目が多くなりindex でページを追いかけいくのが面倒になってきたら、index のほかに「サイトマップ」を用意して、サイト全体の構成がわかり、直接目的のページにジャンプできるような仕組みが必要になる。
いずれにしても一つのフォルダに全てのファイルを入れてしまうと、後で修正するのが難しくなるので、リンクの組み方にあわせたフォルダを作っていくことを最初から考えておいた方が良い。

6 ともかくページを作ってみる

いろいろな考え方でいろいろな理屈があるが、ホームページをともかく作ってみると理解が早い。
パッケージソフトでホームページを簡単に作られるものがあり、HTMLというものを全く知らなくてもホームページは作ることが出来る。しかし、基本的な知識をある程度持った方が、理解が進む。またそれぞれのソフトの操作方法が違うので、いろいろなソフトの使用方法を一つのテキストに示すことは出来ない。ここではタグを直接扱う方法で、誰でも入手できるソフトを使って説明を進める。
実習1:実際に試してみる
Wordを起動して、「私の名前はXXXXXXXです。」と一行入力する。保存するときにファイルの種類を「Webページ(*.hym ;*.html)」にして保存する。(Word起動のときに「新しいWebページを開く」で起動すると、名前を付けて保存で直ぐに「Webページ(*.hym ;*.html)」で保存できる。)
別にメモ帳を起動して同じく「私の名前はXXXXXXXです。」と一行入力する。今度はファイルの種類は「テキストファイル」のままで、拡張子を「.htm」(又は「.html」)として保存(ファイル名はWordから作ったファイルと違う名前を付ける)する。ファイルサイズを比較してみる。例えばWordから作ったファイルは3,633B、メモ帳から作ったファイルは30B。両方のファイルをそれぞれダブルクリックして起動してみる。どちらもブラウザが起動してファイルを読み込む。ブラウザの画面には、何れも「私の名前はXXXXXXXです。」と表示されている。Wordから作ったファイルは文字が少し小さく表示されているかもしれない。ファイルサイズの違いは何だろうか?ブラウザで表示させている状態で、メニューの[表示][ソース]をクリックすると、メモ帳が起動してこのファイルのソースコードが表示される。
Wordから作ったファイルの場合、
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
から始まり、最後の「</html>」まで120行、いろいろと書かれている。これがHTMLファイルというもの。
一方メモ帳で作ったファイルは、「私の名前はXXXXXXXです。」と書かれているだけ。これは拡張子にHTMLファイルの拡張子を使っているので、ブラウザで開くことが出来たが、ファイルとしてはHTMLファイルではなく、文字コードによる情報だけのテキストファイル。(1文字2バイトの全角15文字で30バイト)サーバーのハードディスクに保管しておいて、ブラウザからの要求によってパソコンのモニタ上に情報を表示させるHTMLファイルの要件を満たしていない。

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
私の名前はXXXXXXXです。
</BODY>
</HTML>

HTMLファイルの基本的なタグは右のようになる。
半角の「<」と「>」で半角英文字を挟んだものを「タグ」という。ブラウザによって情報を表示する言語のようなもの。
この場合、タグの部分が半角54文字で54バイト、文章が全角15文字で30バイト、合計84バイト、ファイルサイズの98バイトとの間に14バイトの差がある。これは見えない改行(CR+LF)の情報が7箇所14バイト入っているため。

Wordで作ったファイルには、HTMLのタグだけでなく、スタイルシートやXMLの情報が埋め込まれている。ドキュメントを作成した人の名前(Wordの使用者名)やフォント名、フォントサイズなどさまざまの情報が入っている。
ここでファイルサイズを執拗に書いているのは、ホームページに限らず、通信に関するファイルは「小さいほど良い」からである。同じような結果が出るのなら、ファイルサイズを小さくすることを考えるべきだと思う。

7 超基本的なタグの説明

<HTML></HTML>
<HTML> で始まり</HTML>で終り、拡張子を「.htm」(又は「.html」)として保存したファイルが、HTMLファイルという。タグは半角で書く。大文字小文字は問わない。改行はブラウザでは無視されるが、ソースコードを読み易いように適当に入れておく。
<HEAD><TITLE></TITLE></HEAD>
ヘッダと呼ばれる部分。スタイルシート、XML、Java Script などの設定が書き込まれる。
<TITLE>この間にページのタイトルを入力する。</TITLE>
ここに入力された文字列は、ページがブラウザで表示されたときに、タイトルバーに表示される。
<BODY></BODY>
ボディというページの本体。このタグの間にページの内容を表示させるタグや文章・画像ファイル名などが入る。「6 ともかくページを作ってみる」で入力した「私の名前はXXXXXXXです。」は、ここに書き込まれる。
半角の「<」と「>」で挟まれたタグの中に、たとえばBODYの後に半角スペースを空けて「BGCOLOR="#FFFFDD"」と書き込むと、ページ全体の背景色を指定する。この部分を「属性」(BODY要素の属性)という。FFFFDDは、色のRGBの値を示している。16進数2桁で1色を表す。RがFF(十進数の255)、GがFF(十進数の255)、BがDD(十進数の221)で薄い黄色になる。

色をR・G・Bそれぞれ16進数2桁で指定することについては、テキスト「画像処理入門」(2 ディスプレイの色の情報)を参照してください。

<HTML>
<HEAD>
<TITLE>自己紹介</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFDD>
私の名前はXXXXXXXです。
年齢はYY歳です。
NET・陽だまりの会員です。
</BODY>
</HTML>

実習2:タグでHTMLファイルを作る。
ここでは便宜「自己紹介.htm」と名前を付けたが、実際にホームページをサーバーにアップロードして公開する場合は、ファイル名を半角英数文字に統一しておかないと、Unixのサーバではファイルを読み込まない。
「私の名前はXXXXXXXです。年齢はYY歳です。NET・陽だまりの会員です。」と1行に表示されている。ブラウザでは改行文字は無視されるてしまう。行を変えるには、行末に<BR>のタグを入れれば、ブラウザ上に改行して表示することが出来る。<P>を入れると改行して下に1行空白行を作る。メモ帳でファイルを開き、<BR>と<P>を行末に入れて上書き保存し、ブラウザで見て3行に表示されているのを確認する。
文字に変化をつけてみる。「XXXXXXX」の前後に<B>と</B>をつける。「YY」の前後に<FONT COLOR=red>と</FONT>をつける。「NET・陽だまりの会員です。」の前後に<FONT SIZE=4>と</FONT>をつけてブラウザで見てみる。(上書き保存をしなければブラウザで変更結果を見ることが出来ない。)

実習2で試してみたようにタグには、始めと終りの一組になったものと、1個のタグで働くものがある。一組のときは終りのタグは「/」(スラッシュ)が先頭に付く。
<P>はパラグラフ(paragraph)段落だが、最初のHTMLの規格では上で使ったように段落の終りに1個で使うように決められていた。HTMLの規格は次第に進化していて、次第に複雑な表現が出来るようになってきた。<P ALIGN="right">〜</P>という使い方をして、挟んだ文字列をこの場合は右寄せの段落にすることが出来る。現在でも互換性を保つために段落末に単独に使用して改行することが出来るが、正しくは<P>〜</P>という使い方になる。

8 タグの使い方

HTMLの規格は世界共通になっている。しかし、新しい機能はブラウザによって対応していない場合がある。同じブラウザでもバージョンによっても対応していたりしていなかったりする。機器やOSが違う環境で世界中のネットワークで情報を共有するためには、普遍的なタグを使うのが良い。特殊な目的でない場合は、できるだけ一般的な機能を使ってホームページを表現することが望ましい。
HTMLの文法?はあまり厳密でない場合がある。終りのタグが無かったり、「>」が1個足らなかったりしても表示に影響しないことがある。しかし、間違った使い方は違う条件では正しく表示されないことがあるので、正しい使い方をするようつとめるべきだ。
タグとタグの間の関係も決められていて、「囲めるタグ」と「囲まれるタグ」がある。
例えば
タ  グ囲めるタグ囲まれるタグ
<HTML>〜</HTML><HEAD> <BODY> 
<HEAD>〜</HEAD><TITLE> <ISINDEX> <BASE> <NEXTID> <LINK><HTML>
<BODY>〜</BODY><H1> <H2> … <H6> <P> <UL> <OL> <DIR> <MENU> <DL> <PRE> <BLOCKQUOTE> <FROM> <ISINDEX> <HR> <ADDRESS><HTML>
一つのタグの中に他のタグを入れるときは、開始タグと終了タグが組みになるようにする。
<HTML> <HEAD> <TITLE>…</TITLE> </HEAD>
<BODY> <H1>aaaaaaa</H1> <H2>bbbbbbb</H2> </BODY>  </HTML>
タグが互い違いになっていると正しく表示されないことがある。
(上の例の<H1>、<H2>は見出しのタグで、数字は文字の大きさを表す。)

9 よく使うタグ

タグの種類はたくさんあるが、全部のタグを覚えておく必要は無い。必要によって新しいタグを使えるようになればよい。また、変化もあり「8 タグの使い方」に出てきた <ISINDEX> <DIR> や私がよく使っていた <FONT> <CENTER> などは、「スタイルシート」が定められたので、将来廃止される予定だという。
今はホームページを作るソフトがいろいろあり、知らないタグでも使える。人のホームページを見て面白い表現があったら、ソースコードを調べて「どんなタグを使っているか?」と覗き込むのも面白い。知らないタグに出会ったら、HTMLを解説した本などで使い方を調べ、自分のホームページに利用すると良い。Web上でもホームページ作成を解説したサイトはたくさんある。
ホームページに良く使われている(と思う)タグの簡単な説明
○リンクの設定 <A HREF="△△△△">…</A>
△△△△はリンク先のURL。…の文字列やイメージをクリックすると指定したURLへジャンプする。別の文書の特定の場所、又は同じ文書内の特定の場所へジャンプするときは、ジャンプ先に <A NAME="***">…</A> とアンカー(***)を設定しておいて、リンクに別の文書のときは<A HREF="△△△△#***">…</A>、同じ文書内のときは <A HREF="#***">…</A>と設定する。
○イメージの表示 <IMG SRC="△△△△">
△△△△はイメージのファイル名(違うフォルダにあるときは、「/」で区切ったパスを記入する)。文字列との関係は、テキストと上下の間隔を HSPACE="kk"(kkはピクセルの数)の属性で、左右の間隔は VSPACE="kk" の属性で決める。イメージの位置は ALIGN="aaaaaa"で指定できる。aaaaaaa は LEFT,RIGHT,TOP,MIDDLE,BOTTOM などを指定する。
○区切り線 <HR>
属性を使って線に色をつけたり、太さや長さをを指定したり出来る。
○表 <TABLE><TR><TD>…</TD><TD>…</TD></TR></TABLE>
<TR></TR>で行を<TD></TD>で列を設定する。…に文字列やイメージを入れる。罫線の有無・太さなどは属性で指定できる。
実習3:上のタグを実際に使ってブラウザで確かめる。

10 タグをキーボードで入力するのは大変 ―― 支援ソフトを使う

タグを正確に一字ずつ入力するのは難しいことだ。そこでホームページ作成支援ソフトを使う。パッケージソフトの「ホームページビルダー」や「Front Page」などのソフトは、入力した結果が視覚的にブラウザに表示されるように見えるソフトで便利だ。フリーソフトでも同じような機能があるソフト(Homepage Manager等)があるが、今のところ使用方法の説明(Help)が充実していないようなので、タグ入力を支援するフリーソフトを紹介する。

「HTML Sorcerer」(ソーサラー)は、HTML言語を簡単に記述するためのエディタ。
Friction River Software
Masashi Tsugawaさんが作者。
E-mail : masatsu@mx2.tiki.ne.jp
Homepage : http://ww2.tiki.ne.jp/~masatsu/  に最新情報がある。

自己解凍圧縮ファイル「Sorce813.exe」をダブルクリックして、適当なフォルダを指定して解凍すると、10個のファイルが出来る。このソフトにはフリーソフトに通常付いている、説明のファイル(readme.txtなど)がない。解凍したファイルの中の「SETUP.EXE」を起動するとインストールを開始する。
途中でインストールするフォルダを指定する。初期値では、C:\ Friction River Software\Sorcereに25個のファイルが出来、スタートメニューのプログラムに[Friction River|Sorcerer]が登録される。*****.doc のファイルが4個あるが Help 作成の際のファイルが残ったらしい。user*.ini は、ユーザー定義タグが登録されるファイルで、雛型を登録すると Pattern*.hsr のファイルが出来る。必要ならデスクトップに Sorcerer.exe のショートカットを作成しておく。

Sorcerer.exe を起動するとタイトルが表示されてからウインドウが開く。使い方は簡単なヘルプが用意されている。ウインドウは左側にシステムのフォルダとファイルが表示される。中段のボタンで表示するファイルの種類を選択できる。右側の上部にタブに分けられたボタンがある。このボタンでタグを選択して入力する。下はエディタの部分で直接文字を入力することもできる。ボタンで入力するタグは Default で26種類用意されており、User設定で60種類設定できる。HTMLファイルの雛型は10個登録できる。作成途中でブラウザに表示して、確認しながら作業を進行できる。
実際にホームページを作りながらソフトの使用方法を習得すると良い。

11「HTML Sorcerer」(ソーサラー)を使う

Sorcerer(ソーサラー)は「魔法使い」という意味。

<HTML>
<HEAD>
<TITLE>
タイトルバーに表示されるテキスト
</TITLE>
</HEAD>
<BODY>

<!--本文を書いてください-->

</BODY>
</HTML>

1. 基本的なタグ
Sorcerer.exe を起動する。エディタ表示部に右のように基本タグが表示されている。上部の「TagColor」ボタンをクリックするとタグの部分が赤色(設定により色を変更出来る)で表示される。「タイトルバーに表示されるテキスト」を消して(ドラッグして選択した状態にしておいてもよい)、「自己紹介」と記入する。
この状態では左上の「Browser」ボタンが薄い色になって機能していない。メニューの[ファイル][名前を付けて保存]で保存すると、このボタンが黒色になり機能する。「Browser」ボタンを押すとSorcererで用意してあるブラウザが開くが、何も表示されていない。(一番上のタイトルバーにはファイル名とパスが表示されている。)
「Return」ボタンを押すと元のエディタに戻る。<BODY>タグの中の「<!--本文を書いてください-->」は、赤色になっているからこれもタグである。「<!--aaaaaaaa-->」はコメントのタグでブラウザの表示には関係しない。ためしに「<!--」と「-->」を削除してブラウザで表示してみる。「本文を書いてください」が表示される。
「本文を書いてください」を消して、「私の名前はXXXXXXXです。年齢はYY歳です。NET・陽だまりの会員です。」を入力する。「…です。」の後にEnterキーを押して改行を入れて3行にしても、ブラウザでは1行に表示されてしまう。
段落と改行はタグで入れないとブラウザに反映しない。改行を入れるには、「…です。」の後に文字カーソルを表示させて、エディタ部分の上の「Default」タブの「文字」タブをクリックして、「改行」ボタンをクリックすると「<BR>」のタグが入る。「一行空け」ボタンをクリックすると「<P>」タグが入る。何れの場合も空白行が入るが、ブラウザでは「<P>」のみ空白行を表示する。
この「Default」タブの「文字」タブでは、文字カーソルが点滅しているときは、「改行」ボタンと「一行空け」ボタンが選択出来る。文字列を選択しているときは、「文字サイズ」「文字強調」「中央揃え」が選択できる。
背景色を設定する。「<BODY>」の「>」の前に文字カーソルを置いておき、「Default」タブの「色指定」タブの「背景色」ボタンをクリックする。色を選択するウインドウが開く。基本色の中から適当な色を選択して「OK」ボタンをクリックする。
作業が一段落したら「Browser」ボタンをクリックしてどのように表示されるか確かめる。Internet Explorer で表示される。このときにファイルが変更されていると上書き保存される。「Return」ボタンをクリックするとエディタ表示部へ戻る。リンクをたどって別のファイルへ行き右上の「Return This」ボタンをクリックすると、その時のファイルをエディタに読み込んでエディタ表示部へ戻る。
2. 色の指定
「Default」タブの「色指定」タブで「背景色」ボタンをクリックして出る色を選択するウインドウでは、基本色が48色表示されている。これ以外の色は「色の作成」ボタンをクリックして作成出来る。色と明るさをマウスでクリックするか、右側の赤・緑・青のテキストボックスで、それぞれ0〜255の数字を入力して、求める色を作り「色の追加」ボタンをクリックすると基本色の下の「作成した色」に追加される。この0〜255の数字は、「7 超基本的なタグの説明」の16進数2桁を十進数で表したもので、例えばR=255・G=255・B=221とした色を作成して背景色に指定すると<BODY>タグの属性として「BGCOLOR="#FFFFDD"」が入る。
「Default」タブの「色指定」タブには他に「全体文字色」ボタンがある。特に指定しなくても良い。背景色に合う文字色を選ぶ場合は指定する。「ホットテキスト」とはリンクを設定するときのアンカータグ(<A HREF="△△△△">…</A>)に挟まれるテキスト(この場合「…」)をいう。テキストの左のチェックボックスにチェックを入れ、「色指定」ボタンをクリックすると色指定のウインドウが出る。ここで色を選択して「OK」ボタンをクリックすると、テキストボックスに16進数で表示される。
背景や文字色はホームページをデザインするときに重要な要素である。背景画像を使う場合は文字が読みやすい落ち着いたものを使用する。薄い色の背景色に黒の文字を使うと失敗しない。ページ全体の色も文字色を除いて4色以内にする。文字色を多種類にすると読み難くなる。
3. 「Default」のタブで挿入出来るタグ
Sorcererの「Default」のタブには、他に「リスト」「リンク」「背景」「その他」「特殊」がある。(Defaultは「初期値」「既定値」で予め決められてあるもの)簡単なヘルプが用意されている。メニューの[ヘルプ][目次]で「目次」タブの「HTML Sorcerer」をダブルクリックして開き、「機能紹介」「挿入可能なタグ」を開く。「Default」のタブで用意されているタグを挿入する方法が説明されている。ヘルプにもボタンにも挿入されるタグそのものは表面に出てこない。エディタ部分に表示されてはじめて、どういうタブか見えてくる。
「リスト」タブには、各項目の初めに記号(●、○、■)をつける記号型、番号やアルファベットを付ける番号型、項目名と項目の説明の定義型がある。(私が試したところでは、定義型の設定ウインドウで「定義語と定義文を同一行に」にチェックをつけても変化はない。)
「リンク」タブには、HTMLファイルからの相対的なリンク先を指定する相対的、他のサイトへ飛ぶ絶対リンクのURL指定、同一ページ内の特定の場所へジャンプする目印を作るアンカーといわれるジャンプ先、ホッとテキストを挟みジャンプ先を指定するジャンプ、画像を表示させる画像がある。
「背景」タブには、横線を引く水平線、背景に画像ファイルを指定する背景画像、がある。
「その他」タブには、6段階の文字サイズを指定する見出し、Java Script の外枠をテキストに埋め込むタグを指定するJava Script、表を作る表組作成、左右にスペースを開ける引用文、文字に斜体フォントを使う文責表示がある。
「特殊」タブには、選択された範囲内の「<」と「>」をタグではなく文字そのものを表示させるために、それぞれ「<」と「>」に一括変換する<>変換、文字毎に色を変えるグラデーション表示するGradation、選択されたタグの中の文字を小文字にする小文字変換がある。
4. 挿入するタグをユーザーが設定する

「Default」のタブだけでは挿入できるタブの数が限られている。このソフトではユーザーが使用するタブを60種類設定出来る。

実習4:段落のユーザー定義タグを設定する。
<P>は段落のあとに空白行が入いるタグで、閉じるタグを省略することが認められている。行末に単独に使用出来るが、<P>〜</P>と一組で使用するのが本来の使い方。
「<P></P>」を入力するボタンを設定する。
「User T」タブをクリックし、その中の「定義 T」タブを選択して右クリックする。
「タグ名登録」のダイアログボックスが開くので、テキストボックスにタグ名を「ページ」と入力する。(ページ設定関係のボタンをこのタグに作る予定だから「ページ」としたもので、適当な名前をつける。)
何も設定していないボタンを右クリックする。
「ユーザー定義設定ダイヤログ」ダイアログボックスが開く。
「ボタンキャプション」テキストボックスにボタンの名前を「段落」と入力する。
(キャプションは「見出し」「短い説明文」などの意)
「ボタンの状態」ラジオボタンは、「テキストを選択して有効」をクリックする。
「始めタグ」テキストボックスに「<P>」と記入する。
「終タグ」テキストボックスに「</P>」と記入する。
「OK」ボタンをクリックすると確定する。

この場合、エディタ部分でテキストを選択しないとこのボタンが使用できない。選択したテキストの前後にタグが入る。「ボタンの状態」を「テキストを選択しない状態で有効」を選択すると、テキストを選択しなくても使用出来る。この場合は、前後のタグの間にテキストを入力する。<P>のタグの中に半角スペースを空けて「ALIGN="center"」と属性を記入すると、この段落は中央寄せになる。しかし、このALIGN属性はHTML4.0では「使用が推奨されていない属性」とされている。これからはスタイルシートを使って「STYLE="text-align:center;"」という属性の書き方が推奨されることになる。

実習5:一覧表でユーザー定義タグを設定する。
実習4では、ボタン一つずつ選択して設定していく。設定済みのものを変更するときは、ボタンが使用できる状態で右クリックすると「ユーザー定義設定ダイヤログ」が出る。
ユーザー定義のボタンが多くなると一覧表で設定したほうがわかりやすい。メニューの[オプション][ユーザータグ編集]をクリックすると、タブとタグの一覧が出る。一番左の「タブまたはタグ名」列の該当欄をダブルクリックすると設定ダイアログボックスが出る。ここでも新たにユーザー定義タグを設定出来るし、変更も出来る。確定させるには「Save and Return」ボタンをクリックする。
この一覧画面でボタンの位置を移動することが出来る。移動するタグを選択(タグ名をクリック)して、「Up」または「Down」ボタンをクリックして移動する。

実習6:ユーザー定義タグのカスタマイズ
タグの中には属性で位置や数字を変化させたいものがある。例えば「実習4」の説明の終わりにある「STYLE="text-align:center;"」は、右寄せの場合は「STYLE="text-align:right;"」になる。
Sorcerer にはユーザー定義タグのボタンをクリックすると、タイヤログボックス(5種類ある)が出てタグの詳細な設定が出来る機能がある。(詳細はヘルプを参照)
例えば、「<DIV STYLE="text-align:****;"」と「****」の部分に、「left」「center」「right」の何れかを入力する場合には、「ユーザー定義設定ダイヤログ」ダイアログボックスの「始めタグ」に次のように入力する。
<DIV STYLE="text-align:%&M(LEFT,CENTER,RIGHTの別を入力してください)&%">
これでボタンをクリックすると「LEFT,CENTER,RIGHTの別を入力してください」という説明文とテキストボックスのあるダイアログボックスが現れ、「right」と入力して「OK」ボタンをクリックするとエディタに右寄せのタグが入力される。
注: <DIV>〜</DIV> は、「文章のブロックを定義するタグ」とわかり難いが、<P>と同様段落を定義するときに使うタグ(と思う)。違うのは <P> は段落の後に空白行が入るが、<DIV> は空白行が入らない。

ユーザー定義タグはそれぞれSorcerer.exeのあるフォルダにuser1.ini〜user12.ini のファイルに保存される。このファイルをコピーすれば違うPCに同じ環境を作ることが出来る。ユーザー定義タグの使い方次第で、このソフトが生きる。

5.雛型HTMLファイル
繰り返して同じ形式のHTMLファイルを作る場合に雛型として登録することが出来る。原型になるHTMLファイルを要所要所に「<!--aaaaaaaa//-->」というように説明(aaaaaaaaの部分)文を書いたコメントのタグを入れたり、挿入する文字列やファイル名の場所を判り易く「??????」などの文字列を入れたりして作成する。
雛型が出来上がったら、「Pattern」タブの「雛型1」タブにある設定して無いボタンを右クリックする。「情報」という小さいウインドウに説明がでる。読んで「OK」ボタンを押すと、雛形登録のウインドウで雛型ボタンに表示するタイトルをテキストボックスに入力して「OK」ボタンを押す。雛型が登録されSorcerer.exeのあるフォルダに「Patternx.hsr」(「x」は0から始まる一連番号)のファイル名で保存される。

雛形を利用するときは該当のボタンをクリックすると、雛形が表示される。このまま編集出来るが拡張子が「.hsr」のままだから、ファイル名を「xxxxx.htm(またはhtml)」として(自分のホームページ用のフォルダに)保存し直さないと、「Browser」ボタンを押してブラウザで確認できない。雛型のまま上書き保存しないように注意する。

6.サーバーにアップロードするFTP機能
Sorcerer にはHTMLファイル、画像ファイルなどをWebサーバーに登録したり、FTPサーバーからファイルをダウンロードしたり出来る機能がある。
「FTPConnect」ボタンをクリックすると、「FTP接続ダイヤログ」というダイアログボックスが出る。ここでFTP接続の設定をする。
「ホームページ種別」には、3つのホームページを登録が出来る。そのうちの一つのラジオボタン(白い小さい円))を選択(クリック)して、「保存」ボタンをクリックすると、「ホームページ名確定」ダイアログボックスが出る。ホームページ名をテキストボックスに入力して「OK」ボタンをクリックする。ラジオボタンの脇の「新規」が入力したホームページ名に変わっている。
続いて接続のための設定をする。プロバイダごとに設定の内容が違うので、プロバイダからの書類や、プロバイダのホームページで確認しておく。
「ユーザー名」 一般にメールアドレスのアカウント(「@」より前の文字列)である場合が多い。
「パスワード」 インターネット接続時のパスワード(Login Password)か、メールのパスワード。
入力してもテキストボックスには「*(アスタリスク)」が並ぶ。
「ホスト名」  HostName,Host Address などブラウザによって名称が違う。
DNSサーバー名かネームサーバーアドレスを使っている。
「ポート番号」 入力してある「21」のままにしておく。
「パスワードを保存する」にチェックを入れると、接続のたびにパスワードを入力しなくても良いが、パスワードが Sorcerer をインストールしてあるフォルダの Sorcerer.ini に保存されてあるので、PCの中を他人が覗き込める場合は注意が必要である。
「OK」ボタンをクリックすると接続設定が終り、接続を開始する。
(ダイヤルアップのときは回線をプロバイダと接続しなければならない。)

FTPサーバーに接続すると、FTP表示部の下部の「***********(ホスト名)に接続中」が「***********(ホスト名)に接続しました」に変わる。中央にサーバーの中のフォルダ・ファイルが表示される。アップロード・ダウンロード・削除などの操作が出来る。画面の機能ボタンのほかに、左下のローカルPC(操作している自分のPC)のファイル表示部との間の、ドラッグ・アンド・ドロップでも操作出来る。機能ボタンの使い方はヘルプにある。

12 スタイルシート(CSS= Cascading Style Sheets)

WebページはHTML(Hyper Text Markup Language)で書かれている。HTMLはバージョンアップして、新しいものはいろいろな表現が出来るようになったが、数年前では画像の脇に文字列を回りこませられないなどデザインは得意でなかった。HTMLはもともとデザインをするようには作られていなかった。見た目を工夫する要求が高まり、HTML 3.2 ではデザイン設定の面をCSSが担当することになった。Internet Explorer 3.0 が始めて CSS Level 1 に対応した。今後Webページのデザインに関する部分は、次第にHTMLのタグの要素や属性から、CSSに移っていく。すでにCSS Level 2 が勧告されている。
1. スタイルシートの書式
セレクタ {属性(property):値(value);}
「セレクタ」はスタイルを設定する対象で、例えば「P」「H1」などのタグ。複数のタグについて設定するときは、「H1,H2,H3」というようにコンマで区切って設定出来る。
「属性」はセレクタ(スタイルを設定る対象のタグ)のスタイルを設定する部分。例えば「文字の色(color)」「余白(margin)」「背景色(background-color)」「文字サイズ(font-size)」など。
「値」は属性に対するスタイルを指定する部分。例えばcolor(色)属性では何色にするかを指定する。

属性と値の間は「:」(コロン)を入れ、値のあとは「;」(セミコロン)を入れる。(セミコロンはスタイル設定の区切りだから、設定が1つの場合は入れなくても良いが、常に入れる習慣をつけておく方がスタイルを拡充するときに間違いが少ない。)

2. スタイルシートの書き方
スタイルシートの書き方には3通りある。
外部ファイルの読み込み
複数のページ(HTMLファイル)に同じスタイルシートを適用する場合は、1つのスタイルシート設定のファイル(スタイルシートファイル)を作り、それぞれのページ(HTMLファイル)に読み込ませる。共通のデザインになりサイト全体が同じ雰囲気になる。

スタイルシートファイルは、拡張子を「.css」にして、それぞれのHTMLファイルの<HEAD>タグ内に<LINK REL=STYLESHEET HREF="*******.css" TYPE="text/css">と入れてリンクを張る。

実習7:CSSファイルを試してみる
次の3つのファイルを作る。何れもメモ帳などのエディタに入力して、それぞれ指定された拡張子で保存し、2つの「.htm」ファイルをブラウザで開いて見る。
ファイル名style.css
内  容
BODY {background-color:#ffffdd;
margin:0% 5%;}
H1{font-size:x-large;
font-weight:bold;
color:red;
text-align:center;}
H2{font-size:large;
color: #008040;
color: #008040;
P{line-height:150%;}
属性(property)の説明
background-color背景色
margin余白
font-sizeフォントサイズ
font-weight文字の太さ
color文字の色
text-align文字の水平位置
line-height行送り
値(value)の説明
#ffffdd #008040 red色の値
x-large large文字の大きさ
center位置の値

ファイル名sample1.htm
内  容<HTML>
<HEAD>
<TITLE>サンプル1</TITLE>
<LINK REL=STYLESHEET HREF="style.css" TYPE="text/css">
</HEAD>
<BODY>
<H1>外部ファイルの取り込み</H1>
<H2>CSSファイルを読み込みます</H2>
<P>外部ファイルを読み込むスタイルシートは、どのページも同じデザインになって、サイト全体の統一が図られます。<BR>
ファイルごとに設定をしなくてすみますから、タグが複雑になりません。
</P></BODY></HTML>


ファイル名sample2.htm
内  容<HTML>
<HEAD>
<TITLE>サンプル2</TITLE>
<LINK REL=STYLESHEET HREF="style.css" TYPE="text/css"> </HEAD>
<BODY>
<H1>こちらはサンプル2</H1>
<H2>サンプル1と同じデザインです</H2>
<P>統一されたデザインは単調な感じになりますが、画像などで変化をつけることも出来ます。</P>
</BODY></HTML>
HTMLファイル内の埋め込み
一つのHTMLファイルの中のスタイルシートの設定を纏めて書いておき、それぞれのタグに適応させる。ページ(HTMLファイル)ごとにデザインを設定するときに使用する。
<HEAD>タグの中に、<STYLE TYPE=杯ext/css?>〜</STYLE>というタグを書き、「〜」の部分に設定するスタイルシートを書く。この場合スタイルシートに対応していないブラウザでは「〜」の部分が文字列として表示されるので、コメントのタグの中に「〜」の部分を書く。

実習8:HTMLファイル内埋め込みを試してみる
つぎのHTMLファイルを作ってブラウザで見る。

<HTML>
<HEAD>
<TITLE>HTMLファイル内埋め込み</TITLE>
<STYLE TYPE="text/css">
<!--
    BODY    {background-color:#ccffcc; margin:1% 10%;}
    H1      {font-size:x-large; font-family:"MS ゴシック";
            background-color:#66ff66;
            border-style:outset;color:red;text-align:center;}
    H2      {font-size:14pt;color: #008040;
            text-align:center;}
    P       {line-height:150%;}
//--!>
</STYLE>
</HEAD>
<BODY>
<H1>HTMLファイル内埋め込み</H1>
<H2>ヘッダにスタイルシートが設定してあります</H2>
<P>スタイルシートはWebページのデザインを細かく設定することが出来ます。<BR>
必要な属性やその値については、解説書や関連のWebページを見て、調べてください。<BR>
面白い使い方がありましたら、お互いに情報を交換しましょう。</P>
</BODY>
</HTML>


注1「<!--」 〜「//--!>」で囲むとコメントになり、スタイルシートに対応していないブラウザでは無視されて、この部分は表示されない。
注2この例では一つのタグに対して、一つの設定になっているが、複数のタグに対して同じ設定をすることや、一つのタグに複数の設定を用意して使い分けをすることが出来る。
注3「margin:1% 10%」は上下1%左右10%の余白を設定している。ウインドウの大きさに対する比率で設定している。%のほかにmm、やポイント、ピクセルなどのサイズでも設定出来る。
注4「line-height:150%」はこの場合段落の行送りを親要素(BODY)の行間(標準)に対する比率で設定する。 HTMLでは行間が少なく読み難いが、行送りを適度に設定すると読みやすくなる。
インラインの埋め込み
タグに直接STYLE属性としてスタイルを書いて設定する。直接書くのでセレクタを指定する必要が無い。前述の「外部ファイルの読み込み」と「HTMLファイル内の埋め込み」で設定したファイルの中で部分的に特別のスタイルを設定するときに使う。

実習9:インラインの埋め込みを試す。
実習8で作ったファイルの<BODY>〜</BODY>のなかを次のとおり入れ替える。

<H1 STYLE="color:yellow;">文字色を黄色にしました</H1>
<H2 STYLE="border-style:double;">HTMLファイル内埋め込み+インライン埋め込み</H2>
<P STYLE="font-weight:bold;">フォントを太字にします。<BR>
実習8で作ったファイルのBODYの中にインラインでスタイルシートを設定して見ました。<BR>
インラインの設定がが優先されます。</P>


優先順位
スタイルシートの3つの記載の仕方はには、実習9で試したように優先順位がある。
インラインの記載が最優先する。次がHTML内の埋め込み、最後が外部ファイルの埋め込みの順になる。
使用目的によって使い分けることになる。実習8の例でファイルの<HEAD>内に書かれた<H1>の文字色は「red」になっているが、実習9ではインラインで「yellow」に指定しているので、インラインの指定が優先して表示は黄色になっている。
サイト全体のスタイルを「外部ファイル」で設定して、個々のページのスタイルを「HTMLファイル内埋め込み」で、部分的に「インライン埋め込み」で設定すると良い。
また、何よりも優先させたいときは、そのスタイルに「!important」をつけ最優先させることが出来る。
例えば、実習8のHTMLファイル内埋め込みのH1の文字色redを、実習9でyellowに変更しているが、実習8のH1の「…;color:red;」を 「…;color:red !important;」 としておくと、赤色が優先する。
3.要素と初期値と継承について
全てのタグにスタイルシートを設定する必要はない。属性には初期値があるので、設定しなければ初期値が適用される。また親要素のスタイルが子要素に継承されるものがある。
要素
スタイルシートではHTMLで書かれたページを「要素」という単位で分けて考える。「ボックス要素」は二次元の範囲を扱うタグ(例えば<P>や<DIV>などのような平面的なタグ)を言い、「インライン要素」は1行の中に組み込まれているタグ(例えば<SPAN>)を言う。この他に「ルビ要素」「セル要素」「リストアイテム要素」「テーブル要素」などがある。
また、上位の要素を「親要素」と言い、下位の要素を「子要素」という。例えば<HTML>の下位に<BODY>と<HEAD>がある。<BODY>は<HTML>の子要素であり、<H2>や<P>の親要素である。
初期値
全ての属性に初期値がある。例えば文字色のcolor 属性の初期値は「ブラウザに依存」だから、設定しないとブラウザで決めている色(多くの場合黒色)になる。初期値は通常その属性の標準的な値になっている。初期値以外の値にしたいときにスタイルシートを設定すればよい。
継承
親要素が持っているスタイルをその子要素が引き継ぐものがある。これを継承という。継承する属性(例えば文字色のcolor)はその子要素にすべて継承される。継承される属性の値でよい場合は、子要素でスタイルシートを設定しなくても親要素の設定が適用される。
また、継承されない属性がある。継承されない属性でも、実際にはブラウザによって継承されることもあるので、異なるブラウザで表示させて確かめると良い。
4.属性の値の単位
属性の値には数値とキーワードによる指定がある。数値の場合には単位を指定して設定する。
絶対値の単位:
モニタの解像度、ウインドウの大きさにかかわらず表示されるので、作成者と閲覧する人の環境が違うと意図した表示が出来ないことがある。「mm」ミリメートル、「cm」センチメートル、「in」インチ、「pt」ポイント、「pc」12pt = 1pc
相対値の単位:
「em」「ex」それぞれ要素中のフォントの高さを基準にする。em は大文字の「M」の高さを1とする。ex は小文字の「x」の高さを1とする。font-size の場合は親要素のフォントサイズが基準になる。
「px」はモニタ画面上の1ピクセルを単位にする。モニタの解像度により絶対的な大きさは変わる。
「%」は親要素の大きさに対する比率で設定する。
5.セレクタの使い分け
スタイルシートはセレクタに対して、属性と値を指定して設定する。セクタは個々のタグであったり、タグの組み合わせであったりする。スタイルシートを設定する範囲によってセレクタを使い分けることが出来る。(インラインの埋め込みを除く)
タグごとに統一するスタイル
タグごとにスタイルを設定して、ページ全体の統一を保つことが出来る。(実習7,8の例)
複数のタグに共通のスタイル
複数のタグに同じスタイルを纏めて設定するには、タグをカンマで区切って設定する。 グループセレクタ  例 H1,H2,H3 {background-color:green;color:white;}
スタイルのパターン
セレクタに識別子をつけて、必要によって呼び出すことが出来る「CLASS」と「ID」がある。CLASSは「.」(ピリオド)にクラス名、IDは「#」(シャープ)にID名を指定してセレクタとする。クラス名・ID名は半角の英数字(1字目に数字を使わない方が良い。)と「-」(ハイフン)を使う。先頭にタグをつけるとそのタグにのみ呼び出せる。タグをつけないとどのタグでも呼び出せる。
実習10:CLASSをためしてみる。
次のように CLASS を設定してみる。「H1.back-yellow」というように「.back-yellow」の前にタグの要素を書くと、そのタグでのみ呼び出せる。

<HTML>
<HEAD>
<TITLE>CLASSを使った例</TITLE>
<STYLE TYPE="text/css">
<!--
BODY        {margin:1% 10%;}
.back-yellow    {background-color:#ffffdd;}
.back-green    {background-color:#66ff66;}
.red         {color:red;}
.blue        {color:blue;}
H1         {border-style:outset;text-align:center;}
H2         {text-align:center;}
P          {line-height:150%;}
//--!>
</STYLE></HEAD>
<BODY CLASS= "back-yellow" >
<H1 CLASS="back-green">CLASSを使った例</H1>
<H2 CLASS="red">文字色を赤にします</H2>
<DIV CLASS="blue">ページ全体はウインドウに対し左右に10%の余白を設けてあります。<BR>青色の文字はブロックに設定しました。<BR>
行送りは初期値のままですから、行間が詰まっています。<BR>
<P CLASS="back-green">この段落には背景色を設定してあります。<BR>
同じ背景色を違うタグでも呼び出せます。<BR>
段落には行送りを文字に対し150%に設定してあるので、行間隔が開いています。</P>
</DIV>
<P CLASS="red">こちらは上のブロックとは別の段落です。<BR>
文字色を赤にしました。一つのページで多くの色を使うと落ち着かないページになります。<BR>
</P>
</BODY>
</HTML>

注1:「.back-yellow」という「.」を先頭に書く書き方は、UNIX で使われているそうだ。
注2:一つのCLASSに複数の属性を設定出来るが、一つのタグの中でCLASSを複数呼び出すことは出来ないようだ。
注3:CLASSは一つのファイルの中で、何回も呼び出すことが出来るが、IDは1回しか呼び出せないことになっている。しかし、ブラウザが機能を拡張しているのか、CLASSと同じく何回でも表示できる。
注4:<DIV>はブロックレベルで定義するdocument Division。<P>は段落。違いは、<P>は後に空白行が入るが<DIV>は入らない。
注5:ブラウザが違うと同じスタイルシートの設定でも、違った表示をすることがある。

13 HTMLとブラウザとパソコン

ホームページはブラウザでHTMLで書かれた内容を表示することにより、見ることが出来る。ところがブラウザにはいろいろある。現在マイクロソフトの Internet Explorer が一番多数のユーザーが使っていると思われるが、別のブラウザ(例えば Netscape Navigator)を使っている人もいる。同じHTMLファイルを違うブラウザで表示させると、表示が微妙に違うことがある。
HTMLはW3C(World Wide Cosortium)というところで勧告している。HTML4.0仕様に関する勧告は1997年12月に発表された。HTML 4.01仕様に関する勧告は1999年12月に発表された。(http://www.w3.org/TR/1999/REC-html401-19991224) ボランティアによる日本語訳もある。(http://www.asahi-net.or.jp/~sd5a-ucd/)
これらの勧告に従って、タグを使ってホームページは作られているし、表示するブラウザもほぼこの基準に沿っている。しかし、それぞれのブラウザは独自に機能を拡張したり、表示の仕方を変えたりしているので、同じHTMLファイルが違って見えることがある。タグを解説したホームページ作成の参考書には、代表的なブラウザである Internet Explorer と Netscape Navigator の対応状況が掲載してある。対応しているはずのタグが、表示させると期待した通りにならないことがある。
ホームページを表示するコンピュータの環境によっても表示されるページの感じは違う。モニタの大きさや解像度によって一行に表示される文字数が異なるし、ブラウザの文字の大きさの設定でも異なる。ページの作り方によっては、ブラウザ以外に必要なソフトがインストールされていないと、正しく機能しないものがある。
ホームページはいろいろな環境で見られるものだから、作者の意図した見え方をするとは限らない。そのために作者によっては、ブラウザのバージョンを指定したり、モニタの解像度を指定したり、プラグインのインストールを求める場合がある。逆に見え方にこだわっても意図したように見えないことがあるのだから、情報の内容に工夫を凝らし、見え方にはあまりこだわらないという作り方がある。どちらを選ぶかは作者の選択になるが、誰からも見てもらえるインターネットの性格から考えると、あまり技巧を凝らして違う環境では効果が発揮されないページより、普遍的なより多くの人から見てもらえる簡素なページが良いと思う。ホームページを見てくださる人には、作者の技量が見たい人は稀で、掲載してある情報が欲しい場合が多い。情報の内容に合ったホームページにしたいものだ。

14 いろいろなタグの使い方

HTMLファイルはタグを使って書くので、いろいろなタグを理解して必要により駆使することにより、いろいろな表現の出来るホームページを作られるようになる。HTML関係の参考書は使用例が多く書いてあるものを選ぶと良い。
最初からいろいろなタグを使うのではなく、先ず自分が理解できるタグを使って作り、それを元に希望する表現が出来るように新しいタグを試みに使ってみる。思うような結果が出ない時は、そのタグの使い方に間違いが無いか確かめ、それでもわからない時は一時そのタグの使用をあきらめて別の方法を考える。あきらめたタグの使用方法は、他の人の作ったHTMLファイルを見たり、参考書を読んだり、別のタグの使用方法を調べているときに突然理解出来ることがある。「あきらめる」のは旨く使えるまで「使用を一時的に」あきらめるのであって、そのタグの使用を永遠に止めることではない。
「あせらず あわてず あきらめず」は、ホームページ作成に限らず、全ての場合に当てはまる。私たちの前を常にいろいろな情報が通り過ぎていく。その情報を「生かして使う」か「ゴミとして捨てる」かは、私たち自身の情報を利用する能力に関わっている。「チャンスは準備のない人を助けない!」
インターネット上には、ホームページ作成を助けるサイトがたくさんある。自分に合ったサイトを見つけて、タグの使い方が判らなくなったら辞書代わりに使う事が出来る。
HTML、JavaScript、CGI、スタイルシート、ダイナミックHTML、Perl、Cookieなど、ホームページ作成に関する情報を満載したホームページ作成関連総合情報サイトを紹介する。
「とほほのWWW入門」http://www.tohoho-web.com/www.htmTOHOHO  全体をダウンロードしてオフラインで閲覧出来るが、常に(毎週?)更新しているので時々オンラインでチェックしたほうが良い。「HTMLリファレンス」はタグをアルファベット順、用途順、逆引き(使い方からタグを探す)といろいろな方法で探すことが出来るし、「はじめに」には、HTMLの基本的な情報がある。それぞれのタグについて属性の説明があり、使用例はHTMLソースとブラウザ表示がある。説明は簡潔でわかり易い。関連した情報も豊富で「入門」を卒業したと思っている人でも非常に役に立つサイトだと思う。かなり前の話になるが、陽だまりホームページに検索機能を入れたいと思い私が作者にメールで相談したところ、「とほほのWWW入門」にも検索機能をつけたいと思っておられた時で導入まで指導していただいた。このテキスト等でHTMLの概略を理解して、さらに色いろなタグを学ぶためには強い味方になるサイトだと思う。

15 知的所有権との関係

ホームページは情報を大勢の人に容易に伝える手段になるし、人か作ったものを簡単に手に入れて複製出来る。印刷物の出版と比較するとその修正もまた簡単に出来る。ホームページに公開したものは不特定多数の人が閲覧するので、知的所有権の問題が絡んでくる。財産権のように目に見えるものでないので判り難い。
著作物の知的所有権を保護するために著作権法という法律がある。人の創作物には作った人に著作権が発生する。作った人が主張していなくても権利は法により保護されている。ホームページでは、人の作ったものを自分が作ったもののように見せかけて作ることが容易に出来る。「他人の権利を侵す」という悪意がなくても結果としてそうなってしまうこともある。
細かい法律のことは判らないが、或るホームページにきれいな風景写真がありとても気に入ったので、コピーしプリントして自分の机の上に飾っておくことは多分許されると思う。しかし、この写真を自分のホームページに表示させて公開することは権利を侵すことになる。
「営業行為でない」から許されるということはない。権利を持っている人が「自由に使ってください。」と意思表示している場合は、余程特殊な使い方をしない限り大丈夫だと思う。しかしホームページの作成者が本当の権利者かどうか確かめる方法が無い。
音楽関係の権利者は作曲・作詞・編曲・演奏とたくさんいるので、著作権協会でまとめて権利者の代行をしている。著作権協会に加入していない人はどうなるのかわからない。自作自演なら問題ないが、権利消滅まで待つかそれとも著作権料を支払うか?個人の著作権は死後50年で消滅する。
私たちがホームページを作るのは、個人的興味から出発することが多い。人の権利を侵ことをしてまで作らなければならないという事はあまりないと思う。楽しみながら作るのに後で問題が出てくるような事は避けたいと思う。

16 HTMLファイルの利用方法

HTMLファイルは公開されるホームページだけに使われるものではない。ハイパーリンクや図形の配置などが出来ることから、工夫次第でいろいろな利用法がある。
フリーソフトの使用方法をHTMLファイルで書いてヘルプとして使っていることがある。画像を入れられるし、リンクで関連した項目にジャンプできるので、複雑に関連しあった項目を辿ることができる。或る作業をする手順書作成にも利用出来る。
一般に公開するホームページではなく、限られた人に見てもらうためにサーバーにアップロードすることが出来る。デジカメで撮った旅行の写真を表示するHTMLファイルを作り、画像ファイルとともにWebサイトに置いて見てもらいたい人にそのURLを知らせれば、大量の画像データを送らなくても必要な人に見てもらえる。もし、ロボットによりWeb上の検索サイトへ登録されるのを避けたいときは、HTMLファイルのヘッダ(<head> 〜 </head>)に次のタグを入れておく。
<META NAME="robots" CONTENT="noindex,nofollow">
ブラウザで表示させるのだから機種やソフトに依存することが少ないので、データをいろいろな環境の人が見ることが出来る。FDやCD−ROMなどで配布する情報の閲覧ソフトを別に用意しなくても、HTMLファイルを利用することで見るとが出来る。
写真を入れて紀行文をHTMLで作ると旅行の記録集が出来る。最初のページに目次を作り旅行の度に増やしていく。写真アルバムと違った楽しみとなる。通信回線を通さないなら画像の解像度を高く出来る。データが溜まったらCD−ROMなど大容量記憶メディアに保存しても良い。
大量のデータの蓄積と検索に利用できる。Eメールの中に役に立つ情報があってもメーラーの外に保存したものは、検索するのが難しい。フリーソフトでメールをHTMLファイルに変換して、同じくフリーソフトで全文検索することが出来る。(2002/1/4 UP)

付 録

フリーソフト「TTTEdit」

タグ挿入型ホームページ作成フリーソフトをもう一つ紹介する。
入手先 http://homepage1.nifty.com/taka36/
作者  Takao Yamada メールアドレス taka36@support.club.ne.jp

T3EDT223.LZH という圧縮されたファイルを解凍すると次のファイルが出来る。適当なフォルダに置けば使用出来る。入手したファイルを全て含めた形で、かつ(複製物の引き渡しに要する実費を除き)無償であれば自由に複製し、配布出来るが作者にメールで連絡しておくとよい。

注記:この TTTEdit は、2002年4月に開発を中止しています。

tttedit.exe実行ファイル(本体)
tttedit.hlpヘルプファイル
tttedit.cntヘルプの目次
keydef.iniデフォルトのキー設定
keysup.txtキー入力補助機能のデフォルト文字列
readme.txtはじめに読んでください

上記のtttedit.exe をダブルクリックして起動するが、起動すると次のファイルが同じフォルダに出来る。
tttedit.ini各種設定の情報
tttedit2.datデータファイル
tttedit.barツールバー設定情報
keyuser.iniユーザーのキー設定
ukeysup.txtキー入力補助機能のユーザー設定
userbook.iniユーザー設定のブックマーク
style.txtスタイル属性の履歴
class.txtクラス、IDの履歴
lastfile.txt終了時の情報
T3HTM100.LZH を解凍すると次のファイルが出来る。使用に制限は無いが転載・配布が禁止されているので取扱に注意。
teadme2.txtタグリファレンス for TTT Editor の説明
t3html.hlpヘルプ(タグリファレンス)
t3html.cnt上記ヘルプの目次
tttedit.exe のあるフォルダにおくとヘルプメニューから利用出来る。このソフトで使われているタグについて解説されている。
このソフトはレジストリを使っていないので、不用になったらファイルとフォルダを削除すればハードディスクにゴミを残さない。
このソフトの特徴(ヘルプに書かれてあるもの)
  1. 64KB以上のファイルも編集できます。
  2. 無制限のUndo、Redoが可能です(メモリに依存)。
  3. ほとんどすべてのタグを再編集することができます。
  4. タグ、属性、属性値、コメント、特殊文字などを別色表示できます。
  5. ショートカットキーをカスタマイズできます。
  6. イメージビューアにより画像を確認できます。
  7. ツリー表示によりファイルの管理ができます。
  8. 新規にタグを登録できます。
  9. テンプレートを登録できます。
  10. 相対パス、アンカー、画像のサイズなどを自動で取得します。
  11. ローカルファイルのリンクチェックが可能です。
  12. 漢字コードをS_JIS、JIS、EUCで相互変換できます。
  13. キー入力補助機能。
  14. 各種ダイアログにより複雑なタグも簡単に作成できます。
  15. ファイル検索機能。
  16. プレビュー可能な印刷機能。
  17. エディタの分割表示。
使用方法はタブで分類されたタグをクリックすればエディタ部分に入力される。スタイルシートに対応している。タグの細かい設定が出来るダイアログボックスが沢山用意されている。ユーザーがタグを登録することが出来る。登録した16個のタグはメニューバーから選択できてショートカットキーも設定出来る。16個を超えると画面左の「ユーザー」タブで選択出来る。またテンプレートも登録出来る。ヘルプに詳しい説明がある。タグの説明やHTMLファイルの作り方がタグリファレンス(ツールバーのボタンは「HTMLヘルプ」)に書かれている。
HTMLを勉強しながらホームページを作るのに適したソフトだと思う。具体的な使い方は別のテキストを見てください。(2002/2/17 UP)

注記:スタイルシート、xml/xhtmlに対応した高機能の HTML Project2 の使い方のテキストを別途用意してあります。


戻る
連絡 メールでどうぞ