Artopix/「定義はすべてＷＷＷの中である。」HTML概念とクラス定義

＊「定義はすべてＷ３Ｃの中である。」

HTMLはSGML (Standard Generalized Markup Language)のメタ言語のひとつです。

SGMLは、宣言文・DTD・インスタンスの３つから成り立つ、文書定義型言語を指します。
＊定義内容は、どのような要素がどのような順番で示されるか (HEADの下にBODYが置かれる等)　
　要素間の関係はどうなっているか、各要素がどのような属性を持つか等です。

　　---------------------------------------------------------------------------
     文書構造
           宣言文：　文字セットの指定（文書情報）
              ＤＴＤ：　文書の構造定義（DTD定義）
       インスタンス：　マーク付けされた文書（HTMLでは<html>に始まる文書）
　　　特徴
　　　* 体裁から独立し、読むことができるように書かれる。
　　　* 文書の論理的な構造を表すようにマーク付けされる。
　　　* 階層構造(ツリー構造)を示すものとして記述される。
　　---------------------------------------------------------------------------

以上のようにHTMLはプログラムではなく、タグもコマンド（命令）ではありません。
デバイスやシステムに依存せずにテキストを表現するために定義された国際規格です

配置情報を定義するマーク付けには主にタグを使い（これは不等号で括った形式で表現されます）このタグによって、「見出し」「段落」「表」というように文書中の要素を明示し、文書を構造化するものです。それらは初めての人にとっても決して難しいものではなく、誰でも簡単に扱えることを目指して開発されたものです。また文書を構造化するのにも、それほど多くのタグは必要としません。例えば、定型文を表現するのに、最低限使うタグは次の４種類です

　　---------------------------------------------------------------------------
　　　<title>　文書のタイトル
　　　<h1>～<h6>　見出し
　　　<p>　段落付け
　　　<br>　改行

　　　この他、自由文（散文詩・韻文詩など）を表現するだけなら、次の４つを知っていれば十分です

　　　<title>　文書のタイトル
　　　<h1>～<h6>　見出し
　　　<p>　段落付け
　　　<pre>　フレーズ
　　---------------------------------------------------------------------------

言語学的な立場から、HTML文書を考えていく時は、実際はもう少し複雑な話になりますが
大きく分けておよそ次の３つの階層構造を持っていると言えます。

　１．Realistc　（表題・説明・解説等）
　２．Imaginal　（引用文・イメージ・画像等）
　３．Narrative　（直接話法・日記や物語等）

ＨＴＭＬ文書は、ひとつの言語テキスト、エクリチュール（書かれた言語）という特殊な意味合いを持ち、記述された言語を、音声言語と同等の意味空間で扱うことを前提とします。例えば、ある文書が「イス」に関する記述をしているとします。ところが「イス」を扱った文書は、インターネットの中では、数え切れないほど存在しています。その膨大な情報の中から「その文書の示すイス」を探し出さなければなりません。そのためにインターネットは、ルートサーバーを頂点としたツリー構造を成し、世界中にあるサーバーは階層によって汎用ドメイン・国別ドメイン・組織・団体ドメインなどに分けられています。こうした階層構造は、人間の脳をモデルとして開発・設計され、各データをリンクさせることによって巨大な情報ネットワークを実現させているのです。

これらにReference（リファレンス）とMeaning（意味）が加わり、構造化されていることになります。イメージ（画像）も文書として扱われるというMeaning（意味）を含んでいます。IMGタグの必項にALT属性がありますが、これもそうした階層構造を表現するためになくてはならないものと考えることができます。 <html><head><body>タグ等はDTDによれば必項ではなく、省略もできます。また前述のようにメタ要素も必ずしも必要というわけではありません。ただしWebサーバーがEUCコード（yahooなど）の場合は、charset；shift_jisにセットしないとWINDOWSでは、文字化けしてしまうことがあります。基本的には、<meta http-equiv="content-type" content="text/html;charset=shift_jis"> の一行をヘッダーに記述することで解決されます。そうした点も踏まえて、任意のテキストを表現するためのHTMLソースは以下のようになります。

　　---------------------------------------------------------------------------
　　<meta http-equiv="content-type" content="text/html;charset=shift_jis"> ＊システムに依存
　　<title>島崎藤村について</title>
　　<h1>若菜集</h1>
　　<p>
　　明治二十九年の秋より三十年の春へかけてこゝろみし根、無草の色も香もなきをとりあつめて若菜集と
　　はいふなり、このふみの世にいづべき日は青葉のかげ深きころになりぬとも、そは自然のうへにこそあ
　　れ、吾歌ほまだ萌出しまゝの若菜なるをや。
　　<pre>
　　　　こゝろなきうたのしらべは
　　　　ひとふさのぶだうのごとし
　　　　なさけあるてにもつまれて
　　　　あたゝかきさけとなるらむ
　
　　　　ぷだうだなふかくかゝれる
　　　　むらさきのそれにあらねど
　　　　こゝろあるひとのなさけに
　　　　かげにおくふさのみつよつ
　
　　　　そはうたのわかきゆゑなり
　　　　あぢはひもいろもあさくて
　　　　おほかたはかみてすつべき
　　　　うたゝねのゆめのそらごと 
　　</pre>
　　---------------------------------------------------------------------------

