ECサイトオーナーTY(てぃーわい)です。2005年にECサイトを立ち上げ、制作から運営システムまで全てを自分で作ってきた経験を元に、2012年からはサイト制作、ECコンサルティング、書籍執筆、テキスト制作などをしています。受注メールアクセス解析iPadFreeNASパスタレシピ執筆adsense海外記事翻訳DreamWeaverEC経営チュートリアルFireworksHTML/CSSWEB製作3Jul2012CSS3でデザインされたボックスを作ってみよう2012年になってから、一部の先進的な(WEB業界の)サイトでCSS3を使用したサイトデザインを見かけるようになりました。メジャーブラウザ(IE8,9,FireFox,Chrome,Opera,Safari)もIE8以外は全てCSS3に対応していますので、そろそろ実用的なレベルになってきたと言えるでしょう。CSS3を利用すると、コーディングの手間が省けるだけではなく、今まで実現できなかったデザインも実装することができます。当ブログでは、各記事タイトルの文字にシャドウをかけています。(※執筆時点で)これはCSS3ならではのデザインです。非対応ブラウザではシャドウがかからないだけで特に重大なレイアウト崩れが起こるわけではありません。仕事でWEB製作を請け負う際は、クライアントにこのような説明をして理解をして頂く事が、インターネットの進化の為にも大切だと思います。言え「どんなブラウザでも全く同じ表示をさせてくれ」というケースが非常に多いですので、まだまだCSS3を取りいれたWEB製作が浸透するには(特に国内では)時間がかかりそうです^^;今回はCSS3でデザインボックスを作る方法です。非対応ブラウザでは一部表示されませんが、それと引き換えにモダンブラウザでは高度なデザインを実装できます。CSS3を使う際は、非対応ブラウザでもレイアウト崩れを起こさないように少し気をつけるのがポイントです。※本記事では画像を使用したボックスをデザインボックスと呼んでいます。CSS3でしか作れないボックスデザイン今まで(CSS2)はボックスを角丸にしたりイラストを使用する時に、画像(imgタグ)で上下を挟む方法が主流でした。この方法だと、テキストは中段のdivエリアにしか入れられなく、また上下リピートの画像しか使用することができません。上下の画像部分にテキストを入れられないので、必然的に上下画像の高さが低くなり、デザインの自由度が下がってしまいます。指定することができます。実際にCSS3でコーポレートサイトのサイドメニューデモを作ってみたのがこちらです。Product・Service背景画像を複数指定するのは先述の通りですが、それだけではいくつかの問題が起きますので少し対策をしています。CSS3を使ったハイブリッドなコーディング現在の段階で国内で一番のメジャーブラウザであるIE8はCSS3非対応です。それを考慮すると、CSS3を使用する場合は非対応ブラウザでレイアウトが崩れないようにする必要があります。・非対応ブラウザ用のCSSを用意する・CSS3部分が無視されても不自然じゃないデザインにするという方法が考えられます。前者はCSSの解釈が異なる古いIEとモダンブラウザでデザインを統一させる時に使うテクニックですが、手間が少しかかるのが難点です。CSSを変更した所で、非対応ブラウザでは表示されない部分が残ります。今回はカジュアルにCSS3を使ってみるのが目的ですので、手間は最小限に抑える為にも後者の方法を取ります。今回のボックスで使用したCSS3のプロパティは「複数背景の指定」ですので、こちらが非対応でも不自然にならないように対策を行います。CSS3の背景指定の書き方は以下になります。background:背景1,背景2,背景3;背景1が一番上に、背景2がその下に・・・という順序のレイヤーになります。このように複数指定している場合はIE8では背景1のみが表示されそうですが、恐ろしい事にこのプロパティ自体が無視されます。複数背景を指定した場合、IE8では背景は全く表示されません。CSS3対応でも透明化画像ではレイアウトが崩れる問題レイヤーの仕組みを理解した上で、ボックスを作る為の最もシンプルなコードは以下になります。background:上部画像,下部画像,中段画像を上下リピートこれは間違えていませんが、上下の画像を透明化している場合は一番下レイヤーのリピート画像が見えてしまいます。内側のdivに中段の上下リピート画像を指定するCSSを上記のようにします。IE8で見た場合は上下画像は無視され、中段のリピート背景はきちんと表示されます。背景を透明化した場合も、リピート画像は内側のdivのみですのでレイアウトが崩れません。ポイントを踏まえてデモを見てみよう使用した画像はこちらの4種類。-200px;}【あとがき】CSS3はまだまだ勉強中ですので、他にも合理的な方法があればどんどん記事を書いていきます。今回のような複数背景プロパティは非対応ブラウザの場合のデザインの違いが顕著なので使いドコロが非常にシビアになりますが、シャドウ系やボーダー系のプロパティは、無視されてもそこまでデザインを損ないませんのでどんどん使って体で覚えるのが良いと思っています。