かきつばた：「はなごよみ」風スタイルシート

　私が試行錯誤の末考案し、1996年12月以降本ウェブページで採用したメニューデザインを気に入って、真似して使ってくださる方も結構いらっしゃるようで、うれしく思います。とは言え、テーブルの背景色を活かしてメニューを見やすくするなんてアイディアは誰もが思い付きそうなもので、今では似たようなデザインもすっかり一般的になってしまいましたが……。

CSS2準拠

　これまではHTML3.2準拠の、スタイルシートを使わないテンプレートとして公開してきましたが、この形式での公開は廃止します。今ではCSS対応ブラウザが一般的になった上、スタイルシートのファイルを入れ替えるだけで色を簡単に変更出来るなどメンテナンス性にも優れるため、これからはスタイルシートとHTML4.01準拠のサンプルHTMLの形式で公開します。

　私はCGI/SSIスクリプトやJavaScriptによるプログラムも公開していますが、今後更新するプログラムについては、このiris.cssを使ってスタイルを自在に変更できるようにします。サンプルの、「ファイル更新日時」について、背景が白地・黄色地と黒字の時とで色が変わることに注目してください。クラスにしておけばCGIスクリプト側をいじる必要がまずありません。

（注意：上にある「HTML 4.01」「CSS」のバナーは、このサイトの配布しているバナーではありません。HTML/CSSの規格を定めているW3C（ワールド・ワイド・ウェブ・コンソーシアム）という機関が、正しいHTML/CSSの記述をしているページに貼る事を許可しているものです。「カッコイイから自分のホームページにもこのバナーを貼りたい」って気持ちはわかりますが、あせらないで。バナーのリンク先にあるHTML/CSSの文法チェッカであなたのホームページをチェックして、合格したら堂々と自由に貼れますから。）

サンプル

サンプル(iris_sample.html) - 上のリストボックスでスタイルシートを切り替えられます（要JavaScript対応User Agent）

ダウンロード

　Windowsの場合、リンクを右クリックし「名前を付けて保存」でファイル保存することができます。

オリジナル(iris.css) - 赤、黄色、緑、青を活かした「はなごよみ」オリジナルスタイル
白色(iris_w.css) - 白を基調としたデザイン
黒色(iris_bk.css) - 黒を基調としたデザイン
英語版(iris_e.css) - 欧文フォントを使った英語サイト向け

更新履歴

v1.01(2002/08/17)　CGIスクリプト用のクラスを追加、英語版を追加
v1.00(2002/08/12)　スタイルシート版公開

使用法

　HTMLとCSSに関する基礎知識を持っている人向けです。メールや掲示板での無料HTML講座は行いませんので念のため。<head>～</head>の中に、<link rel="stylesheet" href="iris.css" type="text/css">を入れてください。はなごよみ風のメニューの作り方は、サンプルのソースを参考に。

　HTML4.01 Transitionalの形式で書く場合、DOCTYPE宣言をloose.dtdのURIを書かない省略形式で書くと、IE6.0ではテーブル内部のテキストがbodyエレメントに指定したサイズではなく、デフォルトのサイズになってしまうらしいので念のため。これは仕様なのか、他のUAで同じ現象が発生するのかは、よくわかりません。Strictの場合はこの現象は発生しません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

　ホームページ作成ソフトでの使用に関しては保証していません。ソフトの対応次第によっては使えるかもしれませんが。例えばMicrosoft Frontpage 2000では、[書式]-[スタイルシートのリンク]でCSSファイルを指定することができます。表を使ってはなごよみ風メニューを作るなら、セルを右クリックして「セルのプロパティ」を選ぶ→「スタイル」ボタンを押す→「クラス」にクラス名(h1-em/h2-em/h3-em/h1/h2/h3/indention/item/detail/note のいずれか)を入れる、という操作です。

　間違っても「ホームページ制作王」みたいな、HTMLやCSSの理念を全く無視してるソフトから使おうという気は起こさない方が賢明でしょう。ホームページ作成ソフトからの使用方法についての質問には回答いたしかねますので、あらかじめ御了承を。

使用条件

　なお、このスタイルシートは、自由に御自分のサイト（いわゆるホームページ）へ使用できます。また、スタイルシート切替えJavaScriptを付けたいなら、サンプルからそのまま流用して構いません。必要に応じて、スタイル定義を変更して御使いください。

　御使用に際しては、使用許諾のメールは不要ですが、トップページにある注意事項に一度目を通してください。

戻る