[PR]テレビ番組表
今夜の番組チェック

 

サイトの更新について

スタイルシートはWEB DTP

CGIやJavaの依存が少ないDHTML

メニューバーについて

解りにくい専門書

Webの環境

使用しているフォント

参考資料

Page Top ▲

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

表示比率が異なる画面

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用にフォントをバックアップしていますが、当方のMacintoshのIE5では表示できていません。
※サンプルでは、他のフォントも使用しています。

Windows 2ed Macintosh 2ed
MS Pゴシック MS ゴシック MS ゴシック Osaka
MS UI Gothic MS ゴシック MS ゴシック 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 ポケットリファレンス

技術評論社
潟Aンク著

ホームページ裏ワザ大全

インプレス
インターネットマガジン編集部著

続 ホームページ裏ワザ大全

インプレス
インターネットマガジン編集部著

Wedスタイルシート活用ガイド

プレンティスホール出版
スティーブン・マルダー著

HTML&XHTML&CSS辞典

秀和システム
大藤 幹著