======================================================================

●      ●  ●●●●●  ●      ●  ●           ☆ＨＴＭＬ入門講座☆
●      ●      ●      ●●  ●●  ●           第９号       98/9/27
●      ●      ●      ● ●● ●  ●
●●●●●      ●      ●  ●  ●  ●
●      ●      ●      ●      ●  ●           発行人：
●      ●      ●      ●      ●  ●           池田蛇足 dasoku Ikeda
●      ●      ●      ●      ●  ●●●●●    

Visit Our Web Site About This Magazine and HTML----------------------
          http://hp.vector.co.jp/authors/VA014079/study_html/
=====================================================発行部数 2506部=

第７講：水平線

海っていうのはいいですね。今年の夏は、「青春１８きっぷ」という切符を駆
使して、北は北海道から西は山陰、出雲まで足を伸ばしましたが、出雲の日御
埼（ひのみさき）、北海道の南端、襟裳岬（えりもみさき）は忘れられない思
い出です。特に襟裳岬からの景観は、いやもう壮観でありました。彼方には、
３００度の水平線のパノラマ。しぶき、岩に砕ける波。そして秒速２５メート
ルの強風が、猛烈に顔を叩き、潮の香りをこれでもかと突きつけます。

今日ＨＴＭＬで勉強するのは、「水平線」です。・・・まあ水平線と言っても
襟裳岬で見たようなやつは、もちろん再現できません。それをやりたかったら
静止画像として写真をインライン表示するしかないでしょうね。それは、もう
ちょっとしたら説明しますのでお楽しみに。今日やる「水平線」というのは、
たとえば表題と本文を分かつために使われる、一本の（水平な）横線のことで
す。たとえば Lynx ではこのように表現されるでしょう。

【例１：「水平線」の表現例（Lynx）】----------------------------------

   ------------------------------------------------------ ←これです

----------------------------------------------------------------------

たとえばＩＥやＮＮでは、影のついたビジュアルなラインとして表現されるで
しょう。これを表示させるためのタグは、簡単です。<HR>という一つのタグを
書くだけで、画面上に水平線が表示されるでしょう。

【例２：<HR>の使用例】------------------------------------------------

<H1 ALIGN="center">池田蛇足の大冒険</H1>

<HR>

<H2>池田蛇足登場</H2>

<P>池田蛇足は冒険家で、世界の七つの海を渡る海賊でもあった。彼は勇敢で
しかも強かった。彼の持つ二本の刀のうち一本は、キャプテンコックから継承
したものだ。彼はりんごを左手の握力だけでつぶす。つぶしたそれをぺろりと
舐め、「１００％ジュースだぜ」と言ってにやにや笑うのだ。もはや、誰も彼
に刃向かおうとは思わなかった。・・・・ただ一人を除いて。</P>

