丸ワイプから全体表示するアニメーション

丸ワイプのサイズを徐々に大きくしながら全体表示するアニメーション。

デモページを表示

CSS

補足

• circleWipeクラスの疑似要素で、CSSの放射グラデーションを表示している。
• 放射グラデーションの中心部を透過、その外側を白のグラデーションに指定。徐々に透過部分の直径を大きくして、全体表示されるようアニメーションを設定している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• circleWipeクラスをつけたブロック要素の中がアニメーション表示される。

ブロック要素の背景色や背景画像の手前に格子柄を表示する。

ブロック要素の背景色や背景画像の手前に、格子柄（縦縞・横縞・ストライプ・ボーダー・チェック柄など）を表示する。

デモページを表示

CSS

補足

• bg-lattice-xxxxx クラスをつけたブロック要素に position: relative をつけておくこと。また、格子の奥の色を背景色（または背景画像）として指定しておくこと。
• 格子はブロック要素の before 疑似要素の背景イメージとして表示している（格子はブロック要素の背景色・背景画像の手前に表示される）。
• 格子の色や幅・間隔は repeating-linear-gradient の値で指定している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• ブロック要素に bg-lattice-xxxxx クラスをつけて、格子のタイプを指定する。

テーブルのセル背景色で棒グラフを表示

テーブルのセルの値を元に、セルの背景色で棒グラフを表示。

デモページを表示

CSS

補足

• 表のデザインのみで、棒グラフに関する定義はしていない。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• このサンプルでは、棒グラフの色を CSS ではなく jQuery 内で定義している。
• tbody 内の各行について、セルの値を元に棒グラフの長さを計算して、背景色の linear-gradient で棒グラフを表示している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• add-bar-bg クラスがついた table 要素を処理対象にしている。