======================================================================
● ● ●●●●● ● ● ● ☆ＨＴＭＬ入門講座☆
● ● ● ●● ●● ● 第８号 98/9/24
● ● ● ● ●● ● ●
●●●●● ● ● ● ● ●
● ● ● ● ● ● 発行人：
● ● ● ● ● ● 池田蛇足 dasoku Ikeda
● ● ● ● ● ●●●●●
Visit Our Web Site About This Magazine and HTML----------------------
http://hp.vector.co.jp/authors/VA014079/study_html/
=====================================================発行部数 2487部=
第６講：パラグラフ
さて今日は、まずタグによる、パラグラフのマークアップを説明し、あわ
せてタグの「属性」というものを説明します。
パラグラフは日本語では段落と呼ばれるものです。普通はインデントを使って
示されますね。小学校のとき、原稿用紙に向かって何かを書けと言われて、い
わゆる「作文」などという作業をさせられた記憶は誰にもあるでしょう？その
時、「段落の始めは１マス開けましょう」とか言われましたよね。その、１マ
ス分へっこんでいるのを、インデントと呼びます。このメールマガジンでは、
段落であることを示すためには、インデントは使っていません。改行し、一列
開けることで段落であることを示しています。
ＨＴＭＬでは、文のカタマリが「段落」であることを示すために
・・・
のタグを使っています。たとえば次の例を見てください。
【例１：との使用例】-------------------------------------------
YUJU HTML Editor1.0
How to use
This soft is made for everyone who hope to write HTML and to make
their own web pages. YUJU runs on Windows95/NT4.0. YUJU supports 44
HTML tags and JavaScript. May you be a wonderful web master with this
soft. Thank you!
（参考資料＞資料２）
-----------------------------------------------------------------------
★このマガジンのサイトにサンプルを掲載！「参考資料２」をご覧ください。
ＧＯ>>http://hp.vector.co.jp/authors/VA014079/study_html/
前回勉強したで見出しをつけていますね。階層的に、最上位の見出しには
を、次の階層に位置する見出しにはをつけ、その内容となる文章に、今
回勉強する
をつけているわけです。
マガジンのサイトで参考資料をご覧になるか、もしくは上のソースコード【例１】
にドクタイプ宣言や
<BODY>などの必要な情報を付加して、
拡張子.htmlをつけて保存し、それをブラウザでご覧になってももちろん構いま
せん。ともかくブラウザでの出力（ＨＴＭＬの表現）を見てみてください。
「あれ？何も変化がないぞ・・・」
これが、まあおおかたの人の感想でしょう。ＩＥやＮＮでは、パラグラフにイン
デントは与えません。たとえば<Hn>ならば文字が大きくなったりと分かりやすい
のですが、<P>はどうも目立った効果がなさそうです。
じゃあ<P>タグは付けるだけ無駄なのか？…そうではありませんね。もうそろそろ
お分かりでしょう。繰り返しになりますが、ＨＴＭＬはドキュメントの見栄えを
指定するための言語ではありません。本来は、ドキュメントの（論理的な）構造
を明示するためのマークアップ言語なのです。たまたま、ＩＥやＮＮといったブ
ラウザでは、何も装飾せずにそのまま表示しましたが、たとえば或るブラウザで
はインデントを付けて表現するかもしれません。
ＩＥやＮＮでは、<P>タグの「パラグラフ」を一塊の文字列として表示し、その直
後で改行、一列分開けて次のパラグラフになる、といった表現で<P>（パラグラフ）
のマーックアップを表現するようです。たとえば次のソースをブラウザで見てみ
ましょう。
【例１：<Hn>と<P>の使用例】-------------------------------------------
<H1>YUJU HTML Editor1.0</H1>
<H2>How to use</H2>
<P>This soft is made for everyone who hope to write HTML and to make
their own web pages. YUJU runs on Windows95/NT4.0. YUJU supports 44
HTML tags and JavaScript. May you be a wonderful web master with this
soft. Thank you!</P><P>This soft is made for everyone who hope to write
HTML and to make their own web pages. YUJU runs on Windows95/NT4.0.
YUJU supports 44 HTML tags and JavaScript. May you be a wonderful web
master with this soft. Thank you!</P><P>This soft is made for everyone
who hope to write HTML and to make their own web pages. YUJU runs on
Windows95/NT4.0. YUJU supports 44 HTML tags and JavaScript. May you be
a wonderful web master with this soft. Thank you!</P>
（参考資料＞資料２）
-----------------------------------------------------------------------
英語だから見にくいですが（英語にした理由は後述）、よくよく目を凝らして見
ると、どうやらパラグラフが三つあるということはお分かりいただけると思いま
す。このソースコードをブラウザで見てみましょう。いつもの要領でＨＴＭＬフ
ァイルを作るか、又はサイトにアクセスしてサンプルを見てみましょう。
さて、どうでしたか？文字の羅列のようだったソースコードが、ちゃんとパラグ
ラフだと分かるように改行されたりしているでしょう？これが、<P>タグの威力
です。
タグには属性を指定できるものがあります。実は前回、ちょっぴり紹介したフォ
ントを指定する <FONT SIZE="6"> は、属性を含んでいます。 <FONT SIZE="6">
は、属性「サイズ」に関し、値「０」を指定しているフォントタグです。つまり
<TAG_NAME attribute="value">
日本語に直すと、
<タグ名 属性＝"値">
という構造になっているということです。 <FONT SIZE="6"> は、タグ名＝FONT、
属性＝サイズ、値＝０を示しています。タグ名だけでは指定できない、細かい要
素を、このタグに付随する属性で指定できることがあります。
属性は、一つのタグに複数指定されることもあります。たとえば、（これもＨＴ
ＭＬ４．０では非奨励で、スタイルシートによって指定するのが奨励されている
あまり好ましくない例ですが、ま、勉強のためってことで）次のようにサイズ、
フェイス（種類）、色を指定するとしたら、一つのフォントタグに３つの属性を
付加することになります。
【例２：属性の付加】----------------------------------------------------
<FONT SIZE="5" FACE="ＭＳ ゴシック" COLOR="red">池田蛇足</FONT>です。
------------------------------------------------------------------------
終了タグに注目してください。開始タグに属性を指定した場合でも、終了タグに
は何の変化も起こりません。ただ、「開けたら閉める」だけでＯＫです。
なお、上のソース【例２】、どこかまずいと思いませんか？気づいた人は、第五
号の特別講義の内容をずいぶん理解してくれていると思います。まずいのは、フ
ォントの種類を指定する属性 FACE の値に「ＭＳゴシック」を指定している点で
す。
ＭＳって何のことだかご存知ですか？ＭＳとは、かの Microsoft 社のことです。
Windows95などには、このフォントは標準でインストールされています。でも、こ
のフォントをたとえばマッキントッシュがインストールしていると思いますか？
「正楷書体」「ＰＯＰ文字」「隷書体」などの、おもしろいフォントはたくさん
ありますが、そのフォントが奇抜であればあるほど、珍しいものであればあるほ
ど、それを受信する環境の人がそのフォントをマシンにインストールしている可
能性は減少しますね。インストールしていないフォントをブラウザは表示できな
いので、結局はデフォルトのフォントで表示することが多いようです。また、或
る環境では、そもそもフォントフェイスの変更すらできないでしょう。
たとえば現在、フォントのファイルを丸ごとサーバー（倉庫でしたね）に置いて
おいて、ＨＴＭＬと一緒にダウンロードするような技術がネットスケープ社によ
って開発されているようですが、その技術はまだ実用段階にはないし、対応して
いるブラウザもまだ殆どありません。それに、表音２６文字のアルファベットの
フォントと、何千もの文字を持つ日本語のフォントでは重さがまるで違います。
日本語のフォントをＨＴＭＬと一緒にダウンロードするには、根本的に、インタ
ーネットの回線を太くして、送信速度をＵＰさせないといけません。
そんなわけで、フォントの指定には細心の注意を払う必要があります。…おっと
話がずいぶんそれてしまいましたね。属性（アトリビュート）の話をしていたの
でした。
今日勉強した<P>にさっそく属性を付加してみましょう。<P>に指定できる属性は
ALIGN属性です。これは、そのタグの要素の「揃え位置」を指定します。この属
性はさまざまなタグに付けることができ、たとえば前回の<Hn>のタグにも付加す
ることができます。
【例３：<P>のALIGN属性】------------------------------------------------
<P ALIGN="left">This is a sample paragraph.</P>
<P ALIGN="right">This is a sample paragraph.</P>
<P ALIGN="center">This is a sample paragraph.</P>
<H1 ALIGN="center">CENTER</H1>
<H1 ALIGN="left">LEFT</H1>
<H1 ALIGN="right">RIGHT</H1>
（参考資料＞資料２）
------------------------------------------------------------------------
ブラウザで見てみましょう（またはサイトでサンプルを見てみましょう）。「揃
え位置」という意味がよくお分かりいただけると思います。たとえば次のように
見えるはずです。
【例４：揃え】----------------------------------------------------------
This is a sample paragraph.（ALIGN="left"の指定）
~~~~~~~~~~~~~~~~~~~~~~~~~~~
（ALIGN="right"の指定） This is a sample paragraph.
~~~~~~~~~~~~~~~~~~~~~~~~~~~
This is a sample paragraph.（ALIGN="center"の指定）
~~~~~~~~~~~~~~~~~~~~~~~~~~~
------------------------------------------------------------------------
ALIGN属性は、その要素をどこに揃えるかという指定です。デフォルトでは（つま
り属性を指定しない状態では）左揃えになっています。ですから、左揃えにした
いだけならばALIGN属性を指定する必要はありません。
このALIGN属性は、ＨＴＭＬ３．２では問題ないのですが、ＨＴＭＬ４．０では
サポートはされるが非奨励、という形になっています。前回にも少し述べました
が、ＨＴＭＬ４．０は見栄えを指定するために「スタイルシート」というものを
使うことが奨励されているからです。ですが、スタイルシートについて説明する
のは随分先のことになりますから、今はひとまず ALIGN属性で揃えを指定してく
ださい。なお「非奨励」というのは、まあ要約すれば「いずれＨＴＭＬのバージ
ョンが進むと消えちゃうかもよ。だから使わないほうがいいんじゃない？？」と
いうような意味です。
なお、<P>は開始タグだけで終了タグは省略可能だとする解説書もあります。そ
して、おそらくＮＮやＩＥでは、終了タグを省略してもパラグラフとして表示し
てくれるでしょう。しかし、終了タグは不要とするのはＨＴＭＬ１．０で、この
バージョンは現在認められていません。１．０は２．０に上書きされたので、も
はや１．０はありえないのです。ゆえに、Ｐの終了タグを省略したＨＴＭＬは、
「古いＨＴＭＬ」ですらなく、「誤ったＨＴＭＬ」と言ってまずかったら「模範
的ではないＨＴＭＬいうことになります。「開けたら閉める」お忘れなく。
★YUJU HTML Editor1.0でパラグラフを生成するには、「パラグラフ」ボタンを
押して下さい。「パラグラフ・ダイアログ」が現れます。まず、揃えを指定した
い場合、つまり ALIGN属性を指定したい場合は、「揃え位置指定」のチェックボ
ックスをチェックし、「左寄せ」「中央」「右寄せ」のラジオボタンのうちいず
れかをチェックしてください。ここで複数の揃え位置を指定することはできませ
ん。それぞれは排他的です。
そして大きな編集窓に、パラグラフとなるべき文字列を記入してください。終わ
ったら「作成して閉じる」をクリックしてみましょう。メインエディタの編集窓
にパラグラフのＨＴＭＬが生成されているはずです。なお、パラグラフをいくつ
も連続で生成したい場合、何度もダイアログを起ち上げるのは面倒ですね。そう
いう場合は、「閉じずに生成」をクリックしてみましょう。
なお、もっと簡単な方法もあります。メインエディタの編集窓に直接パラグラフ
となるべき文字列を記入して、終わったらマウスでその部分を選択し、マウスの
右ボタンをクリックしてポップアップメニューを出します。そこで「パラグラフ
化」を選択してください。それだけで、文字列の先頭に<P>、最後尾に</P>がつ
きます。ただし、この方法はALIGN属性を指定できません。
●宿題
次のドキュメント（文書）を、<Hn>および<P>を使ってマークアップしなさい。ま
た、最上階級の見出しをセンタリング（中央寄せ）しなさい。
さらにこれをＨＴＭＬファイルとして体裁を整え、保存し、閲覧しなさい。
------------------------------------------------------------------------
第一章：ＨＴＭＬの基礎
第一回：論理マーックアップ
ＨＴＭＬはハイパーテキスト用のマークアップランゲージで、ＳＧＭＬの応用と
して作られました。現在はＷ３Ｃによってバージョン４．０が承認され、通用し
ています。
本来はドキュメントの論理構造を示すためのマークアップ言語ですが、ＷＷＷの
一般社会への浸透に伴い、ＷＷＷの情報にも様々な要素が含まれるようになり、
バージョン３．２では多くの付加属性やタグが追加され、「見栄え」をも追求す
る言語仕様になってきたかのように思われました。
しかし、４．０ではそれとは逆へ方向転換を始めています。もちろんそれは、Ｗ
ＷＷのビジュアルなマルチメディア否定というわけではなく、それらの要素をＨ
ＴＭＬの仕様から「スタイルシート」に分離させ、ＨＴＭＬの論理マークアップ
の力を純化しようというねらいから来ているわけですが。
------------------------------------------------------------------------
★面倒な宿題だなぁ・・・(^O^)
★編集後記★
・「大学では何を専攻していますか？」あるいは「情報処理系の専攻ですか？」
などという御質問を何通かいただきました。
・偉そうに「ＨＴＭＬ入門講座」などと題したメールマガジンを発行し、クロス
プラットフォームなどを謳っている池田蛇足なる男の正体は・・・何かこれを
明らかにすることでメルマガの信頼度が落ちたら嫌だなぁ・・・実は、ただの
文系の大学生です。おまけに、社会へのフィードバックが一番小さく、かつ将
来性の最も稀薄な「国文学」などというものをやっています。
・森鴎外なんぞを読み、テクスト理論なんかを研究しています。最近は、ポスト
構造主義的なテクスト理論における「作者」の概念の位置づけ、新歴史主義を
受けてのテクストにおける時間性、ジュネットらによるパラテクストなんかに
興味を持っています。あと、個人的に仏像が好きです。ミスチルが好きです。
ヨーグルトが好きです。アコースティック・ギターが好きです。
・ひょっとしたら、万が一というくらいの確率でしょうが、僕の国文学研究の論
文を読みたいと思ってくれる奇特な人がいたら、そのうちサイトでダウンロー
ドできるようにするので。鴎外の『雁』に関して、インタ・パラテクスチュア
リティの視点から考察しています。
・今日の【例】のコードはほとんどサイトにサンプルとして掲載してあります。
是非、併せてご覧ください。掲示板にも足跡を残してもらえると嬉しいっす。
★http://hp.vector.co.jp/authors/VA014079/study_html/
・読者獲得キャンペーン実施中。お友達にもこのマガジンの存在を教えてあげ
てください。サイトでバックナンバーを入手できるので、今ならすぐに追い
つくし。みんなでＨＴＭＬのお勉強を（僕もね）していきましょう。
・ポストペット、試用版をインストールしました。カメの大五郎といいます。
もしポスペのメールくれる人がいれば dasoku4@geocities.co.jp までお願い
しますね。このメルマガのメールアドレス（dasoku@geocities.co.jp）はポ
スペじゃないです。（Becky!です）
----------------------------------------------------------------------
●次号は９月下旬の発行予定です。
●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月24日発行 発行部数 2487部