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) | ウェブデザインの文法 | 更新情報をチェックする

2013年03月02日

ウェブデザインの文法 ITの言葉

ウェブデザインのタグ・プログラムの書法は、英語をもとにした記号の体系にしたがっているということでした。
ということは、英語という言語の論理体系にもとづいているというわけです。
そうすると、ウェブデザインの内容・設計を記述するHTMLやXML、CSSを学ぶことから、英語の仕組みや論理を理解していくこともできるわけです。
ここで、HTMLは「HyperText Markup Language :ハイパーテクスト マークアップ ラングイジ」でした。「ハイパー(ヒューペル)」とは、ラテン語の「スーパー(スューペル)」とほぼ同じ意味のギリシア語です。「超」です。
XMLとは「Extensible Markup Language :エクステンシブル マークアップ ラングイジ」です。そして、CSSとは「Cascading Style Sheet :カスケイディング スタイル シート」のことです。

◆マークアップ言語◆

マークアップ・ラングイジ(標識言語)とは、デイジタルなサイバー空間で情報の意味内容や構造を組み立てるための言語です。ITの内容として、文字文書とか表や図などの内容を入力し、意味や構造(組み立て)、見た目の形状を設計する言葉(記号)です。

そういうITの内容=コンテンツは、私たちの日常生活のなかで用いられている言葉=言語とか、思考方法、推論や対話の論理・約束事を、そっくりそのまま反映したものです。
したがって、人類の言語の共通の約束事、とりわけ英語の文法や論理が、そのまま持ち込まれているのです。
ただし、これらの言語は独特のフィルター(約束事)をつうじて特殊な映し鏡に写された言語=記号体系ですから、その約束事を知らなければ理解できないわけです。私も、ほんのごく微小な部分を齧り取って理解したつもりになっているだけです。

私は60歳が目前に迫っている田舎おやじです。パソコンが普及してきたのは、30代の後半、それも40歳近くになってからです。
しかも、IT関係の仕事をしていたわけでもありません。
ほとんど独習で見よう見まねで対処してきただけです。
今書いていることも、もがいて四苦八苦しながら、どうにか「理解したと思い込んでいる」だけのものです。

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

◆IT言語も外国語のひとつ◆

ただ、普通の人たちと異なるのは、私はITの書法言語を「外国語や記号論理学の学習」だと思って、実践よりも、なぜ、いかにして、そうなるかという推論や認識方法の訓練として齧ってきたということです。
英語の勉強にも役立ちました。その経験を語るだけのことで、ITの専門家の話に比べれば、かなり焦点がズレているかもしれません。
あくまで、英語(外国語)の学習に役立てるという視点で語るだけです。

さて、XMLとは、ウェブデザインと同じように「タグ」を使って、IT空間に文章や図表、画像を入力し意味づけ、仕組みや組み立て(構造という)を設計し、見た目の形状を指定するための言葉=記号です。
非常に幅広くて奥が深い用法や意味を備えているので、エクステンシブル(拡張した内容、広がりを持つことができる)という形容詞がつけられているのです。

世界中でITの技術とコンテンツが発達してきたため、ことにウェブのコンテンツが発展してきたため、世界的規模で共通の膨大な「知のネットワーク」をつくるために、HTMLという言語をXMLというより基礎的で包括的な言語の規則によって記述してみようということになりました。
その結果、生み出された言語がXHTML、つまりExtensible HyperText Markup Language なのです。
そして、かつてはHTMLで記述されていたウェブコンテンツをXMLの規則を取り入れたXHTMLという言語で書き直すということになりました。いわば新しい世代のウェブデザイン言語です。

またCSSとは、滝の水しぶき(カスケイド)のようにHTMLやXHTMLの文書に降り注いで、見ばえ、見た目の表示スタイルを整える指示書(外形デザインシート)のことです。

◆記号論理の体系としての言語◆

そういう記号論理のシステムによって記述され、意味づけられ、組み立てられた言語で、IT世界の知的内容が築き上げられ、相互交換されるのです。

ウェブログ(ブログ)は、この新世代の言語で記述されることになりました。
さてここで、ログとはもともと logue のことで、「論理をともなう言葉、言葉のやり取り」のことで「対話」を意味する「ダイアローグ: dialogue」とか「序言」を意味する「プロローグ: prologue」とか、「独言」を意味する「モノローグ: monologue」のローグと同じ意味です。
 dia とは「二者の」、 pro とは「前もっての」、 mono とは「単独者の」という意味のラテン語です。
ログは、もともとは、ロジカルな言葉、つまり論理的な意味連関(筋道)を備えた言葉、または思考の論理というような意味です。
ウェブとは Web または woven net ( woven は weaveの過去分子)で、クモの巣網を意味します。英語で b と v との発音上の取り違えが起きてできた言葉です。ネイティヴの発音と言っても、そんな程度のものなのです。

そこで、ウェブログとは、クモの巣状のネットワークで結ばれたサイバーでの知的論理の交換、やり取りを意味します。ウェブログ=ブログも、ただ単に「日記」や「日誌」というようなシロモノではありません。

サイバーとはギリシア語の「キューバー(kyuber / cyber)」がラテン語に転換され、さらにそれを英語読みしたもので、中枢神経とか脳神経体系⇒頭脳を意味します。ドイツ語では、もともとのギリシア語の発音を生かして「キューバー」です。

posted by 田舎おやじ at 09:16| Comment(0) | TrackBack(0) | ウェブデザインの文法 | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

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