スタイルシートスタイルブック

スタイルシートスタイルブックは，確か昨年の春頃に買って，ちらちらと見ただけでしばらく積ん読状態だった本です。iBlogで作るサイトのデザインをなんとかしようと思い，スタイルシートの勉強をしなくちゃということで手始めに購入しました。

このところ，テンプレートやナビゲーションエディタはちょくちょく手直ししていますが，スタイルシート(CSS)については，去年の２月以降まったく手を付けておりません。いろんなサイトを見ているうちに，もう少しきれいなデザインにしたいなあと思うようになり，ひさしぶりに開いてみました。

スタイルシートについては何年か前から知ってはいましたが，実際に使った事はありませんでした。

スタイルシートについて再認識させられたのは，一昨年の10月から使い始めたiBlogのおかげです。

iBlogのテンプレートで作られるHTMLはとてもシンプルなもので，細かいデザインはほとんどスタイルシートで指定しています。

iBlogを使い始めた当初はデフォルトのスタイルシートから選択しているだけでしたが，他の方のBlogを参考にさせていただきながら，部分的にカスタマイズを試みてきました。
といっても，せいぜいリンク文字列のスタイルを変更する程度でした。

さて，最近すごくカッコいいなあと思うのは，AppleのiTunes Music Store のサイトです。
その中でも，ページの右側に表示されている，Key Features，iTunes Gift Certificatesといったブロックのデザインが気に入っているので，これをなんとか自分のBlogのサイドバーに応用できないかなあ，と思っています。

そこで，Adobe GoLiveで上記ページを読み込んでみたところ，HTMLはとってもシンプル。

＜div class="roundbox"＞
   ＜div class="roundboxhead"＞ ＜h2＞Key Features ＜/h2＞ ＜/div＞
     ＜div class="roundboxbody"＞

"roundbox"，"roundhead"，"roundboxbody"という３つのclassを指定しているだけです。

itunes.cssというスタイルシートを見てみると，classごとに個別の画像をバックグラウンドに指定しています。また， "roundboxhead h2"というclassもあって，上のHTMLの＜H2＞＜/H2＞で囲まれた部分はまた別の画像が指定されていました。

なるほど，という感じで，これならタイトル文字の左側には左上が丸くなった画像を，タイトル文字の部分には右上が丸くなった画像を配置できるわけですね。

私に理解できたのはこの程度で，その他の細かい内容にはまだまだ理解が及びません。
itunes.cssをパクればなんとか使えそうな気もしますが，自分でよくわかっていないものを自分のサイトに取り込むというのはどうにも居心地が悪くていけません。

というわけで，しばらくぶりにスタイルシートをちょっと勉強してみて，クールなサイトデザインが作れるようになりたいなあと思っています。

※元のブログについたコメントを掲載させていただきます。

こんにちは。
J' sGarage さんのエントリはいつも勉強になります。この機会に私もスタイルシートについて再勉強中です。
shotam | Homepage | 01.23.05 - 6:32 pm | #

あんまり参考になるような書き方してませんでしたね。具体的にCSSのどこをどう直したのか，あとで追記したいと思います。
J's Garage | Homepage | 01.23.05 - 6:39 pm | #