今更CSSを勉強中: ちくわぶ

2010年11月13日 (土)

今更CSSを勉強中

　今更ながら CSS(Cascading Style Sheets) を勉強しようと思って O'Reilly の「CSS完全ガイド第２版」を借りてきた。この世界は変化が激しいので、なるべく新しい本がいいんだが、コレは2005年６月の本。ブラウザの対応状況などは流石にチト情報が古びてるけど、まあしょうがないか。こういう実用的な本のレビューは書くのは、結構きびしいモンがあって、ちと腰が引ける。というのも。

　レビューの読者の多くは、やはり CSS を勉強したい人だろう。だから、レビューの読者は、「この本を読んで、何が出来るようになるのか？」をレビューに求めるはず。そこで「○○が理解できます」なんて書かれても、あまり説得力がないんだよね。こういうのは、「○○が出来るようになります」と書かないといけない。

　で、レビューを書く人は、実際に読んだ人なわけで、なら、そのレビューしてる人のサイトのデザインを見れば、この本の効果がわかってしまうのですね。下手に絶賛しようものなら、「じゃ、なんでお前のブログはこんなにヒドいデザインなの？」と突っ込まれて、哀れ自爆という惨めな結果に相成る。

　という事で、少しデザインを弄ってみた。弄る前のデザインが判らなければ比べようがないんで、末尾に以前のデザインのスクリーン･ショットを貼っておく。とても細かい変更なんで、よほど注意力が優れてないと、違いが判らないと思う。変えたのは以下の４点。

大見出し「ちくわぶ」を短くして、その分、右袖を上に持ち上げる。
小見出し「今日も図書館通い」をつける。場所は大見出しと同じ行で右揃え。
頁の見出しを日付と同じ行に置く。
大見出しの後の空白を少し減らす。

　つまり、「なるべく余計な空白を減らす」方針で見直している。所詮は CSS も道具なんで、使う者のセンスが悪けりゃ、ロクなモンが出来ないのも仕方がない。以下にカスタム CSS を晒すので、せいぜい笑ってください。
注意：この CSS は、真似をしない方が無難です。margin に負の値を指定すると、好ましくない影響が出る可能性があります。詳細はこちらをどうぞ。→五里霧中で実験中

/* これは昔から。大見出しの背景画像。 */

#banner h1 {
  background-image: url("http://chikuwablog.cocolog-nifty.com/blog/image/back_a00.gif")
}
/* 右袖を上に持ち上げる */

#right { margin-top: -55px; }
/* 小見出し「今日も図書館通い」を右揃え */

#banner h2 {
  text-align: right; position: absolute; top: 20px; right: 210px; bottom: auto; left: auto;

}
/* 頁の見出しを日付と同じ行に */

.entry h3 { padding-left: 10em; margin-top: -2.6em; }
/* 大見出しの後の空白を少し減らす */

#center { margin-top: -8px; }

.content { padding-top: 2px; }

　以前のデザインのスクリーン･ショット。ブラウザは Firefox3.6.12。

2010年11月13日 (土) 23時22分パソコン・インターネット | 固定リンク

「パソコン・インターネット」カテゴリの記事

コメントを書く

トラックバック

この記事へのトラックバック一覧です：今更CSSを勉強中:

ちくわぶ

SF/歴史/科学/軍事の本の感想と、たまにiTunes/iPod

2010年11月13日 (土)