CSS3 (スタイルシート Level 3) 例文辞典

このページはCSS3 (スタイルシート Level 3)の用例/サンプルを扱っています。HTML5とCSS3という組み合わせを想定して作成しています。
なお、このサイトで想定しているブラウザはGoogle Chrome、Firefox 4以降(自動更新)、Safari 5.1以降、Opera 11以降、IE9 (Internet Explorer 9)以降です。
*勉強用に作成したページなので間違いや、不適当なサンプルがあるかもしれません。これはまずいというサンプルがありましたらopenspc@alpha.ocn.ne.jpまでメールをください。

※ベンダープレフィックスについて
 このサイト内にあるサンプルにはベンダープレフィックスを付けているものと、そうでないものがあります。正式に使用可能になればベンダープレフィックスは削除して使用するようにしてください。また、このサイトで想定しているブラウザのバージョンより古いものはベンダープレフィックスを付けないと結果が反映されないものがあります。
ベンダープレフィックスは以下のようになっています。(例:-webkit-border-radiusのように使用)
ブラウザプレフィックス
Google Chrome、Safari-webkit
Firefox-moz
Opera-o
IE-ms
Last update:2011/10/12 PM 10:38

基本

  1. CSSファイルを読み込む
  2. 外部のCSSファイルを読み込む(@import)
  3. HTMLファイル内でスタイルを定義する
  4. HTML要素に直接スタイルを記述する

背景

  1. 複数の背景画像を指定する
  2. 複数の背景画像の表示位置を指定する
  3. 背景画像のサイズを指定する
  4. 背景画像の表示方法(クリップ方法)を指定する
  5. 背景画像の表示開始位置を指定する

角丸

  1. 四隅をまとめて角丸にする
  2. 左上を角丸にする
  3. 右上を角丸にする
  4. 左下を角丸にする
  5. 右下を角丸にする

段組(マルチカラム)

  1. 段組を行う(マルチカラム)
  2. 段組数を指定する
  3. 段の横幅を指定する
  4. 段と段との間隔を指定する
  5. 段と段との間の線のスタイルや幅を一括指定する
  6. 段と段との間のスタイルを指定する
  7. 段と段との間の線の色を指定する
  8. 段と段との間の線の幅を指定する
  9. 段と段との間をまたいで表示する

ボックス

  1. ボックスに影を付ける
  2. ボックスに複数の影を付ける
  3. ボックスに半透明の影を付ける
  4. ボックスをリサイズ可能にする

文字/テキスト

  1. 文字に影を付ける
  2. 文字に複数の影を付ける
  3. 文字に半透明の影を付ける
  4. 文章を縦書きにする

マーキー

  1. マーキーの方向を指定する
  2. マーキーの移動回数を指定する
  3. マーキーの速度を指定する
  4. マーキーの移動方法を指定する

マスク

  1. 画像のマスクを指定する

入力フォーム

  1. 必須項目のスタイルを指定する
  2. 読み出し専用項目のスタイルを指定する

アニメーション

  1. アニメーションの設定を一括して行う

変形(2D)

  1. マトリクスによる変形を行う
  2. 回転角度を指定する(2D)
  3. スケール(拡大縮小率)を指定する(2D)
  4. 傾斜を指定する
  5. 移動量を指定する(2D)
  6. 変形の基準位置を指定する(2D)

変形(3D)

  1. 3Dのパース(傾き)を指定する
  2. X軸方向に回転させる(3D)
  3. Y軸方向に回転させる(3D)
  4. Z軸方向に回転させる(3D)

応用例

  1. スライドショー(右から左にスクロールするタイプ)
  2. スライドショー(右から左に重なるタイプ)