2007年02月24日

画像に影・段落区切り

レンダリングのリファレンスKonqueror

 ひさしぶりにCSSを3ヵ所いじってみました。

 まずは一番やりたかったのが画像にドロップシャドウを落とすこと。検索するといろいろ出てはくるんですが、画像タグを影タグで囲む方法ばっかりで、余計なデザイン用タグを付けるのはやりたくなかったので独自の方法を作ってみました。

.text img{
 float: right;
 padding: 0px 8px 8px 0px;
 border: none;
 background: url(http://michitomo.up.seesaa.net/image/shadow01.png)
             no-repeat bottom right;
}

 Seesaaでは記事本文はtextという要素で囲まれているので、これで記事内のみ、なにもしなくても画像に影が落ちます。ソースもキレイなままで手間入らず。問題はIE6の場合HTML1行目に

<?xml version="1.0" encoding="Shift_JIS"?>

 があるとうまく表示できなくなるバグがあるそうなので、DOCTYPE宣言を先頭に持ってきましょう。という話らしいです。Opera9・Firefox・KHTML(Konqueror/Safari)あたりではそのままでちゃんと表示できました。WX310SAのNetFront3.3だけは残念ながら影が付かないみたい。
 そこそこ需要はありそうなので、もし真似したい場合はCSSのソースにかかれている背景画像もご自由に持っていってください。と。
 320x320ぴったりの画像でないと背景が切れてしまうのは微妙に美しくないですね。解決方法が分かる方がいましたら教えてくださいです。

 2つ目は段落の区切りで、これはいままでもいちおう「記事上でクリックすると1段落だけ背景色が変わる」というような感じにはしてました。ところがIEだとクリックしても無反応だったり素だと読みづらかったりしたので、段落ごとに横線を入れてみました。

 最後は日付と記事のタイトルをくっつけただけ。ちょっとスッキリな感じになったような気もする。

 そんなところです。画像はKonqueror3.5.5でレンダリングしたリファレンス。クリックして拡大するとわかりますが、レアなブラウザでは文字に影が付くようになってます。いちおうケータイだろうとIEだろうとなんでも表示できるはず。でも残念ながらケータイからのアクセスは問答無用でケータイ用ページに飛ばされるみたい。

 少年ジャンプの休刊をきいて、こち亀のギネス記録がストップしちゃうじゃないかとか思ったんですが、休刊になるのは月刊誌の方で週刊誌の方は継続なんですね。なるほど。NHK教育でやってた岩倉鉄道高校の番組がけっこう面白かった。

Michitomo - 2007年02月24日 1時32分 | コメント0匹 | トラックバック0羽 | 日記
この記事は | | | |
この記事へのコメント
コメントを書く
お名前:

コメント:


この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。