CSS3を使用したサイトを作ってみての雑感 / 35歳からのWEB遊びブログ

以前CSS3の「gradient」についてエントリーしたが、その頃制作途上だった自分用の写真ブログ「写真賦」というサイトがようやく完成。

ちょこちょこCSS3を使用して作ったので、サイトの宣伝も兼ねて実際に使ってみた感想やCSS3未対応ブラウザへの対処などを書いてみます。ただしデザインについては全く素人なので、見逃していただけると幸いです。
なお、現在最新のIE8でもCSS3に非対応のIEに関しては、代替手段が特定条件で上手く動作しなかったりfilterを多用するとかなり負荷になるようなので、私的ブログということもあってIE対策は一旦放棄という選択を取りました。

サイトを見ると一目瞭然ですが、WordPressのテーマは当ブログで使用しているものを大幅にカスタマイズして流用。プラグインも増量投入している。
WordPress 3.0のリリース直前ではあるが、この辺の詳細はまた別の機会に。

使用しなかったCSS3のプロパティも多くあり

CSS3と一口に言っても実に多くのプロパティやセレクタがある。まだ正式に勧告されていないのだから全部が全部使ってみたわけではなく、基本的にはFirefox3.6とSafari・Chromeのwebkitに対応するもので、非対応ブラウザへの代替策が無くとも大きく影響が出ないもののみを使用。

例えば、サーバー上にアップしたフォントを読み込んで表示する「@font-face」は、効果的な使いどころが今一つ見つからなかったことと、ブラウザによってはページの読み込みが全て終わってから、@font-faceで指定されたフォントに置き換わるという再描画が非常にうるさく感じられたので却下。
フォントをサーバー上にアップするので、ライセンス上問題となるケースもあるようだ。

また、ボックスを回転させて表示する「Rotation」や、一要素に複数の背景画像を指定できる「Multiple Backgrounds」は使いどころを逃してしまい、CSSで段組みができる「Multiple Columns」は、非対応ブラウザへの影響が大きいのでスルーである。

使いやすい「text-shadow」と「border-radius」

非常にすんなり使えるプロパティが、「text-shadow」と「border-radius」だろう。
これらのプロパティは、素晴らしい解説をしているサイトさんがあるのでリンクを貼るだけにします。
text-shadowはmBlog様で、border-radiusはCSS Lecture様が非常に解りやすい。

使いどころも多くあり、簡単にCSS3体験をするならこの辺からでしょう。

「box-shadow」について

要素に、Photoshopで言えば光彩やドロップシャドウといった効果を適用できるプロパティ。インライン要素にも指定可能だが妙な表示になるので、ブロックレベル要素に指定するのが普通だろう。
写真賦では、左右のカラムと見出しの疑似リボンなどに使用しているが、box-shadowは複数指定が可能なので光彩＋ドロップシャドウという合わせ技も可能。

複数指定する場合は「,」で区切るだけ。Firefox用とSafari・Chrome用をそれぞれ追加して以下のように記載。シャドウの色は、rgbaで指定した方がシャドウのアルファ（透過）を調整できるので便利だろう。


#hoge {
	box-shadow: 0px 0px 8px rgba(0,0,0,0.2), 5px 5px 12px rgba(0,0,0,0.18);
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.2), 5px 5px 12px rgba(0,0,0,0.18);
	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.2), 5px 5px 12px rgba(0,0,0,0.18);
}

box-shadowはpaddingなどと違って要素の幅に影響を与えないようなので、親要素の幅ギリギリで左右カラムがfloatしているような状況で指定してもカラム落ちを起こすことは無いようだ。
また、自分でやってしまって言うのも何だが、box-shadowの描写に釣られてデザインを合わせるのに画像にシャドウ加工すると、IEでは画像のみドロップシャドウがあるという変なデザインとなるので注意。

「gradient」について

グラデーションを描画するプロパティ。
写真賦では見出しのリボンと背景等に利用。リボンの折り返しもCSS3で対応可能なのだが、IEをカバーする為にCSS3ではなく透過pngを絶対指定で配置している。

CSSの書き方は以下。


#hoge {
/*　Firefox　*/
background: -moz-linear-gradient(top, #333, #000);

/*　Safari・Chrome　*/
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#000));

/*　IE6・7　*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#333333', endColorstr='#000000');

/*　IE8　*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#333333', endColorstr='#000000')";
}

ただし、CSS3の足を引っ張るIEに悩むでも書いたが、IEではグラデーションを指定した要素内で、メイリオのアンチエイリアスが無効になるため実用には厳しい。
また、モダンブラウザの中でOperaのみgradientに未対応となっているので、上記指定のみではOperaでは背景に何も指定されていない状態となってしまう。

gradientは、background-colorではなくbackground-imageに指定されるプロパティなので、以下のように別途背景色を指定しておけば問題を回避できる。


#hoge {
	/*　Firefox　*/
	background-image: -moz-linear-gradient(top, #D6D3BD, #EEEEE9);

	/*　Safari・Chrome　*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(#D6D3BD), to(#EEEEE9));

	/*　IEとOpera用に背景色を指定　*/
	background-color: #D6D3BD;
}

取りあえずの感想は・・・

実際にCSS3を積極的に使ったサイトを作って見て思うのは、まだ最大シェアを誇るIEへの対応が不完全なので仕事サイトにガシガシ使うのはまだまだ時間がかかる印象。ただ、近い将来CSS3を当たり前に使える環境になるのはほぼ確実だろう。
私もまだCSS3に手を出して日が浅いので、このエントリーの書き方より良い指定方法や代替手段などがあるかも知れない。

それから、今回サイト公開時に見て見て宣伝メールを送った中で、WEBデザーナーの方から「CSSだけでここまでできるんですか～へぇ～」との返信が。
実務ということで考えた場合、最近のWEB制作は分業制が多いので、CSS3を使えばこんな表示や表現ができるということをデザイナー側も理解しないと、コーダーはCSS3の使いどころが難しくなるかなとも思った。

何はともあれCSS3はもちろん写真に興味のある方は、写真ブログ「写真賦」にぜひお越しください。と、宣伝で締めくくってみる。

35歳からのWEB遊びブログ