go back to frame top
サイト設計上の余談、所感付き基礎知識集。
基本が分かっていると強いことって多いですよね。
僕なりの切り口で解説して行きます。
その他、こちらに用語集サイトへのリンクもご用意しました。
併せてご参照頂けたら、と思います。
★本ページは未完成です。随時更新中です。
ウェブサイトと言うものが、
HTML言語と言う、タグの集合体で書かれた、単なるテキストファイルなんだ、
って言うお話を ウェブサイト と HTML の解説にて記載しております。
まずはそれを踏まえた上でCGIについてお話しましょう。
ウェブサイトの解説でテキストファイルのコピーを、
ネットワークの先から持ってきて、
それを表示しているに過ぎない、と言うお話をしました。
実は、CGI って言うのは、
この配布するコピー元を閲覧時、その場で作って、配布する方法のこと
なんです。
ブラウザが、おーい、閲覧したいぞ、
と、CGI で書かれたホームページを呼び出します。
すると、CGI さんは、「よっしゃ分かった、今 HTML 文章を作ったるからな、待っとれ！」
てなもんで、せっせと HTML 文章を作ります。
「ほいよ、お待ち」って具合に、CGI は表示するべき HTML 文章をブラウザに送ります。
で、その送られた HTML 文章をブラウザが表示する、と。
そんなようなイメージなんです。
だから、ブラウザから見た場合、やっぱり HTML 文章が
送られてきているに過ぎないんです。
で、この HTML 文章を作るのが、
ウェブサイトを持っている、相手側コンピュータ上で行われている点が大切です。
昔、学校の授業で、プリントを配ってもらっていたことを思い出してください。
普通のホームページは、
先生がいっぱい刷って、それを貰うだけ。
そのプリントに何か書いても、
それは自分が見るメモ書きになるだけで、
みんなには分かりません。
「あ、この字間違ってる」
って思って、自分のプリント上にはバッテン書いて修正することができるけど、
他の生徒さんのプリントはまだ修正できてないわけです。
この状態が、普通の HTML 文書によるホームページです。
単にコピーの配布ってわけ。
そのメモ書きをみんなに見てもらいたければ、
「せんせ〜、字、間違ってるよ〜」
先生に言います。
すると先生は「ん〜、よく気が付いたね〜」なんて照れ笑いしながら、
もう一回刷りなおしてくれるでしょう。
いや、うちの先生は誤字だろーと直さんかった、なんて言わんでくれ、
話が前に進まん（笑）
でね、この先生の作業をしてくれるのが、CGI なわけなんですよ。
誰か、ホームページを見ている人（生徒）がおこしたアクション（誤字の指摘）を、
CGI さん（先生）が受け取ってくれます。
以降はCGI さんに、別の人がホームページを見たいよ、
って要請されると、そのアクションを反映した形でHTML 文書を作成して、
それが表示されます。
つまり、常に閲覧者のアクションを反映した形で、
その場その場で HTML 文書を作成することができる、
それが CGI で作られたホームページなのです。
BBS
なんて言うのは、まさに好例ですね。
いつか誰かが書いた書き込みを加えた上で、
「その場で」作成しているのが、分かると思います。
実は少々分かりやすいところから、話を進めています。
本当は、CGIって閲覧者のアクションを、
ホームページを持っているコンピュータ（サーバーって言います）側で
実行できる、って言うのが本質的なところなのです。
HTML のホームページの場合、
HTML 文書のコピーを配布して、サーバー側の仕事はお終い。
CGI で書かれている場合は、
サーバー側が「なんか動作した後」HTML 文書を返します。
いえ、実は HTML 文書を返さなくてもよくって、
「メールを送る」だとか、「今サーバーは混んでるよ、と伝える」だとか、
サーバー側でいくつかのことを実行することができます。
配布する HTML 文書への反映は、
実は「サーバーで処理できること」の一つなわけです。
オッケーっすか？
HTML で書かれたホームページは、コピーの配布、
CGI で書かれたホームページは、サーバーで何かを実行。
っちゅうわけなんです。
サーバーで実行できるからこそ、
みんなが書いた書き込みを、みんなでシェアすることができる。
複数の人がホームページ上でチャットすることができる。
サーバーによって、全閲覧者からのダウンロード数を
カウントしたりすることもできる。
ってな具合です。
さて、ここで、「実行」と言うのが、クセモノです。
「実行」って何でしょう？
HTML文書は、こちらでお話した通り、
表示の状態をタグと言う形で表現したテキストファイルでした。
前回の例で言うならば、
学校の先生が配布したプリントが、このHTML文書にあたります。
で、
「プリントの誤字を指摘されて」
「先生が苦笑いして」
「誤字を直してプリントを印刷して」
「また配布する」
が、ここで言う「実行」であり、CGIなのです。
こちらのコラムでもちょこっとだけ書いていますが、
こういう一連の「動作の流れ」を記述したものを
「プログラム」って言います。
もし、BBSに書き込みがあったら、データをサーバーで取っておく。
もし、BBS閲覧の問い合わせが来たら、サーバーに取ってあるデータを表示する。
なんて具合に動作を記述していきます。
この記述には、プログラム言語って言うのが使われるわけです。
CGIに使えるプログラム言語は、一般に Perl
って言う言語です。
Perlを使うと、
『もし誤字を指摘されたら、苦笑いしなさい。』
なんてことも書くことが出来るわけです。
HTML のようなマークアップ言語じゃ書けないことです。
『もし誤字を指摘されたら』って言う風に、
もし誤字がなかったら、→ 授業中と表示
もし誤字があったら、→ 苦笑いして修正した文字を表示
条件によって分岐することが出来ないのです。
そういうことを出来るようにするのがプログラム言語。
で、それをサーバー上で可能にするプログラム言語の一つが Perl って訳なんです。
余談ですが、Perl 以外に C言語でも書けます。
PHP
と言うものもあります。
しかし、今のところ、Perl が最も一般的です。
巷の CGI はほぼ全て Perl なので、CGI って Perl 言語で動かすんだぁ、
って思って頂いて大枠大丈夫だと思います。
↑目次
こちら（ウェブサイトの解説）で
サイトって要はテキスト文書だって、お話をしました。
でも、ホームページって、
メモ帳の文章と違って、
色をつけたり、フォントを変更したり、
写真を貼り付けたり、リンク貼ったり、
いろいろ出来ますよね。
実は、このテキストの文章に、
いろいろ尾ひれ手ひれをつけられる工夫を施しているのです。
そこで、タグ と言う考え方が出てきます。
タグについては、まあ、見てもらう方が早いでしょうね。
例えば、こんな表示があった場合、
テキスト文書で、こんな風に書くのです。
例えば、<font size="7" color="#00cc00">こんな表示</font>があった場合、
この色で示した個所が、ここでご説明している「タグ」です。
Internet Explorer
なり、Netscape
Navigator なりのブラウザは、
この<font>と言うタグを発見すると、（あ、なんか font が変わるんだな）と思います。
で、次の文字を、
size="7" ですから、サイズを 7 にしよう、
color="#00cc00" だから、00cc00 で示される色にしよう、と思います。
cc0000 で示される色、って言うのは、まあ、デジタル化された色番号、程度に
思ってください。正確には Red Green Blue の割合を数値化しています。
で、そのサイズ、色で、「こんな表示」までを表示した後、
</font> で、（あ、もうこのフォント表示は終了なんだな）って思うわけです。
要は、<タグ名></タグ名> ではさまれた内容を、
タグ名で示される支持に従って、表示をいろいろ変えられるようにしているのです。
で、そのサイズ、色で、「こんな表示」までを表示した後、
</font> で、（あ、もうこのフォント表示は終了なんだな）って思うわけです。
こんな具合にして、いろんな種類のタグがあります。
今回はフォント状態の変更でしたが、
リンクとして扱う、だとか、指定画像を表示する、だとか、
様々あります。
こういった、タグをいっぱい寄せ集めたものが、
HTML 言語と呼ばれるもので、
結局実態は、テキストファイルなのです。
Internet Explorerさんが、
タグを解釈して表示を行うから、
あたかも単なるテキストではないかのように見えているのです。
で、みなさんお使いのホームページ作成ツールも、
一見、ワープロのように使用できますが、
出力されるのは、この HTML 言語で記述された、テキストファイルなのです。
論より証拠、作成された HTML ファイルを、
メモ帳で強引に開いてみてください。
メモ帳を立ち上げて、ファイル→開く で HTML 文章(XXX.HTML) を指定して、開きます。
タグでいっぱい囲まれた、テキストファイルとして
閲覧することができることに気が付くと思います。
ちなみに、Internet Explorerをお使いの方は、
いずれかのホームページを開いた上で、
編集→ソース とすると、この HTML 言語そのものを見ることができます。
こういった言語のことを、マークアップ言語 と呼び、
実際、HTML もHyper Text Markup Language の略なわけです。
これらタグに関する仕様は、
World Wide Web Consortium （W3C）で規定されています。
その活動お陰で、Internet Explorer でも Netscape Navigator でも
同じようにサイトを閲覧できるわけですね。
ですが、法律解釈でいろいろもめるのと同じように(^^;)
各ブラウザでW3C仕様解釈が異なり、
同じページがブラウザで違う見え方になってしまったりするのが
現状だったりしています。
タグは一般に次のようなフォーマットを持っています。
| タグ | < | font | size | = | "7" | > |
| 内容 | 要素 | 属性 | 属性値 | |||
| 意味 | font変更 | 大きさ | 7px |
後はこちらリファレンスサイトなどを参考にするなどして、
どんな要素があって、その要素にはどんな属性があるかを調べれば、
一通りの実装が可能！と言うわけです。
もちろんタグの要素、属性はあるもの全部を覚えるような種類のものではありません。
必要なときに必要なだけ調べて実装して、
後はそれをコピーして使う、という感じですね。
繰り返していくうちに、自然と覚えてしまいます。
↑目次
JavaScript と言うのは、HTML の中に記述できる、
プログラム言語です。
（プログラム言語については、CGI 解説 で記載しています。）
HTML はマークアップ言語ですから、
動作を書くことができません。
そこで、プログラムを書けるよう、
後付けで拡張されたのが、JavaScript です。
サイト文章が単なるブラウザにコピーされた文章にすぎないことを
こちらでお話していますが、
そのコピーされた方で動くプログラムなわけです。
つまり、
プログラムといえば CGI なのですが、
CGI との違いは、CGI がサーバー上で動作するのに対し、
JavaScript は、ブラウザ上で動作します。
CGI の解説でお話したプリント配布の例で言えば、
生徒一人一人に配ったプリントを修正できるのが CGI で、
生徒が一人でこっそり、自分のプリントを修正できるのが JavaScript ってわけです。
ですので、BBS
のようにデータを共有したりするようなものは
実現できないわけですね。
それでも、とても動きのあるページをポータブルに設計できますし、
CGI と連携すると、様々な動作を実現できるのです。
スタイルシートとの連携も見逃せません。
ウィンドウをポップアップしたり、
サイズを変更したりと言った、
ブラウザ側で実現したいプログラム実行はいくらでもあります。
今やサイト設計には必須の言語ではないではないかな、と思います。
↑目次
詳しい人と話していると、
ときおり、『ホームページ』と言う言葉は間違いだ、
本当の名称は『サイト』若しくは『ウェブ・ページ』だ。
なんて聞きます。
ホームページは、ウェブ・サイトにおける
ホームにある個所、つまり index.htm を指すのだ、と。
でも、ホームページビルダーなんて製品まであったりして、
『ホームページ』という言い方は既に市民権を得ているのでしょう。
そこいらは単に名称定義のお話なので、
まあ、みんなのイメージが一致していれば良いってことにしましょうね。ね。
サイトはこのページに辿り付いて
参照していらっしゃる方が知らないわけなくって、
その解説は『今見ているこれです』って感じになっちゃって、
『この括弧内の文章は嘘を書いている』
みたいな論理的にも訳わかんないことになって
ここでごちゃごちゃ書くことに意味があんのかいって
感じになっちゃうので(^^;)
ここでは、サイト設計を行う上での『サイト』、必要事項列挙です。
余談ですが、以前 CGI 設置講座と言うのをやってみたことがあって、
そのとき、この話から導入しようとしたら、どんどん訳分からなくなっちゃったんですよね(^^;)
テキスト・ファイルってご存知ですか？
Windowsをお使いの方は、メモ帳って言うソフトがありますね。
Mac
にも名前は知らないのですが、
「テキストエディタ」と言うものが標準でついていると思います。
文字を飾ったり、レイアウトを切ったりとか、
そういうことはぜんぜんできないけど、
とにかく文字だけは打てるソフトですね。
このソフトで作ることができる文書を、
テキスト・ファイルと言います。
この『テキスト』とは、
パソコンにおいては、
最も基本的な文字データの羅列を指し、
E-Mail も平たくはこの『テキスト』です。
以前、こちら （コラム 『インディーズとMP3』）で、デジタルとはどういうことか、
と言う話をしたのですが、
パソコンにおいては、全てが数字の羅列（デジタル）として列挙されます。
そこで、例えば、仮に、『あ』を01番、『い』を02番、と割り当てたなら、
『あいあい』と言う文書は
01 02 01 02
と書けそうです。
こんな具合に全ての文字一つ一つに対応する番号を与える。
で、この数字の羅列が、テキストと言う文章データなのです。
しかも、この、文字対数字の対応表は、
国際標準（一部言語を除きますが）なので、
Macだろうと、Windowsだろうと閲覧することができます。
ですから、E-Mail 等もテキスト文章なわけですね。
これで、Mac から送られた E-Mail が Windows で見ることができるってなわけです。
（こちらのコラムでも、そんな話をちょこっとだけしてます）
実は、サイトに書かれている文章、
これらも実は単なる「テキスト」です。
違うのは、ネットワーク上を介して、
お手持ちのコンピュータから、他のコンピュータ上にある
このテキストファイルを閲覧できる点だけです。
閲覧って言っても、別にたいしたことしているわけじゃなくって、
サイトのテキストファイルが、
もとある場所から、そのまま送られて、お手持ちのパソコンにコピーされるだけ
です。
だから、フロッピーディスクで、他の人が書いたテキストファイルを
自分のパソコンに持ってきてそれを閲覧しているのと同じことです。
それをネットワーク上で行うための方法、手順を http とか言うわけですが、
んなこと分かってなくてもホームページは作れます。
重要なのは概念です。イメージ作れそうでしょうか？
でも、ここで、多分、
何いってんだ、テキストと違ってホームページには画像もあるし、
リンクだって貼れるし、文字フォントのサイズを変えることだってできるぞ、
ってお思いになるかも知れませんね。
そこで HTML と言うお話になるのですが、
その辺りは HTML の解説にてお話致します。
サイトに置かれているものは、
実体はテキストファイルなのですが、
拡張子と言うものが違います。
Mac をお使いの方はあまり馴染みがないかも分かりません。
Windows でも最近は表示されなくなってしまったようですね。
拡張子とは、xxxx.txt だとか、xxxx.mp3 といった具合に、
最後に「.」を打って、そのファイルが何を示すものかを
明示する文字列を追記するものです。
mp3 ならば、mp3 音楽 ファイルですし、
txt ならテキストファイルです。
Windows では大方、拡張子が非表示になっていますが、
この拡張子を見て、データに対するアプリケーションを決定しているのです。
例えば、WORD
で作成された文章は doc と言う拡張子が付いています。
文章.doc をダブルクリックすると、Windows は doc を見て、
ああ、WORD を立ち上げればいいのだな、と気が付くのです。
論より証拠で、 フォルダの
ツール→フォルダオプション→表示→ 登録されているファイルの拡張子を表示しない
のチェックを外して、WORD 文章ファイルを見てみましょう。
拡張子 doc がついていることを確認できます。
この拡張子はデータの種類（立ち上げるアプリケーションの種類）によって
ユニークに銘々されています。
更に余談ですが、 Mac の場合、
これら情報は拡張子ではなく、ファイルの中にデータとして内包される形となっています。
これが、 マック・バイナリと呼ばれるもので、
ファイルアップロードの際、考慮しなければならなかったりします。
拡張子と言う考え方は、UNIX
と言う、
エンジニア向け OS
から Windows （古くは MS-DOS）へ派生したものです。
インターネットはもともと UNIX 環境を前提に実装されたものですから、
こういった UNIX 的なものが色濃いわけです。
さて、前置きが長くなりましたが、
サイト文章の実体は、拡張子が htm/htm のテキストファイルなのです。
なぜ、htm/html なのか？
それはそう言う風に決まってるのです(^^;)
それ以外何者でもありません(^^;)
こういうのを『スペック』若しくは『仕様』と言うわけですね。
Internet Explorer
や Netscape
Navigator は、
この拡張子を見て、それが HTML 文章であることを知るのです。
余談ですが、多分、最初は html だけが仕様だったのだと思いますが、
古い Windows では、拡張子が3文字と限定されていたので、
仕様が拡張されたのではないかな？と想像しています。
大抵のサイトは、
http://www.mikiko-sound.net/
と言う具合に、URL
だけを指定して参照できるようになっています。
その場合、 index.htm （index.html）と言う名前の
ファイル が参照される決まりとなっています。
もし、そのサイトに index.htm がない場合、
こんな具合でサイトがフォルダとして表示されることになっています。
ですので、サイトを作る場合は、
この index.htm を作成するところから始めるわけですね。
なお、サイト上に別フォルダを作って、
そこにグラフィックファイルなんかを置いている場合も、
出来る限り仮の index.htm を置くべきでしょう。
そうでないと、隠して置いてあるファイルなんかも
全部覗かれてしまうのです。
index.htm にはサイト上のフォルダに
セキュリティをかける役割もあるのです。
↑目次
クロスブラウザ、と言う言葉が時折出てきます。
これは、Internet Explorer、Netscape
Navigator と言った、
様々に存在するブラウザに依存せずに参照できるサイト設計を指します。
実は、ブラウザの種類だけでなく、
同じ種類のブラウザでもバージョンで動作が異なったり、
Windows
と Machintosh
と言った OS で動作が違うこともあります。
もともとブラウザと言うものは World Wide Web Consotium
;W3C と呼ばれる
規格団体が作成する仕様に準じて設計されているのですが、
ちょうど法律解釈でもめるのと同じように、
同じ仕様でも各ブラウザで解釈が異なったり、
バグがあったりでなかなか思うに任せられないのです。
基本的には、W3C仕様を神様として、
将来バージョンでバグが修正されたり、
仕様が変更される可能性があるため、
W3C 標準を極力守るのが良い、とされています。
しかしながら、例えば、本ページで利用している、フレームなどは、
W3C 標準とは若干のずれがあります。
が、2002年 1月現在、IE と NN 共に、ずれたフレーム仕様で動作できてしまいます。
この2つのブラウザを抑えていれば9割以上の閲覧者には大丈夫です。
このように、デファクトになってしまった「暗黙の仕様」と言うものがあったり、
折角標準に合わせたのに、ブラウザのバグによって動作できない可能性もあるため、
単純に標準を守れば良い、と一概に言えるものではなさそうです。
基本的な HTML を用いていれば、
全く問題らしいことはおきないのですし、
ドリームキャストやら、PlayStation2
やら、iMode
やらの
プリミティブなブラウザや、王道 Linux
のブラウザもサポートできるのですが、
それではデザイン的に優れたサイトは設計できません。
この問題について、抜本的対策はないのだろうと思います。
様々なサイトから情報を集めたり、
出来る限り自分で確認・検証したりして、
設計していく以外方法はないんじゃないかな、と思っています。
デザインとは、想定されるオーディエンスがいるものです。
オーディエンス無き標準には疑問があります。
悪く言えば寄らば大樹の陰です。 それがデザインです。
であるならば、少数派を切り捨てる勇気も大切なことだと思うのです。
かと言って、みんなが自分と同じ環境だと思ってサイトを作ってはいけません。
そんなサイトからはどんどん閲覧者が減っていってしまうでしょう。
そこはバランスです。
様々あるパソコン環境の中、
なるべく多くの人にとって良いデザインであって欲しいところです。
そういうことを考えることがサイト設計には重要なのです。
そしてよく話しに登るクロスブラウザとは、そういった現状に対して
飛び出してくる言葉なのです。
↑目次
映像（MPEG等）や音楽ファイル（MP3等）って、大抵
1〜10MB くらいあって、
アナログ回線の場合、ダウンロードに平気で10分〜30分程度かかってしまいます。
バンドなんかをやっていて、
音楽を聞いてもらいたくても、有名人でもない限りは、
なかなか10分かけてダウンロードしてくれるのは難しいところです。
こんな問題を解決してくれるのが、ストリーミングと言う方法です。
ストリーミングとは、ファイルをちょっとずつダウンロードして、
ダウンロードが完了した分だけどんどん再生する方法で、
視聴者に音楽や映像が届くまで数秒もかかりません。
ストリーミングを行うためには、再生用のプログラムと、
特別なファイル形式へ変換するツールが必要です。
多くはサーバー側にも仕掛けを用意する必要があるのですが、
現在、最も有名なストリーミング・プレイヤー（無料）である、
RealPlayer では Real Audio
/ Real Video 形式のファイルに変換して、
サイトに置くだけでストリーミングを実現できます。
Tech::HowTo の 「音楽や映像を公開する」 に
方法をまとめています。あわせてご参照ください。
↑目次
HTML の解説にて記載する通り、
HTML はドキュメント内の各表示属性をタグと言う考え方でサポートするものでした。
しかし、これには欠点がありました。
各タグが決められたようにしか、表示ができなかったのです。
HTML の仕様が W3C によって勧告されたとき、
ある程度汎用性を以って決定されていたものと思いますが、
どうやら、正式なドキュメントとして用いるには表現力に乏しかったようです。
そこでスタイルシートの登場となります。
スタイルシートは後付け的に拡張されていますので、
そのポリシーがなかなか見え難いのですが、こういうことです。
各タグの表示状態はドキュメントごとに定義できるようにするべきだ。
これがどういうことなのかと言いますとですね。
例を以って解説してみましょう。
HTML のタグには、<H1>
とか、段落の表題用に用意されたものがあります。
（詳細はリンク先『とほほのWWW入門』サイトを参照）
例えば、<H1>H1の表示</H1> は、以下のようになります。
<H1>H1の表示</H1>
H1の表示
<H3>H3の表示</H3>
H3の表示
<H6>H6の表示</H6>
H6の表示
これは、ドキュメントを作るとき必要な、
大見出し、中見出し、小見出しをサポートするものなのですが、
俺は見出しを大きさで表現したくないんじゃーっ！！！
って思うかもしれない。いや、実際、僕はそう思う。
このサイトはテーブルを使っていい加減に設計していますが、
ツールのサポートがないのと、
このサイトを設計し始めた時点ではあまり良く分かっていなかったのと両方です。
こんな風にして、<H1>タグの表示を再定義できてしまうのです。
<style type="text/css">
<!--
h1 {
font-family: "MS UI Gothic";
font-size: 14px;
font-weight: bold;
text-align: center;
border: thin dotted #0066CC;
vertical-align: middle;
background-color: #CCFFFF;
height: 30px;
width: 100%;
padding: 15px;
}
-->
</style>
このコードの意味は
{ と } スタイルシート属性によって、<H1>タグを表示しなさい、
と言う意味です。
で表示は以下のようになります。
<H1>スタイルシートによって変更されたH1の表示</H1>
スタイルシートによって変更されたH1の表示
この作業によって、
一貫して<H1>タグの表示はこの形となってくれ、
デザイン的にも美しくなります。
さらに、スタイルシートの定義を別のファイルにして、
各ページから呼び出すことが可能です。
その方法を用いれば、 全ページに渡って、このタグのスタイル定義が生きます。
さて、実際のスタイルシートでは、この表示スタイルの変更が、
タグによってではなく、
その場で個別にも行うことができるようになっています。
その場合、こんな風にして、その場だけスタイルシート属性を適用させることができます。
<style type="text/css">
<!--
.midashi-sample {
font-family: "MS UI Gothic";
font-size: 14px;
font-weight: bold;
text-align: center;
border: thin dotted #0066CC;
vertical-align: middle;
background-color: #CCFFFF;
height: 30px;
width: 100%;
padding: 15px;
}
-->
</style> … <span class="midashi-sample">スタイルシートによって変更されたH1の表示</span>
実はこのことが、事の本質をぼやかす仕様で、
各タグに関するデザインを個別に定義できるもの、
と言うのが本質なのです。
この考え方は少し勉強を進めていくと XML
と言う
次世代 HTML（厳密には HTML の拡張ではないが） の概念にも通じていきます。
スタイルシートには大変困った問題が、2002年現在にはあります。
実は、上記動作は各ブラウザ間で W3C 仕様解釈が異なるのです。
基本的な動きは述べたとおりですが、
個別のスタイルシート属性の適用方法がまちまちなのです。
実際、Internet Exproler
と Netscape
Navigator で
表示が変わってしまうケースがままあり、
クロスブラウザの観点から難しい事態に陥ってしまうのです。
このことが、各社ツールのスタイルシートサポートを鈍らせ、
初心者に対する敷居をぐーんと引き上げてしまっていると考えています。
実際、これを使うと、単一ブラウザでは美しく設計できるのですが、
他方では偉いことになってしまうことが多々あり、
設計時間が3倍以上に登ってしまうことが（僕個人的には）良くあります。
無碍にスタイルシートをスクラッチから設計しようとせずに、
サンプルなどを改変すると言うような程度が無難かもしれません。
（ちなみに、上記サンプルは表示が変わってしまうから参考にしないでね…(^^;;;）
↑目次
このページで「テーブル」と言う言葉が頻繁に出てきますが、
要は以下のような「表」です。
こちらで示すサイト設計ツールを初めとして、
巷のHTMLエディタと言われるものでは
必ずと言って良いほどサポートされている表示方法ですね。
馴染み深いと思います。
| テーブルのサンプル | ||
| セル(2行・1列） | セル(2行・2列） | セル(2行・3列） |
| セル(3行・1列） | セル(3行・2列） | セル(3行・3列） |
| セル(4行・1列） | セル(4行・2列） | セル(4行・3列） |
これを HTML 的に、「テーブル」と言い、
表の中の一つ一つの囲みを「セル」と言います。
ツールを用いた場合でも最後はやはりタグになっています。
こんな具合。
<table width="100%" border="2" cellspacing="2" cellpadding="2">
<tr bgcolor="#CCFFFF" align="center">
<td valign="top" colspan="3">テーブルのサンプル</td>
</tr>
<tr>
<td valign="top">セル(2行・1列）</td>
<td valign="top">セル(2行・2列）</td>
<td valign="top">セル(2行・3列）</td>
</tr>
<tr>
<td valign="top">セル(3行・1列）</td>
<td valign="top">セル(3行・2列）</td>
<td valign="top">セル(3行・3列）</td>
</tr>
<tr>
<td valign="top">セル(4行・1列）</td>
<td valign="top">セル(4行・2列）</td>
<td valign="top">セル(4行・3列）</td>
</tr>
</table>
細かいタグの説明は行いませんので、
詳細については、 こちらのリファレンスサイトなどをご活用してみてください。
概略だけ示すと、
table タグが、テーブルの宣言、tr タグが一行を示し、td タグがセル一つ一つを示します。
HTML ではレイアウトを切るのが難しいので、
スタイルシート等と組み合わせて、
このテーブルを活用することが往々にしてあります。
↑目次
このアイディア&&テクノロジーサイトのように、
複数のページ領域のあるサイトを「フレームサイト」、
その一つ一つの領域を 「フレーム」と言います。
フレーム一つ一つは別の HTML 文章として設計します。
HTML 文章から、別の HTML 文章を呼び出せるのがメリットです。
大元になっているフレームを親フレーム、
その中にあるフレームを子フレームと言ったりします。
このサイトの左側や上にあるメニューを
真っ当に設計する場合、
全ページ同じようにコピーして作らなければならないのに対し、
フレームを用いれば、中身だけの設計でこと足ります。
とても後々のメンテナンスが容易なのです。
また、ページからページに移る際のロード時間も多少節約できます。
JavaScript とも相性が良く、
組み合わせるとかなりのことが出来ます。
HTML 的には frameset / frame と言うタグを用いて実現されますが、
各種 HTML ツールは、
個別にこのフレームをサポートしているので、
よほど技を出そうと思わない限り、
ツールを使えばこと足りるでしょう。
覚えるのが難しいタグでしたが、
ツールのサポートがあるので、とても実装は簡単です。
詳細については各種お使いのツールの取説を参照ください。
W3C 標準が曖昧な分野なので、
クロスブラウザの意味で難しいところです。
iMode
等、モバイル端末の一部では
参照できなくなってしまいます。
まあ、それは標準にならって スタイルシート等を使ったところで
状況は同じことですが。
また、検索エンジンや直リンクに対応できません。
親フレームには文章をかけませんので、
検索エンジンに引っかかるページは全て子フレームです。
検索エンジンから来てくれる視聴者は、
子フレームだけのページを閲覧することになってしまいます。
直リンクの場合も同様です。
様々欠点はあるし、
時代の流れ的にはスタイルシートであり、
フレームを忌み嫌う超風さえある昨今なのですが、
アイディア&&テクノロジーではフレームの使用を推薦します。
フレームのメリットはその欠点を補うに十分です。
特に個人サイトの場合、
多くの環境のサポートそのものがそもそも難しいし、
標準に拘るよりはフレームを使って良いのじゃないかなあ、と
思っています。
クロスブラウザ的にも Internet
Explorer / Netscape
Navigator の両方が
フレームをサポートしています。
一流と言われる企業サイトでもフレームを使っているサイトは少なくありません。
↑目次
go back to frame top