＊ここでは文書体裁については解説しませんが…文字の大きさや色などを指定したい場合は、プロパティ(属性値)が用意されたHTMLバージョンを宣言すれば、色・形・大きさ・配置などを設定することができます。しかしこれらはブラウザ独自（NNやIE）の拡張機能として実装されたもので、当然すべての環境で利用できるというわけではありません。また環境によってはプリントアウトする場合にレイアウトやデザインがまったく変わってしまうこともありますので注意が必要です。

＊現行のHTML4.01では以下のプロパティが使用できます。

しかしこれらはSGMLから発展したために、デザインを優先したページの作成には向いていません。このために、W3C(HTML標準化団体)では、HTML4.0以降からスタイルシートの使用を推奨しています。現在もっとも多くサポートされているHTML4.0は、その前の3.2finalの属性値をそのまま引継ぎ、次の段階へ移行するためのCSSを一部サポートしている暫定バージョンです。現行のバージョンでは既に廃止になっているものや今後、廃止予定の属性もあります。詳細についてはHTMLリファレンスを紹介しているサイトを参考にしてください

＊HTMLはオブジェクトって？ [戻る]

オブジェクト指向プログラミングにおけるオブジェクト(object)は、コードとデータを一つにした動的な技術概念を指します。例えば、情報システムの中では、プログラムが表現しようとするメッセージ(message) を受け取ると、内部に蓄えたデータを処理に従って書き換え、要求（命令）があれば、他のオブジェクトへデータを渡すといった動作をします。

このような実体（具体的なデータ）を持つオブジェクトは「インスタンス」と呼ばれ、「オブジェクト」と同じように扱われます。インスタンスは、クラス（データとその操作手順をまとめた雛型を定義したもの）を基にした実際の値を指し、データをより具体的・直接的に捕らえた概念、つまりメモリ上に配置された実際のデータの集合ということになります。

例えば「色、サイズ、形」というクラスがあるとすると、「赤、10、三角」というように、インスタンスが生成されます。また同一のクラスから複数のインスタンスを作ることができ、それぞれは、異なった値を持つことができます。プログラムの中で実際に扱われるのはクラスではなく、こうした具体的なデータになります。このようにクラスは「型」、インスタンスは「実体」として説明されます。

HTMLにおけるDTD（文書構造の定義）は、マークアップされた文書（インスタンス）に対して「クラス」と解釈することができます。ただしこの場合のインスタンスは、先に述べたような「オブジェクト」としての性質は持たないので「静的インスタンス」ということになります。これらを情報システムの中で、実質的なプログラムとして扱うには、データクラスとメソッドの実装が不可欠です。現行ではCSS（カスケードスタイルシート）とスクリプトを用いた方法としてＤＯＭが使われています。

DOMは、ドキュメントオブジェクトモデルの略で、HTML/XML文書にある入力フィールドやイメージ、段落など、すべての要素に対してアクセスを可能にするためのインターフェイスです。

＊HTMLのデザインスタイル [戻る]

HTMLの体裁（スタイル）はカスケードスタイルシートに設定することが推奨されています。もちろんこれは義務や強制ではありませんが、バリアフリーなネットワークや広範な情報収集を実現するためには、文書構造と表装スタイルを分ける必要があるのです。現在スタイルシートCSS１・CSS２の２種類が使われています。この章では主にスタイルシートによるHTMLの文書体裁や表装スタイルを考えてみたいと思います。

デザインを考える上で大切なのは、「フォルム（形態）とファンクション（機能）のバランスを美的表現によって融合させる。」ことにあると言えます。例えば、それがどんなにきれいにデザインされてあったとしても「わかりにくい」「使いづらい」ものでは意味がありません。またその逆に「わかり易さ」を重視するあまり全体の統一性が失われてしまえば価値がありません。その両方のバランスをうまく満たし「機能性・統一性・美観に優れたものを創り上げることがデザイン」と言えるのではないでしょうか。さて、そうした観点も考慮に入れながら、ＨＴＭＬのデザインをしていくわけですが、ただサンプルを示しただけでは、単なるリファレンスになってしまいますので、使い方とその意味についても同時に考えて行きたいと思います。

＊「インライン要素とスタイルクラス定義」

「デザインの起源は、聖書の書体（カリグラフィ）から始まった。」と言われるくらい「文字の装飾」は基本となります。また一般的なHTMLも文書を基本構造としていますから、そういう意味でも、まず初めに、テキストスタイルとそのデザインクラスを作るところから考えてみたいと思います。

例えば、今ここに次のような一文で始まるHTML文書があったとします。

In World Wide Web, a document and visualstic notation were fused by Stylesheet.

文字修飾：色・字体・大きさ・強調（太さ/斜体）・文字間・単語間・
color font-family font-size font-weight font-style letter-spacing word-spacing font-variant

文字の大きさを変えることによって、そこが文書の始まりであることを表現する。

In World Wide Web, a document and visualstic notation were fused by Stylesheet.

行修飾には、行頭、行末、行間、行高、背景、枠線　等があります。 line-height: