CSS3を活用する(2ページ目)

CSS3でできること

CSS3は、画像やJavaScriptなどで行ってきた装飾や見せ方を、CSS内部のソースコードに記述するだけで、変更することができます。

具体的には、例えば以下のようなことです。

1. 角丸
2. グラデーション
3. テキストシャドウ
4. ボックスシャドウ
5. ボーダーイメージ
6. 透過

のような装飾を施すことができます。
(※具体的な記述方法は、専門書にてお願いします)
ほか、移動や回転やアニメーション等も可能ですが、ここでは装飾にクローズアップしていきたいと思います。

可能な限りCSS3で装飾していく

Webサイトでデザインを表現する場合、画像に頼り過ぎてしまうと、今度は、データサイズが膨らんでしまい、読み込みに時間が掛かりすぎてしまうことがあります。端末によっては、ページの最後まで読み込み難いこともあるようですし、昨今、特にスマホ対応が叫ばれる中、SEO上、画像の多用は致命的な問題にもなる可能性もあります。

そもそも表示の遅いサイトは、ユーザビリティに反することにもなるため、画像の使い方においては、数や量、使用位置などのバランスも考えた使用方法が今以上に求められることは必至です。

IE8以下ブラウザへの配慮

IE8以下のブラウザを使用している方への対応として、次の3行を記述し、「css3-mediaqueries.js」を配置させることも必要となります。

--ここから--
<!--[if lt IE 9]>
 <script src="css3-mediaqueries.js"></script>
 <![endif]-->
--ここまで--

※加えて、CSSソース中で、@media screen and (max-width: 600px)のように、CSS内部で記述しましょう(HTML内部で<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">のように記述することはNGです)。


以上、SEOの視点から考えた、「CSS3」のメリットについてのご案内でした。
画像の装飾を、可能ならばCSS3に置き換えてみてはいかがでしょうか？