About

HTMLだけで自由にレイアウトをすることは大変です。また動的なサイトを作るには、Java Scriptの知識が必要になります。
もっと自由にレイアウトができ、動的なサイトを誰でも簡単に作れるのが、Windows Internet ExplorerのCSS（スタイルシート）やDHTML（ダイナミックHTML)です。
Dynamic HTML Stylingでは、Webデザインの観点からスタイルシートやDHTMLを考えてみたいと思っています。
作成者自身、HTML技術者でありません。また、独学のスタイルシートのため独自の考え方をしているかもしれません。1ユーザーが作成したサイトとしてご覧ください。

サイトの更新について

誤った説明をしているページが多々ありました。発見した誤り個所は訂正しましたが、見落としがあるかもしれません。お気付きになられ方は、お手数ですがご連絡ください。
全面リニューアルする予定でしたが、マイナーリニューアルになってしまいました。

スタイルシートはWEBのDTP

HTMLでは、文字の大きさや行間、また自由に要素を配置させることができません。
この問題を解決したのが、スタイルシートです。デザインソフトやDTPソフトのように、自由にデザインやレイアウトすることが可能になります。また、デザインやレイアウトのフォーマット決定していれば、簡単に統一したデザインのサイトを作ることができます。スタイルシートは、DTP経験者なら比較的簡単に理解できると思います。

TABLEはレイアウト用のタグ？

Webデザインのレイアウトには、TABLEタグに依存していました。TABLEを入れ子にして要素を配置します。TABLEは、構造が複雑になるほど整合性の調整やレイアウトの崩れなど問題が発生します。また、読み込みも遅くなります。
TABLEは、表用のタグですから本来の表部分に使用するものと思います。

読みづらいHTMLのテキスト表示

HTMLでは、テキストの行間を指定できません。欧文の場合、ディセンダ（ｙなどの下の部分）があるため行間がなくても読みにくくありませんが、漢字場合は行の隙間がなくなりますか読みにくくなります。スタイルシートでは、行間を調節することができますから、文章が読みやすいサイトを作ることができます。

表示比率が異なる画面

Webデザインでは、用紙のサイズや縦横の比率を制作者が決めることができません。閲覧者の表示比率やサイズよって異なります。比率やサイズが変わっても、できるだけデザインが変わらないように作ることが必要です。スタイルシートも座標基点が左・上から右・下にも対応し柔軟度が増しました。

CGIやJavaの依存が少ないDHTML

IEのDHTMLは、それまでCGIやJava Scriptが必要だった機能を使用せずに動作させることができます。Java Scriptついては、まったくなしというわけにいきませんが、使用しなくても動的にできるものが数多くあります。
Java ScriptやCGIの知識がなくても、構文を記述するだけでできるIEのDHTMLは、誰でも簡単に動的なサイトが作れるという点では一歩近づいてきたように思います。

データバインディング

これまで外部データをページに呼び込むにはCGIが必要でした。IEのデータバインディングは、CGIなしでこの機能を果たします。Excelなどで作成したCSVデータを読み込み、検索やソートなどもできます。CSVデータを更新するだけで最新の情報を伝えるなど、いろんな利用方法が考えられます。

内容を変える

IEのinnerHTML機能は、ページ内の内容をサーバーにアクセスせずに変えることができます。

表示を変える

Java Scriptなしで、要素にマウスが触れたら色を変えたり、画像を変えたり、表示・非表示させたりすることなどができます。この表示・非表示で折りたたみメニューができています。

ブラウザのバージョンアップで追加されていく機能

IE5・6とブラウザのバージョンアップで、HTMLに時間を加えたTIMEやDOMやビヘイビアなど追加されています。この中には、簡単に使用できる機能もあります。
Microsoft USAのMSDNサイトで、よいサンプルが見つかるかもしれません。IEのDHTMLの場合、NNに対応してないものやMacintoshのIEで動作しないものありますので、ご注意ください。

当サイトのメニューバーについて

当サイトの折りたたみメニューバーについてお問い合わせがありますので、このページでご質問にお答えいたします。
当サイトの折りたたみメニューバーは、「続ホームページの裏ワザ大全」（インプレス）のTipsを利用させていただいています。Java Scriptとスタイルシートで動作しています。
このJava Scriptは、他のものより汎用性が高いJava Scriptです。
詳しくは、書籍かインプレスの「続ホームページの裏ワザ大全」サイトのhttp://home.impress.co.jp/books/urawaza/tipsbook2/049/で、ソースをご覧ください。
なおTipsを利用させていただいるため、当サイト上でJava ScriptおよびHTMLソースの公開や解説は控えさせていただきます。

