UnBooks:図解・今すぐわかるCSS

概要 [編集 ]

そこでCSSと呼ばれる「かっこいい領域」に骨組みを差し込んでその骨組みに装飾を付け加えることで文字や背景の色、フォント、動いてみたい、左に寄りたい、右に寄りたい、いつも真ん中に立っていたいといった愛情がうまれ、個性あふれるかっこいいホームページが作成されるのである。CSSはプログラミング言語として、HTMLやXMLのタグに対応させて背景色や文字の大きさといったプロパティを指定して表現することができる。

MediaWikiにおけるCSS[編集 ]

以下がこの記事で主に使用されている、かっこいいデザインを生み出すための「かっこいい領域」である。

{{#tag:css|
 .cool { /*枠組み*/
 border: inset 8px #8888AA;
 padding: 8px;
 }
 /*(中略)*/
 .metal{ /*アニメーション*/
 animation : metal 3s ease 0s infinite normal;
 }
 @keyframes metal{ /*輝き*/
 0% {opacity : 1.0;}
 80% {opacity : 1.0;}
 85% {opacity : 0.8;}
 90% {opacity : 0.5;}
 95% {opacity : 0.8;}
 100% {opacity : 1.0;}
 }
 }}<css>
 body, body * {
 background-color: #222244 !important; /*(重要!)背景色*/
 color: #ffffff !important; /*(重要!)文字の色*/
 font-family: serif !important; /*(重要!)明朝体*/
 text-shadow: 1px 1px 2px #ffffff; /*立体文字の形成*/
 text-shadow: 1px 1px 2px #ffffff ,1px 1px 10px #ffffff; /*影文字*/
 }
 a { text-decoration: underline; /*下線*/}
 /*(中略)*/
 </css>

背景色[編集 ]

背景色を紺色にすることによって紳士感を醸し出し、通常の記事よりも目に落ち着きを与えると勝手に予想されている。そのため、この「かっこいい領域」を多く使用することで読者に優しくすることができる。無論それは、目への配慮にもなる。つまり、「かっこいい&他より目に良い領域」である。白文字とのコントラストがちょっと強いかもしれないが気にしないでおこう。

明朝体[編集 ]

枠組み・下線  [編集 ]

立体文字・アニメーション [編集 ]

立体的な文字(文字の影)やアニメーションによる輝きを使用することで、「画面は2次元もしくは静止画でしかない」という固定概念に束縛されてしまっている読者をそれから開放し、想像力を豊かにすることができると勝手に予想されている。そのため、この「かっこいい&他より目に良い&正しい文字の書き方を知ることができる&分かりやすい領域」を多く使用することで、想像力を豊かにすることができ、それとともに、創造力も誘して上げることができる。無論それは、創意工夫のためになる。つまり、「かっこいい&他より目に良い&正しい文字の書き方を知ることができる&分かりやすい&読者の創意工夫を上げて愉快なページを作成できるようになるような領域」である。

その他のCSSを利用したかっこいい表現[編集 ]

CSSを使いこなすことで前述の領域以外にも様々なかっこいい装飾やアニメーションを表現することができる。ただしこのページでは背景色、文字色、フォントが重要(!important)となっているためそれらについては変えようとしても無視される。その他のアニメーションの例については「動詞 (自己言及的)」も参照のこと。

こ ん な 感 じ に 回 転 さ せ た り 、

こんな感じに蛍光ペンでマークアップしたり、

メリット・デメリット[編集 ]

メリット

他のページとは明らかに色彩や見た目、動きなどが異なるので、目を引くことができる。ピンクをふんだんに使って萌え全開にしたり、コマンドプロンプト風にしたり(この記事もコマンドプロンプト風かもしれない)、薄い色にして隠したい情報を隠したり、ゲーミングっぽくカラフルにしたり、色以外にも震わせたり、揺らしたり、カオスにしたりと愉快かつ多種多様な活用ができる。

デメリット

目的もなくただCSSで遊んでいるだけだと単に読みにくいと思われ、他人からどうにかしろという烙印を押される。また、目がチカチカするので、長い時間集中して読むことができなくなる。それによりポリゴンショックのような事件が起きる可能性もある。また、動きの激しいページではPCやスマートフォンが重くなり、機器本体が熱暴走する危険もある。ただし冬ではカイロの代わりになるかもしれない。

アンサイクロペディアでのCSSの使用方法 [編集 ]

アンサイクロペディアでCSSを使用する際、留意すべき点がある。まず、上のデメリットのようにお遊びでCSSを書いていると「かっこ悪い領域 」とみなされ、記事にNRVやICU、昔の記事でもUglyといった削除系テンプレートが貼られる可能性が高い。自己言及的なページなどで項目名に似合ったCSSを設定してかっこよく記事執筆することが大切である。

ただ恐ろしいことにこのページでテンプレートを使用すると殆どのテンプレートが「かっこいい&他より目に良い&正しい文字の書き方を知ることができる&分かりやすい&読者の創意工夫を上げて愉快なページを作成できるようになるような領域」化してしまう。ホワホワ ア〜ン♥♥ 検閲により削除 のように。管理テンプレートでも同様である。

このように普段悪い意味を持つテンプレートでも「かっこいい&他より目に良い&正しい文字の書き方を知ることができる&分かりやすい&読者の創意工夫を上げて愉快なページを作成できるようになるような領域」の手にかかれば全て、まるで見た目が変わるので、管理者に0%の確率で、「削除しなくていいか」と思わせることができる。しかし作者も惑わされることが多い。NRVはNRV、即時削除は即時削除なので最終的には悪い意味を持つ。よってこの「かっこいい&他より目に良い&正しい文字の書き方を知ることができる&分かりやすい&読者の創意工夫を上げて愉快なページを作成できるようになるような領域」に入ることは、ユーモア増幅を充分に行った上にしないといけない。さもなくば、本物のNRVや即時削除が貼られる。

この領域(ページ)のようにね。

関連項目 [編集 ]

外部リンク [編集 ]

• アンサイクロペディア本体 - このページもCSSのおかげで現代風に、オシャレにかっこよく仕上がっている。

• 節スタブ
• UnBooks
• UnGuides
• マークアップ
• 装飾