【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

3Jul2012

CSS3でデザインされたボックスを作ってみよう

2012年になってから、一部の先進的な(WEB業界の)サイトでCSS3を使用したサイトデザインを見かけるようになりました。

メジャーブラウザ(IE8,9,FireFox,Chrome,Opera,Safari)もIE8以外は全てCSS3に対応していますので、そろそろ実用的なレベルになってきたと言えるでしょう。
CSS3を利用すると、コーディングの手間が省けるだけではなく、今まで実現できなかったデザインも実装することができます。

例えば当ブログでは、各記事タイトルの文字にシャドウをかけています。(※執筆時点で)
これはCSS3ならではのデザインです。

非対応ブラウザではシャドウがかからないだけで特に重大なレイアウト崩れが起こるわけではありません。

モダンブラウザ=よりきれいなデザイン
IE8以下=一部デザインが非表示

仕事でWEB製作を請け負う際は、クライアントにこのような説明をして理解をして頂く事が、インターネットの進化の為にも大切だと思います。

とは言え「どんなブラウザでも全く同じ表示をさせてくれ」というケースが非常に多いですので、まだまだCSS3を取りいれたWEB製作が浸透するには(特に国内では)時間がかかりそうです^^;

今回はCSS3でデザインボックスを作る方法です。
非対応ブラウザでは一部表示されませんが、それと引き換えにモダンブラウザでは高度なデザインを実装できます。

CSS3を使う際は、非対応ブラウザでもレイアウト崩れを起こさないように少し気をつけるのがポイントです。

※本記事では画像を使用したボックスをデザインボックスと呼んでいます。
※当然ですが、CSS3非対応ブラウザで閲覧すると意味不明の記事になります^^;

1. CSS3でしか作れないボックスデザイン

今まで(CSS2)はボックスを角丸にしたりイラストを使用する時に、画像(imgタグ)で上下を挟む方法が主流でした。

CSS2では画像で上下を挟む方法が使われます

この方法だと、テキストは中段のdivエリアにしか入れられなく、また上下リピートの画像しか使用することができません。

上下の画像部分にテキストを入れられないので、必然的に上下画像の高さが低くなり、デザインの自由度が下がってしまいます。

CSS3では背景画像を複数指定できますので、この方法を使い”Divボックスの背景画像”として上画像、下画像、中画像を指定することができます。

CSS3では背景画像を複数使用できます

実際にCSS3でコーポレートサイトのサイドメニューデモを作ってみたのがこちらです。

背景画像を複数指定するのは先述の通りですが、それだけではいくつかの問題が起きますので少し対策をしています。

実際のソースコードは最後に公開しますので、慌てずに^^;

※ボタン部分の作り方はこちらの記事を参考にしてください
メニューボタンを作りなおしてサイト高速化[CSS sprite]

2. CSS3を使ったハイブリッドなコーディング

現在の段階で国内で一番のメジャーブラウザであるIE8はCSS3非対応です。

それを考慮すると、CSS3を使用する場合は非対応ブラウザでレイアウトが崩れないようにする必要があります。

具体的には、

・非対応ブラウザ用のCSSを用意する
・CSS3部分が無視されても不自然じゃないデザインにする

という方法が考えられます。

前者はCSSの解釈が異なる古いIEとモダンブラウザでデザインを統一させる時に使うテクニックですが、手間が少しかかるのが難点です。
またCSSを変更した所で、非対応ブラウザでは表示されない部分が残ります。

今回はカジュアルにCSS3を使ってみるのが目的ですので、手間は最小限に抑える為にも後者の方法を取ります。

2.1. 非対応ブラウザでは複数背景が指定できない問題

今回のボックスで使用したCSS3のプロパティは「複数背景の指定」ですので、こちらが非対応でも不自然にならないように対策を行います。

CSS3の背景指定の書き方は以下になります。

background:背景1,背景2,背景3;

背景1が一番上に、背景2がその下に・・・という順序のレイヤーになります。

このように複数指定している場合はIE8では背景1のみが表示されそうですが、恐ろしい事にこのプロパティ自体が無視されます。
つまり複数背景を指定した場合、IE8では背景は全く表示されません。

2.2. CSS3対応でも透明化画像ではレイアウトが崩れる問題

レイヤーの仕組みを理解した上で、ボックスを作る為の最もシンプルなコードは以下になります。

background:上部画像,下部画像,中段画像を上下リピート

これは間違えていませんが、上下の画像を透明化している場合は一番下レイヤーのリピート画像が見えてしまいます。

透明化画像を使う際は、リピート画像の扱いに注意

2.3. 対策としてdivを2重にします

divを入れ子にして

1, 外側のdivに上部画像、下部画像を指定する
2, 内側のdivに中段の上下リピート画像を指定する

CSSを上記のようにします。

IE8で見た場合は上下画像は無視され、中段のリピート背景はきちんと表示されます。

背景を透明化した場合も、リピート画像は内側のdivのみですのでレイアウトが崩れません。

3. ポイントを踏まえてデモを見てみよう

使用した画像はこちらの4種類。

上部画像
上部画像 - CSS3で作るボックス

リピート背景
リピート背景画像 - CSS3で作るボックス

下部画像
下部画像 - CSS3で作るボックス

ボタン部分
ボタン部分 - CSS3で作るボックス

  
#sidebar { /* 外側のdivに上下の背景画像を適用します */
	width:266px;
	background:url(http://tanaka-yusuke.com/wp-content/uploads/2012/07/sidebar_top.png) no-repeat center top, url(http://tanaka-yusuke.com/wp-content/uploads/2012/07/sidebar_bottom.png) no-repeat center bottom;
	padding:55px 0px 40px 0;
	margin-left:80px;
}
#sidebar-inner { /* 内側のdivに上下リピート背景画像を適用します */
	width:206px;
	background:url(http://tanaka-yusuke.com/wp-content/uploads/2012/07/sidebar_middle.png) repeat-y left;
	padding:0 30px;
}

/* ここからはボタン部分のスタイルです */
.sidebar-main {	
	margin:0;
	padding:0;
}
.sidebar-main li a {
	text-indent:-7777px;
	display:block;
	width:206px;
	height:50px;
	background-image:url(http://tanaka-yusuke.com/wp-content/uploads/2012/07/sidebar_list.png);
	background-repeat:no-repeat;
}
.demo-cssbox #side-about a:link {
	background-position:left 0;
}
.demo-cssbox #side-about a:hover {
	background-position:-220px 0;
}
.demo-cssbox #side-access a:link {
	background-position:left -50px;
}
.demo-cssbox #side-access a:hover {
	background-position:-220px -50px;
}
.demo-cssbox #side-contact a:link {
	background-position:left -100px;
}
.demo-cssbox #side-contact a:hover {
	background-position:-220px -100px;
}
.demo-cssbox #side-news a:link {
	background-position:left -150px;
}
.demo-cssbox #side-news a:hover {
	background-position:-220px -150px;
}
.demo-cssbox #side-product a:link {
	background-position:left -200px;
}
.demo-cssbox #side-product a:hover {
	background-position:-220px -200px;
}
【あとがき】

CSS3はまだまだ勉強中ですので、他にも合理的な方法があればどんどん記事を書いていきます。

今回のような複数背景プロパティは非対応ブラウザの場合のデザインの違いが顕著なので使いドコロが非常にシビアになりますが、シャドウ系やボーダー系のプロパティは、無視されてもそこまでデザインを損ないませんのでどんどん使って体で覚えるのが良いと思っています。

border-radiumプロパティは一瞬で角丸ボックスが作れるので、初めて使った時は感動物ですよ^^

関連記事