ブログ

今日から導入できるCSS3。

ようやく、CSS3に関する書籍が出版されはじめたりしています。
「CSS3」というものが日の目を浴びるようになりつつあるかなというのが実感です。

そこで「目立たないように」当サイトで使っているCSS3のことについて少し書いてみようと思います。

トランザクションをさりげなく

このサイトのサイドバーは普通のページ内リンクやテキストリンクを設置しています。
リンクなのでマウスオーバーすると色が変わるのですが、CSSの「background-color」をマウスオーバーするときにちょっとアニメーションしています。

マウスオーバーするところにアニメーションを入れているので、少しふわっとした感じで背景色が変わるかと思います。

もちろん、親に捨てられたIEさんや、古いキツネさんとか、対応していないブラウザでは、無害で何もおこりません。

CSS3のアニメーションは、使う方法に困るかもしれませんが、マウスオーバーなどで背景色を変える時に使うと、少しはユーザー体験をリッチにできるのかなともいます。
だって、マウスオーバーで背景色が変わったり、背景画像が変わったりするときに無機質な感じがするからイヤなので。

角丸とドロップシャドウで画像をステキに

このサイトのブログ記事に使用している画像は、SafariとかChrome、Firefox4などでは、角丸+ドロップシャドウをつくようにしています。

<figure>要素の中に<img>要素を入れて、<figure>要素でスタイルを指定しています。

<figure>要素にborderプロバティ・paddingプロバティを指定しています。
paddingプロバティを大きめに取ることでAppleのサイトのような雰囲気にしています。

<figure>要素にbox-shadowプロバティを指定することで、目立たないくらいにわずかなドロップシャドウが表現されるようにしています。

<figure>要素・<img>要素・<figcaption>要素にborder-radiusプロバティを指定して角丸にしています。
ちなみに、<img>要素・<figcaption>要素にborder-radiusプロバティは、<figure>要素に指定している値より1px少なく指定しています。

<img>要素・<figcaption>要素にborder-radiusプロバティを指定しないと、枠だけ角丸、という状態になります。忘れずに設定しましょう。

ちなみに、(X)HTMLやHTML4で書いている人は、<figure>要素を<div>要素にすることでだいたい同じような感じにできると思います。

もちろん、親に捨てられたIEさんや、古いキツネさんとか、対応していないブラウザでは、角丸じゃないとかドロップシャドウがないとかありますが、サイトの情報伝達には何の支障も出ていません。

将来は写真を角丸にしたいけどお客様で加工することができない、という場合にも画像サイズだけを変えることで、そこそこいい画像になります。プロの作った写真には及びませんが。

透明度を変えて少しリッチに

このサイトのブログ記事に使用している画像には、一応[謎]キャプションを入れています。

キャプションは普段は隠しておいて、画像にマウスオーバーしたときに表示されるようにしています。

ちなみに、絶対配置で画像の下部に表示されるようにしています。

figcaption通常は透明度0にしておき、マウスオーバーしたときに透明度を1にして表示される用にしています。
トランザクションをopacityに指定しておくことでじわじわと表示されるようにしています。

opacityプロバティに対応していないブラウザのためにleftプロバティで位置を変更するようにしています。

あとは、figure要素に「zoom:1;」を指定しておくことで、IE6/7でもbottom/right指定での絶対配置が正しく機能するようにします。

親に捨てられたIEさんや、古いキツネさんとか、対応していないブラウザでは、角丸じゃないとかアニメーションっぽく表示されないとかありますが、サイトの情報伝達には何の支障も出ていません。

むしろマウスオーバーがないので、iOSとかでキャプションが表示されない問題がありますが。

まとめ

CSS3というと、一見すると難しい気がしますが、ちょっとしたところで使えるものもありますのでちょっとしたところで導入してみたらどうでしょうか。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。