(参考資料＞資料３）
----------------------------------------------------------------------
★参考資料３は月曜日にアップします。
ＧＯ>> http://hp.vector.co.jp/authors/VA014079/study_html/

あらら。おっかしいな。・・・ちゃんと今までの説明を覚えていた人は首を傾
げているはずですね。そう、この<HR>には、終了タグがありません。単独のタ
グだけでＯＫです。いや、ＯＫと言うよりも、終了タグは存在しません。

他にもいくつか終了タグの存在しない、つまり「開けたら閉める」の原則があ
てはまらないタグがあります。それはおいおい、説明しましょう。

じゃあこの<HR>にさまざまな属性を付加してみましょう。まずは、その水平線
の線の太さを指定する属性です。SIZE属性を使います。

【例３：<HR>のSIZE属性】----------------------------------------------

<HR SIZE="2">

<HR SIZE="4">

<HR SIZE="6">

<HR SIZE="12">

<HR SIZE="150">

(参考資料＞資料３）
----------------------------------------------------------------------

以上をブラウザで閲覧すればわかると思いますが、あまり大きな数字を値に入
れると「線」というよりも「直方形」になってしまいます。ですから、目安と
しては２０以下の数字を入れるといいでしょう。なお、この数値はピクセルと
いう単位です。１ピクセルが、画面上で絶対的に何ミリになるかは環境によっ
て異なります。また、この属性を指定しない場合、水平線は２ピクセルの太さ
になります。したがって、<HR SIZE="2">という属性指定は、まあ文法的に誤
りではないですが、付けるだけ無駄というものです。また、この属性の値に整
数でない数、たとえば「3.5」などを入れることはできません。

ただし、この属性はＨＴＭＬ３．２で付加されましたが、４．０では非奨励と
なっています。スタイルシートを学んだら、それで指定しましょうね。また、
Lynxなどのブラウザではこの属性の指定は反映されません。ですから、この属
性の指定が、コンテンツを理解するのに本質的に必要になるようなＨＴＭＬは
記述するべきではないでしょう。・・・まあ、そんなコンテンツはちょっと考
えつきませんが。

次に、線の長さを指定します。長さは、ブラウザの画面に対する幅を指定しま
す。絶対的な数値で指定しないのは、ディスプレイや画面の幅や性能、あるい
はブラウザのサイズが、そのコンテンツを読む人々それぞれで一定ではないか
らです。相対的に、画面に対する幅を指定してやれば、誰にも無理なく閲覧で
きますね。

【例４：<HR>のWIDTH属性】---------------------------------------------

<HR WIDTH="100%">

<HR WIDTH="80%">

<HR WIDTH="60%">

<HR WIDTH="40%">

<HR WIDTH="20%">

（参考資料＞資料３）
----------------------------------------------------------------------

「ブラウザの画面に対する幅」という言い回しはちょっと正確ではないんです
が（本当は、親要素に対する幅の割合、と言うべきでしょうね）、そう言った
方が今は分かりやすいでしょう。

WIDTH属性はデフォルトでは１００％です。つまり、（画面に対して）１００
％以下の長さにしたい場合にのみ指定してやればいいわけですね。

そして、「水平線」をビジュアルなラインとして表示するブラウザのために、
ＨＴＭＬでは、ラインの影の有無をも指定できます。NOSHADEという属性です。
この属性を次のように指定すると、表示される水平線は影の無い（立体感の無
い）ラインになります。

【例５：<HR>のWIDTH属性】---------------------------------------------

<HR NOSHADE>

----------------------------------------------------------------------

あれ？？ NOSHADE属性に値がありませんね？…そうです。この属性は、値を指
定する必要がありません。ＨＴＭＬでは、値を指定しない属性は、次のように
解釈されます。

                        <タグ名 属性名="属性名">

ですから、<HR NOSHADE>は、<HR NOSHADE="noshade">と同じことになり、文法
的な誤りとはなりません。気を利かせて<HR NOSHADE="true">などのように勝
手に値を指定しないようにしてくださいね。なお、NOSHADE属性に対して、影
をつけるための SHADE属性だってありそうなものですが、これはありません。
それは、<HR>は、デフォルト（何も指定しない状態）で、影のついたラインと
して表示するブラウザが多いためです。

NOSHADE属性は、当然Lynxなどのブラウザでは無視されます。また、この属性
もＨＴＭＬ２．０にはなく、３．２でサポートされ、４．０では非奨励となっ
ています。言うまでもなく、見栄えを指定する属性だからです。

<HR>には他にも多くの属性を付加することができます。たとえば、前回学んだ、
ALIGN属性の付加も可能です。<HR>は、ALIGN属性を指定しない場合、センタリ
ングされますから、右か左に寄せたい場合に指定するとよいでしょう。次のよ
うなのはナンセンスですよ。

【例６：おかしなＨＴＭＬ】--------------------------------------------

<HR WIDTH="100%" ALIGN="right">

----------------------------------------------------------------------

どうしておかしいか、分かりますよね？

最後に、<HR COLOR="red">などといったソースを見たことがある人、使ってい
る人がいるかも知れません。この、HRのCOLOR属性というのは、ＩＥ（Internet
Explorer）の独自拡張で、２．０から４．０までどのバージョンのＨＴＭＬで
もサポートされていません。イントラネット上などで、そのページを見るブラ
ウザが特定できる場合で、かつそのブラウザがＩＥである場合は使うとよいで
しょう。ま、水平線に色が着いたくらいじゃ大した違いじゃないんで、インタ
ーネット上でこれを使ってもいいとは思います。その場合でも、「ＩＥを使っ
ている人にしか色の違いが分からない」ということを常に頭に入れておきまし
ょう。たとえば次のようなページを書いてはいけません。

【例７：悪い例】------------------------------------------------------

<IMG SRC="dasoku.gif">

<HR COLOR="green">

<P>上の、緑の線の上にある画像が僕の自画像です</P>

----------------------------------------------------------------------

さて、今日の内容をまとめましょう。

○水平線を引くには<HR>を使う
○<HR SIZE="n">で線の太さを指定
○<HR WIDTH="n%">で線の長さ（画面に対する幅）を指定
○<HR NOSHADE>は影の無いラインになる
○<HR>にはALIGN属性も指定可能
○<HR>のCOLOR属性はＩＥの独自拡張

●宿題

次の条件の水平線を示すＨＴＭＬを書きなさい。

１：長さが画面に対して８０％の水平線

２：太さが８ピクセルの水平線

３：長さが画面に対し６５％で、太さ４ピクセル、影が無く、右寄せされてい
    る水平線
    
●前回の宿題の解答----------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
  <TITLE>宿題（第８号）</TITLE>
 </HEAD>
<BODY>

<H1 ALIGN="center">第一章：ＨＴＭＬの基礎</H1>

<H2>第一回：論理マークアップ</H2>

<P>ＨＴＭＬはハイパーテキスト用のマークアップランゲージで、ＳＧＭＬ
の応用として作られました。現在はＷ３Ｃによってバージョン４．０が承
認され、通用しています。</P>

<P>本来はドキュメントの論理構造を示すためのマークアップ言語ですが、
ＷＷＷの一般社会への浸透に伴い、ＷＷＷの情報にも様々な要素が含まれる
ようになり、バージョン３．２では多くの付加属性やタグが追加され、「見
栄え」をも追求する言語仕様になってきたかのように思われました。</P>

<P>しかし、４．０ではそれとは逆へ方向転換を始めています。もちろんそれ
は、ＷＷＷのビジュアルなマルチメディア否定というわけではなく、それらの
要素をＨＴＭＬの仕様から「スタイルシート」に分離させ、ＨＴＭＬの論理マ
ークアップの力を純化しようというねらいから来ているわけですが。</P>

</BODY>
</HTML>

-------------------------解答はここまで-------------------------------

★編集後記★

・さて、<P>、<Hn>、<HR>の三つのタグを勉強しましたね。これで、結構サマに
  なるページを書けるようになったのではないでしょうか。次回は、一回で終わ
  るかは分からないんですが、リストの書き方を説明します。それが終わったら
  いよいよ静止画像を表示する方法です。

・いや、ポストペット、おもしろいですね。むかしは「けっ、ソニーに躍らされ
  やがって、馬鹿な消費者たちがよっ！」とか嘯いていましたが、今、はまって
  ます。オカガメの大五郎ちゃんです。毎週火曜日にメールチェックをしたいと
  思っていますので、月曜日迄に送ってみてください。さっそく先日、エリザベ
  スちゃんとテディちゃんが遊びに来ました。
  ★蛇足のPOSTPET Mailto:dasoku@geocities.co.jp

・お寿司が食べたいです。

・YUJU HTML Editor2.0の開発と平行して、YUJU CSS Editor1.0というものを作っ
  ています。要は、ＣＳＳ（スタイルシートの一種）の編集を楽チンにしてくれ
  るようなエディタです。後者の方が先に上がるかも知れません。その時は、誰
  かβ版モニタやってね。

・YUJU HTML Editor2.0 は、色ダイアログからの１６進数ＲＧＢ方式の取り出し、
  様々なディスプレイ環境への配慮、ＣＳＳへの本格対応、編集中のドキュメン
  トを誤って消去しないよう警告を発するダイアログの表示…などをバージョン
  アップに際して改良します。今回のバージョンアップは「書き換え」ではなく
  ほとんど最初からプログラムを組み直しているんで、インターフェイス的にも
  ちょっぴり変化があるかも知れません。

・でもちょっと忙しいんで、あんまり期待せずに待っていてください。 m(__)m

・今日の【例】のコードはほとんどサイトにサンプルとして掲載してあります。
  是非、併せてご覧ください。掲示板にも足跡を残してもらえると嬉しいっす。
  ★http://hp.vector.co.jp/authors/VA014079/study_html/
  ♯もっと掲示板使ってねぇーー！ (^O^)

・読者獲得キャンペーン実施中。お友達にもこのマガジンの存在を教えてあげ
  てください。サイトでバックナンバーを入手できるので、今ならすぐに追い
  つくし。みんなでＨＴＭＬのお勉強を（僕もね）していきましょう。


----------------------------------------------------------------------
●次号は９月下旬の発行予定です。

●Visit Our Web Site About This magazine and HTML- - - - - - - - - - -

バックナンバーの閲覧、購読解除＆登録、みんなの助け合い掲示板、リンク集
やソフト紹介など、このメールマガジンのサイトです。そのうち素材展なんか
も開こうかと考えています。
★ＨＴＭＬ入門講座 ホームページ
ＧＯ>>http://hp.vector.co.jp/authors/VA014079/study_html/


●YUJU HTML Editor1.0- - - - - - - - - - - - - - - - - - - - - - - - - 

ＨＴＭＬをテキストベースで編集することに特化したエディタです。「シェア
ウェア（５００円）」ですが、当マガジン読者には無料で配布します。是非、
ダウンロードしてお使い下さい。なお、無料でお使いになる場合は、下記アド
レスまで一言、お便りくださいね。ちなみに、拙作のソフトです。性能は…そ
んなにすんごいモノじゃありませんので、期待しないように (^O^) あくまで
教育目的の仮バージョンってことで。実用版 2.0 はそのうちリリース。
★なお、このソフトは Windows95 98 NT4.0以上の環境でお使いになれます。
Download URL 
http://www.vector.co.jp/vpack/browse/software/win95/net/sn073890.html
Mailto dasoku@geocities.co.jp

★ソフトへのご要望、ありがとうございました。未熟なソフトですみません。
バージョンアップに際して考慮します。ありがとうございました。

 ===================================================================  
 このメールマガジンは、インターネットの本屋さん『まぐまぐ』を利用し
 て発行しています。( http://www.mag2.com/ )
 ===================================================================

----------------------------------------------------------------------
ＨＴＭＬ入門講座 第９号
発行人：池田蛇足 dasoku@geocities.co.jp   9月27日発行  発行部数 2506部