« 山本周五郎「おたふく物語 楽天旅日記」新潮社 山本周五郎全集第三巻 | トップページ | Eric.A.Meyer「CSS完全ガイド第2版 CSS2&CSS2.1対応」オライリージャパン 株式会社クイープ訳 »

2010年11月13日 (土)

今更CSSを勉強中

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

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

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

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

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

 つまり、「なるべく余計な空白を減らす」方針で見直している。所詮は 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。

Sc

|

« 山本周五郎「おたふく物語 楽天旅日記」新潮社 山本周五郎全集第三巻 | トップページ | Eric.A.Meyer「CSS完全ガイド第2版 CSS2&CSS2.1対応」オライリージャパン 株式会社クイープ訳 »

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

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/201750/50019633

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

« 山本周五郎「おたふく物語 楽天旅日記」新潮社 山本周五郎全集第三巻 | トップページ | Eric.A.Meyer「CSS完全ガイド第2版 CSS2&CSS2.1対応」オライリージャパン 株式会社クイープ訳 »