編集後記
このページには、以下のことを記載しています。| メンバー | このサイトの作成を担当したメンバーを記載しています。 |
| 方針 | このサイトを作成するにあたっての方針を記載しています。 |
| 技術解説 | このサイトを作成するために使用した
技術を解説 しています。
以下の２項目についてはページを分けて詳しく解説しています ・ 「擬似フレーム（＝疑似フレーム）」の作り方 ・ 「自動生成メニュー」の作り方 |
| 動作確認ブラウザ | このサイトの動作確認ブラウザを行ったブラウザとその結果の一覧表です。 |
メンバー
八上 全弘（HTML, CSS, JavaScript作成）、
森澤 信子（配色決定、画像作成）、
藤本 晃司（CSS 作成）、
三木 幸雄（統括、写真撮影・処理）
方針
このサイトの作成を開始する前の話し合いで、以下のようなことを決めました。
- ２階層のみの階層構造にする。
- 全体の構成をわかりやすくし、どの部分にもアクセスしやすくするために、 ページの左側にメニューを作る。（サイトマップが要らないくらいにわかりやすく便利に）
- メニューを編集するとき、
編集すべき箇所が多数のページに分散して存在するのではなく、
1箇所のみの変更で済むようにページを作る。
（例：外部 JavaScript を共通で使用する、フレームを使用するなど） - 全ページに共通のバナーを使う。
- 全ページに共通のスタイルシートを使う。
- 画像を豊富に使用し、楽しくわかりやすいサイトにする。
- フラッシュをはじめとする、再生にプラグインを必要とするものを使う場合、 トップページには使わない。
- JavaScript を使う場合は、互換性に配慮する。
技術解説
このサイトを作り始めた時は、メニューの利用のしやすさや、
メニューの内容のメンテナンスのしやすさやを考えて、
フレームを使用していましたが、サイト内の個々のページを URL
で紹介するわけにはいかないなどの問題がありました。
そこで、フレームを使わずに、フレームを使ったサイトの良さを、
スタイルシートと JavaScript を駆使して実現することにしました。
フレームを使って作っていた時と比べ、見た目も動作も殆ど同じです。
「疑似フレーム」や「フレーム風サイト」とでも呼ぶべきサイトを
実現している方法をこれから書いていきます。
主要なブラウザの最近のバージョンには全て対応出来るようにしました。
IE6 は、 { position: fixed } が使えませんが、
「IE6でもスクロールしても動かないボックス」というページに
良い解説と例があったので、参考にさせていただき、対応できるようにしました。
動作確認ブラウザ
| ブラウザ名 | 動作 |
| Internet Explorer 6 | ◎ |
| Internet Explorer 7 | ◎ |
| FireFox 1.5 - 2.0 | ◎ |
| Netscape 7.2 | ◎ |
| Mozilla 1.6 | ◎ |
| Safari 2.0.4 | ◎ |
| Opera 9.02 | ◎ |
| Sleipnir 2.64-2.66 | ◎ |
| lynx | ◯ |
| IE 5.0-5.5 | ◯ |
| Mac IE 5 | ◯ |
| Netscape 4.x | ◯ |
| 対応状況が ◯ のものは、スタイルシートを読み込まないで動作します。 このサイトは、サイトマップを用意して全ページの上下にそこへのリンクを表示するなどし、 スタイルシートや JavaScript を読み込まなくても支障なく閲覧できるように作ってあります。 | |
最後に
このサイトでは、 JavaScript や CSS を多用してページを作っていますが、
技術先行のページにありがちな、ごてごてした印象や、
いかにも技術を使っていますという印象を与えない
すっきりとしたデザインのページに仕上がって良かったと思います。
八上全弘
更新履歴：
2006年10月15日 初回作成
2006年10月26日 文章、メールアドレスを追加
2006年10月28日 技術解説の概要を追加
2006年11月02日 対象とするブラウザについての記載を追加
2006年11月03日 動作確認したブラウザの一覧を追加
2006年11月07日 「疑似フレーム」の作り方と自動生成メニューの作り方を別ページに分離。