Cascading Style Sheets解説

top page例示集

参考になるかは分かりませんが、私個人のsiteで今まで作ってきたtop pageの例をいくつか挙げてみたいと思います。単に眺めてみるのもよし、ソースを見てどうやっているか考えてみるのもよし、流用してみるのもよし。お好きなようにしてください。

この中でhtmlファイルとcssファイルが一つずつしかないものがありますが、実際に運用していくにあたっては、site全体に適用するスタイルシートと特定page専用（ここの例ではtop page専用）のスタイルシートに分けて作っておいた方がいいと思います。

以下が例ですが、ちょっとだけ注目してほしいかも、と思うところは「各例示のHTMLソースには、それほど違いはない」という点です。

zashiki.html / zashiki.css: シンプルです。
window.html / window.css: 「ソフトウェアのメニュー画面のようなものを」とかいって作ったような記憶があります。
co.html / co.css / co-top.css / bg.png: カラフルにいきたいと思って作ったものでした。
card.html / card.css / bg.png: 今見るとどうもまとまりが悪いような･･･。
z.html / z.css / z-top.css / z-history.css: 重なっているのをやってみたくて作ったものです。
now.html / now.css / now-top.css / now-history.css: 現在(02/07/23時点)使用中のものです。「ボーダーを上手く使えたらいいなぁ」と思って作ってみました。