2013年03月08日

ウェブデザインの文法構造

ここで、ウェブデザインのソースとなるプログラムの書法(ドキュメントの仕組み)について、ごくごく大雑把に書いておきます。
多数のタグによって書かれているウェブページの設計書のことを「ドキュメント: document 」と呼びます。もともとは、文書とか書類、記述した指示書というような意味合いです。
ほとんど同じ意味のドイツ語に Archiv (アルヒーフ)という語があります。が、これは英語に組み入れられれて、 archive (アーカイヴ)となり、ドキュメントの集合や編合されたファイルというような意味合いになっています。

細かいことはあとで説明しますが、HTML文書の組み立ては下の図のようになっています。このペイジの画面上の見え方は、下のようになります。

ドキュメント.jpg

コンピュータの読み取りプログラムやブラウザーに対して、HTML(またはXHTML)の指示書を読み取り表現してもらうために、「ここでは何語で記述します」という意思を示すのが、ドキュメント(タイプ)宣言です。
たとえると、ここではロンドン風の英語で書きますから、その文法や方言(ヴァージョン)の規則や約束事にしたがって読み取り、表示してください」という意思表示とお願い、ということです。
指示書の文書の型(ドキュメントタイプ)を明示するわけです。
たとえば「今から私は、日本語の京都弁で話しますから、よろしく」という意味合いです。

今は、だいたいに覚えるだけでいいです。
ブログでは、コンテンツの構造は、サーヴァーを提供するシーサーなどの側であらかじめすべて設計済みで、利用者は選択肢から選ぶだけです。もちろん、有料の独自デザインが自由に設計できる契約にすれば、もっと自由にやれます。
そこで、「ヘッダー」とか「左サイド」とか「本体」とか「フッター」の設計方法についても、まだ当分説明しません。
ここで覚えてほしいことは、「ヘッダー」とか「本体」「左サイド」「フッター」とかを、デザインの構造では「ボックス」「ボックス要素」と呼びます。つまり、それぞれの中身を入れる「箱組」という意味です。。

【Ecom英語ネット】日本で最初のSkype英会話学校

さて、本体部分だけの説明を続けます。
この本体のなかには、記事の内容が入るわけですが、内容は下の図のように、いくつもの文や文章、図表や写真などの集合から成り立っています。

ブロック.jpg

ここで、記事の集合=まとまりの上の部分を「A」下の部分を「B」とします。
このような記事のまとまり(かたまり)を「ブロック」または「ブロック要素」と呼びます。
このブロック要素をつくるときのタグには、
<div></div> とか <p></p>などがあります。
div は division の省略形(略称記号)です。意味は「部分」とか「節」とか「章」というような、「文章の集まり」=「かたまり」を意味します。P がパラグラフ(段落)であることは、前に説明しました。
要するに、英語がわかれば、HTMLの記述は簡単に理解できるのです。
で、 / (スラッシュ)は、指定部分の「終了」を意味する記号です。このように、 div なり p なり、ブロックの終わりに略称記号の直前に / をつけたタグ </・・・> にするわけです。
一般に「終了のタグ」は</・・・> となります。

ただし、「改行」を意味する br だけは別で、 <br /> と br の後ろに半角スペイスを入れてから / を加えてタグを閉じます。
br は break の省略記号です。ブレイクには、たとえば「コーヒーブレイク」などのように「休止」の意味があります。ここでは「行をここで休止する⇒改行」というほどの意味です。

ただし、改行をこのようなタグにするのは、普通のブログの場合、つまりXHTMLの場合です。XMLの文法は厳密だからです。
通常のホームページで、ドキュメント宣言で「HTMLヴァージョン4まで」としてあるなら、<br>だけで構いません。
このように、ドキュメント宣言で使う言語=文法が何であるかによって、使うタグの表記が少し異なるのです。「方言」の違いともいうべき差です。

さて、 <div></div> や <p></p> のタグで囲まれたブロックのなかに配列される部品、たとえば個々の文章や「箇条書き=リスト」とか「スパン」、「写真」や「画像」「図表」などを「ライン要素」と呼びます。
ブロックのなかに配列=ライン化されるので、ライン要素というわけです。
こうして、コンテンツ>ボックス>ブロック>ライン(行・文章、画像・写真・図表など)
という関係ができあがっています。



posted by 田舎おやじ at 10:03| Comment(0) | TrackBack(0) | ウェブデザインの文法 | 更新情報をチェックする
この記事へのコメント
コメントを書く
コチラをクリックしてください

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。