www.sekidou.com

Information

スタイルシートとその切り替えについて


スタイルシートとその切り替えについて

このサイトに含まれる頁では,スタイルシートを用いて文字の大きさや行間,配色等の視覚上の効果を制御しています。したがって W3C が勧告する CSS Level 2 に対応しているブラウザであればその視覚上の効果を得ることができます。

このサイトの一部(“サイバー法用語集” や 判決文等)を除くほとんどの頁では,スタイルシートを切り替えて視覚上の効果を変えることができます。ただし,スタイルシートの切り替えには JavaScript を用いており,これを無効にしている場合は切り替えることができず,常に標準のスタイルが適用されます。また切り替えた際にその設定を Cookie に保存しています(これによって,爾後頁を移動しても,また次回このサイトを訪れた際にも選択したスタイルが適用されるようになります。)ので,これを受け容れなければスタイルは切り替えられません。この点をご承知ください。

現在のところ,選択できるスタイルは以下のとおりです。

Netscape 4.x について

Netscape Navigator/Communicator 4.xCSS の対応が不完全(というよりボロボロ)で,これを正しく表示できません。したがってこのサイトにおいては,同ブラウザでは CSS が適用されないようにしてあります。その結果,常に同ブラウザの標準のスタイル(素の状態)で頁が表示されますのでご了承ください。なお,スタイルシートによる視覚上の効果がなくとも文書構造そのものは把握できるはずで,(文書の内容が一部読めない等の)支障はないはずです。

各スタイルシートの見本

標準(デフォルト)のスタイルDefault

標準のスタイル

このサイトの標準のスタイルです。サイト ID,サイト内検索フォームおよび(この)スタイル選択ボックスならびにナビゲーションを頁の最上部に配し,各レベルの見出し(heading)には枠線を付しています。なお,文字サイズはブラウザの設定に依存しています。

拡大文字のスタイルLarge

拡大文字のスタイル

デザインは標準のスタイルを用い,文字だけを標準より拡大したスタイルです。ごく一部の文字を除き,標準スタイルの 130% の大きさで文字が表示されます。ブラウザの設定で文字を小さくしている場合はこのスタイルが適しているでしょう。

縮小文字のスタイルSmall

縮小文字のスタイル

デザインは標準のスタイルを用い,文字だけを標準より縮小したスタイルです。ごく一部の文字を除き,標準スタイルの 80% の大きさで文字が表示されます。ブラウザの設定で文字を大きくしている場合はこのスタイルが適しているでしょう。

黒地白文字のスタイルWhite on Black

黒地白文字のスタイル

標準のスタイルの白黒を反転させたものです。コンピュータでは,環境によっては,白地黒文字の標準スタイルではかえって見づらいという方もいらっしゃるでしょうから,そうした場合にこのスタイルが適しているでしょう。

ピンク色のスタイルPink

ピンク色のスタイル

頁の外周を濃いピンクに(サイト ID やナビゲーションはその外周に置いています。),本文等が表示される内側を薄いピンクにしたものです。彩度の低い無機質な標準スタイルよりカラフルな感じがするでしょう。

緑色のスタイルGreen

緑色のスタイル

上記のピンク色のスタイルと同様,頁の外周を濃い緑に,本文等が表示される内側を薄い緑にしたものです。何となく目に優しい感じがします。

青色のスタイルBlue

青色のスタイル

上記のピンク色および緑色のスタイルと同様,頁の外周を濃い青に,本文等が表示される内側を薄い青にしたものです。ピンクや緑よりもクール(涼しげ)な感じがします。

テキストのみのスタイルText Only

テキストのみのスタイル

画像を表示しない,テキストのみのすっきりとしたスタイルです。各段落の冒頭は字下げせずになおかつその上下に適度なマージンを設けていますから,ディスプレイではこのほうが見やすいかもしれません。また,画像の代わりに当該画像の代替テキスト(alt)が表示されます。なお,画像代替テキストの表示については,MSIE および Opera 6 はこれに対応していません。

黒地白文字のテキスト・スタイルText (W/B)

黒地白文字のテキスト・スタイル

上記テキストのみのスタイルの白黒を反転させたものです。文字色と背景色以外はテキストのみのスタイルとほぼ同じで,段落にマージンを設け,画像ではなくその代替テキストが表示されます。

疑似フレーム・スタイルPseudo Frame

疑似フレーム・スタイル

最上部のサイト ID および画面左と下に配したナビゲーションを固定(スクロールしないように)して,フレームと同様の効果を創り出すスタイルです。ブラウザのウィンドウが広い場合などには,これを用いることによって操作性が向上するでしょう。なお,MSIE はこれに対応しておらずまったく効果がありません。また Opera 6 では表示バランスが崩れます。

印刷用のスタイルPrint

印刷用のスタイル

頁を印刷(プリント・アウト)する際に適したスタイルです。フォントを明朝体(セリフ体)の 10ポイント(標準サイズ)に設定してあります。他方サイト ID,ナビゲーションやリンクの下線など,閲覧には便利であっても印刷時に特に必要のない要素は表示されません。また実際の印刷時には,スタイル切り替えの選択ボックスも表示されません。

口述用のスタイルAural) 2003年 9月 15日 追加

口述用のスタイル

音声により頁の内容を読み上げる UA のためのスタイルで,視覚上これを模したものです。画像を排してテキストのみとし,さらに各部分の役割等いくつかの補足情報を盛り込んであります。なお,補足情報はいずれも content プロパティによって生成していますので,これに対応していない MSIE ではまったく効果がありません

※上記のうち“Print”(印刷用のスタイル)は,通常は特にこれを指定しなくとも印刷時に自動的に適用されます。しかし一部のブラウザ ――Netscape 6 以降等の Gecko エンジンを用いたブラウザ(当方は Phoenix で確認)―― では,通常の印刷操作ではこれが適用されないようです。その場合,手動でこのスタイルを選択するといいでしょう。

※また“Aural”(口述用のスタイル)も,メディア・タイプ“aural”に対応しているユーザ・エージェント(UA)であれば,特にこれを指定しなくとも自動的に適用され,読み上げられます。しかしながら(2003年 9月)現在わが国の UA でこれに対応しているものはないようで,機能において“読み上げ”を謳うものも単に画面上の表示を音声化するいわゆる“スクリーン・リーダー(screen reader)”というものであるようです。そのような“スクリーン・リーダー”にあっては,このスタイルを選択してその表示を読み上げさせるといいでしょう。なお上記説明でも触れたように,MSIE(およびそのエンジンを流用する UA を含む。)ではまったく意味をなしませんので,CSS(せめて content プロパティ)にきちんと対応している他の UA の使用を強く推奨いたします。





2,508,180

http://www.sekidou.com/
制作者に連絡する