CSS展示室

純正スタイル
互換スタイル
他サイトスタイル

　CSS を例示します。サンプルの HTML 文書は、スタイルシートの指定部分を除き、すべて同一です。CSS を切り替えるだけで、中身を一切いじらずに、見栄えを大きく変えることができるのです。

純正スタイル

　最初から Stardust Crown に適用するつもりで作成した CSS を紹介します。

共通スタイルシート

　Stardust Crown ではセクションごとの差異はなく、サイト内のほとんど全ページで同一のスタイルシートが適用されます。ゲームと読み物とで分けるべきかとも思ったりもしたのですが、まあ、いいでしょう。

一括

一括: CSS 切り替え機能付きブラウザ向け（IE6.0以前を含みません）; これまでのスタイルシートを代替スタイルシートで一括して列挙しています。（それぞれの解説は以下を参照してください。）

レギュラー

　適用しているスタイルシートで、常に、黒地白文字系／白地黒文字系を切り替えることができるようにしています。

白夜仕様: rel="stylesheet" media="screen,tv,projection"; 和風暗色系として当初の開発ネームを“漆塗り (lacquer)”と名付けて制作しはじめました。しかし花鳥風月の鳥が気に入って使い回しを決定したあたりから路線が変わり、決定打は２７日に積もった雪です。ということでこうなりました。
花鳥風月仕様: rel="alternative stylesheet" media="screen,tv,projection"; 赤を主体に画像をたくさん使ったもの。ダークゴールド仕様の明色版を指向していたのですが、花鳥風月を意識しているうちにけっこう雰囲気は変わったと思います。けっこう好きでした。
印刷仕様: rel="stylesheet", media="print"; 白黒のみを使用し、印刷に適したものにしようというもの。５０％グレーを一ヶ所だけ使っています。余白はプリンタ側で設定してもらうことを想定して、上下左右のマージンがほとんどありません。また、リンク・リンク用バナー・ナビゲーションの類を潰していることも特徴です。

廃止

　昔に使っていたもの。

ダークゴールド仕様: body 直下の div に依存しないはじめのバージョン。暗色系スタイルで、黄金と紺色が主体です。“漆黒の磁器”をテーマに画像を多用し、重厚で荘厳な雰囲気を目指しました。やや画像が煩いという説あり。
ライトゴールド仕様: 明色系スタイルで、黄金とそれを鈍くした茶色が主体です。補色である青と絡ませてカラーリングしました。落ち着いていて格調高い雰囲気にしようと苦心しましたがどうでしょうね。はじめて見出しに背景画像を使用しました。トップページ用もあります。
シルバー仕様: 印刷仕様がちょっと気に入っていた時期に、アレンジしてディスプレイ用に仕立てたもの。さらにゴールド仕様のベースにもなりました。白黒のみでソフトな透明感を指向したつもり。アクセント不足の印象もあるかもしれません。
ブラック仕様: 暗色系スタイルで、以前、メインとして使っていたものです。背景の左右に画像を配置するために、禁断（※）の body 直下全 div を使ってしまいました。できる限り、スタイル用の div span は使いたくないポリシー（単に楽をしたいだけですけど）なので、ちょっと妥協です。（というわりに以降のスタイルシートでもばりばりに利用していますけれどね。）

※例えば div class="sectionX" のように、階層化を目的として統一的に配置された div ではないということです。

ホームスタイルシート

　Stardust Crown ではホーム（トップページ）のみ、特別なソース（ただしその他の部分と互換性あり）およびスタイルシートを適用しています。

レギュラー

白夜仕様・ホーム専用: rel="stylesheet" media="screen,tv,projection"; 白夜仕様のトップページ版です。花鳥風月仕様からの改造です。
花鳥風月仕様・ホーム専用: rel="alternative stylesheet" media="screen,tv,projection"; 花鳥風月仕様のトップページ版です。ダークゴールド仕様からの改造ですが、だいぶシンプルにしました。はじめてマウンス君が出てきません。

廃止

ダークゴールド仕様・ホーム専用: ダークゴールド仕様のトップページ版です。ライトゴールド仕様からの改造です。IE 以外では中心位置がずれるかもしれません。
ライトゴールド仕様・ホーム専用: ブラック仕様を改造して、フォントサイズ等も可変にしたものです。800×600 で小さいサイドバーを表示しても、使えないことはありません。ただし Opera6.0 では激しく崩れます。
ブラック仕様・ホーム専用: スクロールゼロのフルスクリーンになるように、position を濫用して築きあげたスタイルシート。解像度の変化にもそれなりに柔軟で、800×600 フル以上ならば、それほど崩れません。

互換スタイル

　Stardust Crown への適用を目的とせずに作成されたスタイルです。（一部、適用のために調整をしました。）

東大文芸部仕様: 調整済; 所属サークル（東大文芸部）のサイト用の CSS を当サイトに適用できるよう修正したもの。一説によると最も読みやすい配色である“灰地黒文字”を基本に、シンプル性を重視しました。（向こうは広告用ソースが挿入されて崩れる場合があるので……。）まったく画像を使わないので簡単に移植できます。
ブラウザデフォルト仕様: スタイルシートを解除した場合のサンプルです。

他サイトスタイル

「言葉言葉言葉」スタイルシートギャラリー @ PC Tips: 管理人：野嵜健秀さん; ご自身の CSS を公開している他、Cascading Style Sheets關係の試み色々/*.css配布/*.css公開として、様々なサイトのスタイルシートギャラリー的ページをまとめています。
カスいけサイト私撰集: CSS デザインを採用した多様なサイトのリンク集です。（本サイトのコンテンツの一部です。）

著作・制作／永施誠
e-mail; webmaster@stardustcrown.com

ページ先頭