ビジュアルデザイン論 | Open Square

Web

WWW(World Wide Web)は、ネットワークとネットワークをつなぐ蜘蛛の巣上のネットワークで、主にHTMLによるハイパーテキストが送受信されるシステムです。大学や研究所などの個々のネットワーク同士が同一の規約(プロトコル)にしたがって、自律分散的に勝手に手をつないだもので、一企業が全体を管理しているわけではありません。
どこかが断線しても、別の経路で目的のコンピュータにつながる仕組みになっているので、非常に安定した信頼性の高い仕組みといえます。
※しかし逆に言えば、一旦情報が流出すると、誰にも止めることができません。
　発信前に十分な注意が必要です。

Webはクライアント・サーバモデルに基づいたシステムで、
以下のように動作します。

1)PCユーザがブラウザにURL(アドレス)を入力する
　(あるいはリンクをクリックする）と、
2)アドレスがDNSというデータベースによってIPアドレスに変換されます。
3)IPアドレスに対応するサーバコンピュータにHTTPという規約（プロトコル）
　にしたがって接続され、
4)HTMLで書かれたページや画像データが、要求元に送信されます。
　そして、
5)PCユーザが受け取ったHTMLや画像はブラウザによって
　画面上に描き出されます。

多くのWebページは他のページへのリンクを含んでいて、このリンクによって、情報のネットワークが形成されます。関連の強いもの同士のリンクは相互リンクによって自然に強固なものになっていきます。これは、人間の脳内ネットワークの仕組みと同じです。

WWWは、人間の脳のしくみを社会システムに投影したものといえるでしょう。
人間が求めていた究極のしくみといっても過言ではありません。
人間の脳が考えた、登場すべくして登場したシステムといえます。
|　 PAGE TOP　|

Webメディアの特質

・Head(見出し) と Body(本文) という構造はわかりやすい情報編集のための基本
　※ポスターの構造　映画におけるマスターショットシステム
・内容(XHTML)と形式(CSS)の分離
・クローズドからオープンへ
　※従来型のビジネスモデルは変革をせまられています。
・リンク　という概念の一般化
　※人間は基本的にリンクを張る動物である。　記号　→　実体へのリンク
・「書きかけです」という暫定公開の容認

読んでおきたい２冊の本

梅田望夫著　「ウェブ進化論」ちくま新書
中川淳一郎　「ウェブはバカと暇人のもの」光文社新書

|　 PAGE TOP　|

HTMLについて

HTML は、HyperText Markup Languageの略。
ウェブページを記述するためのマークアップ言語で、いわゆるホームページは、このHTMLによって、おおよそ以下のような骨格で記述されています。

<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1>見出し</h1>
　　本文
</body>
</html>

ページ全体は<html>に始まって、</html>で終ります。
<head> ～　</head>　の間はページタイトルなどのヘッダー情報が入り、
<body>　～　</body>　の間に、ページの本体情報が入ります。
このように、ページ内の情報要素は、＜＞で囲まれた「開始タグ」と「終了タグ」に挟まれるかたちで記述されることになっています。
開始・終了タグは、それぞれ <要素名>, </要素名> のように表現されますが、
必要に応じて要素に属性を付加的に記述することができます。

基本的には、Nvuのようなオーサリングソフトがタグを生成してくれるわけですから、HTMLタグの丸暗記は必要ありません。必要に応じて、リファレンスを見て、微調整できる・・という技術があれば十分です。

HTMLタグ一覧リンク（外部サイト）

HTMLタグボード
TAG INDEX
HTMLタグ一覧

|　 PAGE TOP　|

XHTML＋CSSによるページレイアウト

XHTML

Extensible HyperText Markup Language
HTMLをXMLの文法で定義しなおしたものである(W3C勧告)。

CSS

Cascading Style Sheets
HTMLやXMLで記述された文書内各要素の表示に関する仕様(書)。
文書構造と体裁の分離を実現する為に提唱された。

サンプル

HTMLとCSSによるページののサンプルソースコードを以下に紹介します。
項目並びが十分整理されていませんが、２つのリストを見比べると、
HTMLとCSSの関係がなんとなくつかめるのではないかと思います。

// index.html /////////////////

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

<head>
   <meta http-equiv="content-type"
   content="application/xhtml+xml; charset=UTF-8">
    <meta http-equiv="content-style-type" content="text/css">
    <title>Sample Page</title>
    <link rel="stylesheet" type="text/css"　media="all"
　　href="default.css" charset="UTF-8" id="extCSS">
</head>

<body>
    <div id="container">
        <div id="header">
            　//　省略
        </div>
        <div id="navi">
            <ul>
                <li><a href="index.html">TOPPAGE</a></li>
                <li><a href="gallery_01.html">GALLERY</a></li>
                <li><a href="profeel.html">PROFEEL</a></li>
                <li><a href="links.html">LINKS</a></li>
            </ul>
        </div>
        <div id="contents">
            <h1>ある心の風景</h1>
            梶井基次郎<br>
            <h2>喬は丸太町の橋の袂から加茂磧へ下りて行った。</h2>
            //   本文省略　//
        </div>
        <div id="footer">
       　　　Made with N|vu http://www.nvu.com/
        </div>
    </div>
</body>
</html>

// default.css ( 上のHTMLが使用するスタイルシート) ///////////////

* { margin: 0pt;
    padding: 0pt;
    }

body { font-size: 9pt;
    line-height: 1.8em;
    }

h1 { font-size: 18pt;
    font-weight: bold;
    }

h2 { font-size: 12pt;
    font-weight: bold;
    }

#container { margin: auto;
    position: relative;
    display: block;
    width: 740px;
    background-color: rgb(204, 204, 204);
    }

#header { display: block;
    width: 740px;
    height: 160px;
    background-color: rgb(128, 128, 128);
    }

#navi { display: block;
    height: 20px;
    background-color: rgb(234, 234, 234);
    }

#navi li { float: left;
    text-align: center;
    width: 100px;
    }

#contents { display: block;
    float: left;
    margin-left: 40px;
    margin-right: 40px;
    width: 660px;
    margin-top: 80px;
    }

#footer { clear: both;
    width: 740px;
    height: 100px;
    text-align: center;
    font-size: 8pt;
    background-color: rgb(128, 128, 128);
    }

上の２つのファイルからできたページは以下のアドレスに置いてます。
サンプルURL(http://samplepage.client.jp/) 　by Shinobi 　　 ZIP

サンプルの解説

まず、最も重要なことですが、
「この index.html が default.css の情報を利用している」という事実が、
index.html ファイルの中の<HEAD>の中の一行、
<link rel="stylesheet" ・・・ href="default.css" ・・・・>
の部分に記されています。
この１行がなければ、HTMLとCSS、２つのファイルは
まったく無関係なものになってしまいます。

次に、中身の対応関係についてです。
HTMLファイルの中の
<DIV ID = "contents"> ~　</DIV> で囲まれた区画、
すなわち、contents という名前のついたブロックに関する情報は、
CSSファイルの中の
#contents { } の中に書かれています。
例えばそこに、
background-color: rgb(128, 128, 128);
と記述されていたとすると、
contents という区画の背景色はグレーであるということになります。

|　 PAGE TOP　|

作品・技術情報

LINKS｜アート＆デザイン　＞　Webデザイン

LINKS｜技術情報　＞　Web技術情報・テンプレート

|　 PAGE TOP　|

LECTURE｜ビジュアルデザイン論

Web