2011年07月19日

Hello, CSS

こうしてできたページを見てみると、微妙にweb0.9感が漂い、web1.0には何かが足りないことに気づきます。いったい何が不足しているのでしょう?

そうだ、web1.0時代はフォントの色やサイズを変えて遊ぶのが流行っていたのでした。黒背景に白文字・センタリング・フォントサイズ+4。早速これを実装してみましょう。

Opaでは、cssなどのファイルも、できるだけ実行ファイルに含めるような設計になっています。これは、scpなどで1ファイルだけコピーすれば設置が終わるようにという配慮です。細かいことですが、大量のサーバーに配置する際も設置に失敗して404ということが無くなりますし、テストサーバーから本番系に移設する際にも移行途中でのミスは起きません。代わりに、設置時にcssを書き上げておかねばならず、変更に伴い再コンパイルが必要になります。もちろん、開発中のことも考え、cssをon-the-flyで記述したり、ディスクから読むようにしたり、といったことも可能になっています。

server = 
Server.one_page_bundle("Hello",
[@static_resource_directory("resources")],
["resources/css.css"], hello)


/*
resources/css.css
*/
body {
background-color: #000000;
color: #FFFFFF;
}

p {
text-align: center;
font-size: 32pt;
}


無事にソウルフルなページになりましたでしょうか? これで<marquee>タグあたりを付けるとさらにweb1.0っぽくなりますが、悪ノリはとりあえずこの程度にとどめておきます。

#ところで上のCSSを適用すると、Opera11.50でタブ全体ではなく文章の部分だけが黒背景になるのですが、この原因をご存じの方はいらっしゃいませんでしょうか……?

(次回に続く)
posted by chun at 00:48| OPA