« 前の日記次の日記 »

日記の本文

2004年04月19日

画像をCSSで写真風に

白い枠の付いた写真なんてしばらく見てない気がしますが、少なくとも私には白い枠があると写真らしく見えるのです(断言)。というわけで本文中の画像(img要素)に対して、CSSで写真風の枠を付けてみました。

このテクニック、どこかで見た気がするんですが忘れました(^^; ただ、同じMovableTypeのブロガーさんのサイトで公開されていたものだったと思いますです。スタイルの設定の仕方は以下の通り。

.blogbody img {
border-top: solid 1px silver;
border-left: solid 1px silver;
border-bottom: solid 1px gray;
border-right: solid 1px gray;
background-color: white;
padding: 6px;
}

これを見てもらうと分かるとおり、本文中の画像全てに写真風の枠が付くので要注意です。というか、めんどくさがらすにimg要素にclass名を指定して、そのclass名に対してスタイルを適用すべきですね(^^;

でもホント、最近枠の付いた写真って見てないけど、こういうプリントの仕方って今はもうないのかな?だとしたら私よりも下の世代には、こんなことしても写真っぽく見えないかもしれないというわけだ。トシくったなあ…(^^;

それからこのスタイル、「DOCTYPEスイッチ」の書き方によってパディングが無効になる場合があります。具体的には、『仕様どおりに厳しく解釈するモード (Standards mode) 』にしないと、パディングが有効になりません。これも注意が必要です。

2004年04月19日 20:06|SAITO, Kazuo

« 前の日記HOME次の日記 »

この日記へのツッコミ

What kind of stuff are you talking about? I didn’t get a word of it! I’ve never understood people, who spend their time on commenting stuff like that.

From:rick (2008年04月03日 18:56)

I’m in a difficult situation. Confused. Why would anyone write this kind of material? What’s the point?

From:James Newton (2008年04月04日 21:38)

I’m in a difficult situation. Confused. Why would anyone write this kind of material? What’s the point?

From:James Newton (2008年04月04日 21:40)

ツッコミはお気軽に

名前とアドレスをクッキーに記憶させますか? 

トラックバックもお気軽に

このページのトラックバック用URL

http://saito-kazuo.pupu.jp/cgi-local/mt/mt-tb.cgi/223

この日記へのトラックバック一覧