サイト用スタイルシート

Headline

• 制作者CSS選択フォーム
• userstyles.orgにあるスタイル
• レンダリングテストセクション

制作者CSS選択フォーム

JavaScriptとCookieを有効にすると、サイトで用意しているCSSファイルのうち、どれを使用するかを選択・記憶できます。

slime(normal)スタイル

ドラクエといえば、スライム。背景画像にスライムがたくさんのスタイル。青色を基調にしています。ドクターマリオのゲームの画面みたいなポップな感じを目指したのですが……。ページの分量が少ないと、ちょっと残念な見た目になるのが欠点。

slime(imageless)スタイル

slime(normal)スタイルからインポートして使っている、背景画像以外の指定が記述されているスタイル。あまり単独で使うことを意識していないので、マージンの取り方などに違和感があります。いちおう軽く調整はしてありますが。気が向いたら作りこみたいところです。

スタイルシートを使用しない

後述のuserstyles.orgにあるスタイルは、これを選ぶのを前提にしています。手抜きです。

userstyles.orgにあるスタイル

もしあなたがStylish for Firefox、for Google Chrome、for Operaのいずれかを使っているのであれば、以下のスタイルを使用することができます。Internet Explorerを使っているのであれば、IE7Proをインストールすると、以下のスタイルをユーザスクリプトとして使うことができます。

なお、上のフォームで「スタイルシートを使用しない」を選択してください。

RP2nd field style

ファミコンのドラクエのフィールド風の見た目になります。このスタイルを作った当時は、HR要素の使い方がイケてると思ったのですが……。

2013年、手を加えて角丸になりました。CSS3で頑張れば、フィールドの中をドット絵のキャラが歩くとかもできるのかな？

RP2nd vague style

vagueというのは、曖昧なという意味です。コンプレックス・ハーモニーと言われる、黄色付近の色相の色を暗めに、青紫付近の色相の色を明るめに、という色使いを意識して作ったスタイル。使いたい色と逆行しがちなので、苦労しました。

2013年、手を加えて色が若干変わりました。画像を使って角丸にしていたのも、border-radiusを使うようにしたので、割とトリッキーな記述だったのがシンプルな記述になり、他のプロパティを自由に使えるようになったので、色々付け足してます。

レンダリングテストセクション

普段のマーク付けがわりと恣意的なので、いざ網羅しようとしたら難しいと思いました。網羅してません。それでもなお、CSSの作りの甘さが露呈します。

これはPRE。ページの大まかな構造。
BODY┬DIV#header┬P-OBJECT#logo
    │          └P-OBJECT#ad
    ├HR[title="はじまり"]
    ├DIV#chapter┬H1
    │           ├DIV.section-H2
    │           │   #headline
    │	         └DIV.section-H2
    ├HR[title="おしまい"]
    └DIV#footer┬P#breadcrumbs
                └ADDRESS