戻る

CSS3の基礎知識

CSS3の基礎知識

2000年代後半からここ数年にかけてやっと一般的に普及してきた感のあるCSSですが、2012年1月時点での正式バージョンは、CSS2.1(Cascading Style Sheets Level 2 Revision 1。2011年6月7日勧告)となっています。CSSはHTMLの色やレイアウトなど見た目の装飾を担う機能ですが、企業のサイトやキャンペーンサイトなどのWebデザインをHTMLに落とし込むためには、現状のCSSだけではすべてをまかなうことはできていないのが現状です。その代表的なものは、ボックスの角丸やシャドウ、グラデーションといったものですが、CSS3ではCSS2.1まででできなかったこれらの機能が含まれる予定です(ただし現段階で実装されている機能も多くありますが、今後仕様から削除される可能性もあります）。

CSS3でできること

前述したとおり、CSS3ではこれまでできなかった多くの機能が盛り込まれる予定ですが、CSS3自体がまだ正式勧告されていないため、仕様が変更されたり削除されたりといったことも考えられます。こうした前提のもとでSafariに実装されているCSS3の代表的な機能を紹介します。また、iPhone/Android上のブラウザのバージョンの問題で、PC上では必要がなくなっている-webkitなどのベンダープレフィックスが必要である場合があります。

角丸

これまでボックスを角丸にする時は角丸に装飾した画像を背景に設定したり、JavaScriptのライブラリなどを使用して無理矢理角丸を作成する方法しかなく、可変の角丸ボックスを実現するためには<div>タグを複数使用したりと複雑な手法を使わなければいけませんでしたが、CSS3からは角丸のプロパティを使用することができます。ただし、現段階ではまだ正式な仕様として勧告されているわけではないので、各ブラウザベンダーが先行して実装している状態です。この状態ではベンダープレフィックスと呼ばれるブラウザの種別を識別するための識別子が必要です。SafariやGoogle Chromeは「Webkit」と呼ばれるHTMLのレンダリングエンジンを採用していますので、識別子は「-webkit-」となります。

  • 書式
  • -webkit-border-radius:角丸の半径;

通常ボックス
角丸ボックス
通常のボックスと角丸ボックス

ボックスシャドウ

角丸同様にボックスのシャドウもこれまで背景画像を使用していましたが、iPhone/Android上では、ベンダープレフィックスを使用してボックスシャドウを表現します。

  • 書式
  • -webkit-box-shadow:横方向のずれ(px) 縦方向のずれ(px) ぼかし具合 影の色;

シャドウボックス
ボックスのシャドウ

テキストシャドウ

ボックスだけでなく、テキストにもシャドウをかけることができます。テキストシャドウにはベンダープレリックスは不要です。

  • 書式
  • text-shadow:横方向のずれ(px) 縦方向のずれ(px) ぼかし具合 影の色;

テキストシャドウ
テキストのシャドウ

グラデーション

ボックスの背景にグラデーションを設定することができます。iPhone/Android上では、ベンダープレフィックスを使用して、グラデーションは二色だけでなく、グラデーションの位置を指定して複数設定することがができます。

  • 書式
  • background:-webkit-gradient(グラデーションの種類, 開始位置, 終了位置, from(開始点の色), to(終了点の色));

グラデーション
グラデーション
背景のグラデーション

透過

ボックスに透過を設定することができます。透過を設定するとボックスに含まれる要素も透過になります。ベンダープレフィックスは不要です。

  • 書式
  • opacity:透明度(0～1);

透過ボックス
ボックスの透過

変形

ボックスを変形することができます。変形は回転/拡大縮小/ゆがみ/移動などを設定することができます。

  • 書式 | 回転
  • -webkit-transform:rotate(回転角度deg);

回転ボックス
ボックスの回転

  • 書式 | 傾斜
  • -webkit-transform:skew(X軸方向の傾斜角deg, Y軸方向の傾斜角deg);

傾斜ボックス
ボックスの傾斜

  • 書式 | 拡大縮小
  • -webkit-transform:scale(幅の比率, 高さの比率);

通常ボックス
拡大縮小ボックス
ボックスの拡大縮小

  • 書式 | 移動
  • -webkit-transform:translate(X軸方向の移動距離px, Y軸方向の移動距離px);

移動ボックス
ボックスの移動

アニメーション

CSS3では簡単なアニメーションであれば、JavaScriptなどのプログラムを使用しなくてもCSSのみで作成することができます。アニメーションの対象はブロックレベル要素、インライン要素です。iPhone/Android上では、ベンダープレフィックスが必要です。アニメーションは、アニメの時間や繰り返しなどそのものに対する処理の定義と、アニメーションの動作の定義を分けて記述します。

  • 書式 | アニメーションの設定(一括記述)
  • -webkit-animation:名称 実行時間 イージングの種類 開始までの遅延 繰り返しの回数 反転の有無;
  • 書式 | アニメーションの動作の定義
  • @-webkit-keyframes '名称の定義(任意)'{
    0% {設定したいCSSプロパティの実行前の値を記述}
    100% {設定したいCSSプロパティの実行後の値を記述}
    }

または、アニメーションの設定は次のように個別に記述することもできます。

  • 書式 | アニメーションの設定(個別記述)
  • animation-name: '名称';
    animation-duration: 実行時間(秒で指定);
    animation-timing-function: イージングの種類(ease/linear/ease-in/ease-out/ease-in-out/cubic-bezier(数値, 数値, 数値, 数値));
    animation-iteration-count: 繰り返しの回数(回数、またはinfiniteで無限に繰り返し);
    animation-direction: 反転の有無(normal/alternate);

Dreamweaverで作るiPhone/Androidアプリ入門
inserted by FC2 system