(1/5)知って得する、Webブラウザ上で利用できるグラフィック関連技術。});CSSで多彩な表現が可能に本連載では、Webブラウザ上で利用できるグラフィック関連技術を、読み切りの形で、なるべく分かりやすく紹介していきます。第1回である今回はWebの基本技術の1つであるCSSで実現するグラフィック表現を取り上げます。従来のCSSはWebページのフォントやレイアウトを整える機能がほとんどで、「グラフィック技術」というには物足りないものでした。CSS3と呼ばれる近年の拡張によって、アニメーションや3D表現を含む多彩な画面効果が実現できるものに進化しています。この記事は、そうしたCSS3のグラフィック関連機能の基本的な使用方法をまとめて学習することを目的としています。ベンダプレフィクスについてCSS3の多くの機能はまだ規格策定段階のものであり、正式に勧告が発行されたものではありません。従って、一部のCSS属性は先頭に「ベンダプレフィクス」を付ける必要があります。記事中でも取り上げているtransition属性を主要なブラウザで動作させるためには、以下のように記述する必要があります。*/煩雑な記述を避けるため、記事中のコード例ではこうしたベンダプレフィクスを省略し、本来の記述のみを掲載しています。ベンダプレフィクスを含む記述例については、サンプルのソースコードをご参照ください。自動でベンダプレフィクス付きの属性を補ってくれる、CSSPrefixerというツールも公開されています。記事中では各機能のサポートブラウザについて言及していませんが、多くのWebブラウザでは紹介している機能の一部が利用できません。どのブラウザでどの機能が利用できるかは、各自でサンプルを実行して調べてみてください。Webブラウザは日進月歩で進化しているので、ほとんどの機能が近いうちにサポートされることでしょう。テキストシャドウまずはWebページの基本である文字の表現から見ていきましょう。従来のCSSでもfont属性などでフォントや色、サイズ、簡単な装飾が指定できましたが、CSS3では文字の影を描画するtext-shadow属性が新たに追加されました。使い方は以下のとおりです。text-shadowの書式x、yは影の位置をずらす量、blurはぼかしの半径、colorは影色です。blurとcolorは省略可能で、それぞれ0、color属性の値がデフォルトになります。上記のスタイルを実際に適用するとこうなります。実際のサンプルを見るコンマ区切りでパラメータの組を並べることで、複数の影を表示することも可能です。パラメータを少しずつ変化させてやることにより、下のような面白い効果も得られます。実際のサンプルを見る単に影として使うだけでなく、工夫次第でさまざまな表現が可能です。見出しやボタンのラベル文字列などで効果的に使ってください。丸角(border-radius)テキストシャドウの次はボックスシャドウに行きたいのですが、その前に組み合わせて使われることの多いborder-radiusを説明しておきます。ボックスの角を丸くした、いわゆる丸角のボックスを実現する属性です。CSS3の機能の中では最も早く実装された機能の1つなので、すでに活用されている方も多いでしょう。border-radiusの書式パラメータはそれぞれの角の丸みの半径です。4px」で済ませます。実例はボックスシャドウの例を参照してください。ボックスシャドウ文字と同様に、box-shadow属性でボックスの影も描画できます。colorの意味はtext-shadowと同じです。pt等)で指定します。insetについては後述。y以外のパラメータは省略可能で、offsetのデフォルト値は0になります。実際のサンプルを見る上記の例にinsetの指定を加えると、影がボックスの内側に描画されます。ボックスの中が少しくぼんでいるように見えますね。実際のサンプルを見るinsetの影を明るい色にすれば、ハイライトの効果を作ることもできます。box-shadowもtext-shadowと同様にカンマ区切りで複数の影を表示できるので、insetの影と通常の影を同時に適用できます。実際のサンプルを見るさらに多くの影を組み合わせれば、自然な立体感を表現することも可能です。ここまでくると、グラフィックツールで制作した画像素材と見分けがつかないのではないでしょうか。実際のサンプルを見るbox-shadowもtext-shadow同様に、影としてだけではなくさまざまな応用が可能です。後述のグラデーションと組み合わせれば、これまで画像と複雑なマークアップで実現していた効果の多くが、数行のCSSで表現できるでしょう。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。