解りにくい専門書

近年、スタイルシートやダイナミックHTML関連の書籍はかなり多くなりました。
「ドキュメント」や「メソッド」や「オブジェクト」など技術専門用語が多かったり、IEとNNの対応が不明解だったりしています。このサイトでは、できるだけ専門用語を避けようと思っています。また、Windows Internet Explorerで可能なものだけを取り上げています。

用語について

専門用語をできるだけ避けていますが、下記の用語の理解は必要です。用語の解釈で、専門的には誤りがある場合があります。また、基本的な知識としてHTMLのタグの存在(理解度は別)は必要です。

プロパティ

プロパティ（Propaty）は、スタイルシートで要素などのサイズや色や位置など指定するためのコマンドです。

セレクタ

セレクタ（Selecter）は、そのスタイルの名前で、Wordなどの書式スタイルと同じ働きをします。

要素

要素（Element）は、HTMLの本文中の開始タグと終了タグ内のテキストや画像など要素内容（Content）を含む全体を指します。

Webの環境

このサイトは、Front Page2000で制作し、2003で更新しています。
また、Front PageのFrontPage Server Extensionsに対応しているフリーのISP(インターネット・サービス･プロバイダー)のTripod Japanに載せていましたが、infoseekのiswebとの完全統合になり、FrontPage Server Extensionsのサービスを受けることができなくなりました。

iswebのCGI環境

iswebは、FrontPage Server Extensionsに対応できないため、CGIを使用しなければなりません。
iswebは、CGIが利用できますが動作しないものもあります。sendmailは、使用できませんから、オリジナルCGIを使用したフォームの送信はできません。

下記がiswebのCGI環境です。

Perlバージョン	5.006001
CGIの実行権限	other権限
perlパス	/usr/local/bin/perl
sendmailパス	/usr/lib/sendmail （iswebバーシックのみ利用）
shパス	/usr/bin/sh
symlink関数	可能
flock関数	可能
CGI拡張子	cgi
SSI拡張子	shtml
CGI実行ディレクトリ名	cgi-bin
FTP接続	ftp.at.infoseek.co.jp
TELNET接続	不可

完全統合でFrontPage Server Extensionsが使用できなくなりました

Front PageのFrontPage Server Extensionsの場合、CGIなしでカウンターやゲストブックなどを自由に設けることができますが、iswebとの完全統合で、FrontPage Server Extensionsが使用できなくなりましたので、フォーラムやゲストブックなど関連するページを廃止することにしました。
FrontPage Server Extensionを利用できるフリーにISPは、アメリカのTerra Lycos（Tripod Japanの元）があります。ただし、Terra Lycosは、広告バナーがPopupで利用できません。

http://www.terralycos.com/

使用しているフォント

Macintosh用にフォントをバックアップしていますが、当方のＭａｃｉｎｔｏｓｈのIE5では表示できていません。
※サンプルでは、他のフォントも使用しています。

Windows	2ed	Macintosh	2ed
ＭＳＰゴシック	ＭＳゴシック	ＭＳゴシック	Osaka
MS UI Gothic	ＭＳゴシック	ＭＳゴシック	Osaka
Arial	Arial	Arial	Helvetica
Tahoma	Arial	Tahoma	Helvetica
Webdings	none	none	none
Wingdings	none	Wingdings	none

参考資料

このサイト作成にあたりMicrosoftのMSDN Libraryサイトおよび、下記のCDおよび書籍を参考にさせていただきました。

Microsoft Internet Client SKD	Microsoft
FrontPage2000 オフィシャルマニュアル	日経BPソフトプレス Jim Buyens著
Dynamic HTMLサンプルガイド	日経BPソフトプレス William J. Pardi著
Dynamic HTML+ASPアプリケーションブック	翔泳社戀川光央著
スタイルシート辞典	翔泳社安川英明著
Dynamic HTML ポケットリファレンス	技術評論社㈱アンク著
ホームページ裏ワザ大全	インプレスインターネットマガジン編集部著
続ホームページ裏ワザ大全	インプレスインターネットマガジン編集部著
Wedスタイルシート活用ガイド	プレンティスホール出版スティーブン・マルダー著
HTML&XHTML&CSS辞典	秀和システム大藤幹著