「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
目次 †
概要 †
- CSS 2.1を中核とし、新たな機能の追加や改良をモジュールで実現
- 新規の仕様を加えた規格で互換性がある(従来の記述と混在が可能)。
- Javascriptに頼ってきた部分をCSSだけで実装することが可能
基本 †
セレクタ †
Standards and Drafts †
Selectors API
メディアクエリ †
メディアタイプとメディアグループに加え、式を指定できるようになった。
Standards and Drafts †
Media Queries
Properties †
参考 †
レイアウト †
ボックスサイズ †
Standards and Drafts †
CSS Basic User Interface Module
Properties †
box-sizing
マルチカラム機能 †
Standards and Drafts †
CSS Multi-column Layout Module
Properties †
- column-count
- column-gap
- , etc.
グリッド †
tableタグに変わる新しい2軸のグリッド。
Standards and Drafts †
CSS Grid Layout Module
以下で構成される。
- グリッドコンテナ
- グリッドアイテム
- グリッドライン
- グリッドトラック
- グリッドセル
- グリッドエリア
Properties †
- グリッドアイテムに以下を指定する。
- グリッドアイテムのグリッド・エリア(列グリッド & 行グリッド)を指定
grid-area:
- グリッドアイテムの列グリッドを指定
grid-columns:
- グリッドアイテムの行グリッドを指定
grid-rows:
- , etc.
参考 †
Flexbox †
floatプロパティ、display: inlineに変わる新しい1軸のグリッド。
Standards and Drafts †
CSS Flexible Box Layout Module
以下で構成される。
- フレックスコンテナ(flex container)
- フレックスアイテム(flex item)
Properties †
主要なものの紹介。
- 個々のフレックスアイテムのスタック順序を指定
order: <integer>;
- 個々のフレックスアイテムのスタック方向の長さ(伸比)を指定
flex-grow: <number>;
- 個々のフレックスアイテムのスタック方向の長さ(縮比)を指定
flex-shrink: <number>;
参考 †
スタイル †
背景と境界(形状) †
Standards and Drafts †
CSS Backgrounds and Borders Module
Properties †
- 境界(形状)
- border-*
- 丸みを付ける~真円にする。
- border-radius
- border-*-radius
- 画像ボーダーを指定する
- border-image
- border-*-image
画像に関する処理 †
Standards and Drafts †
CSS Image Values and Replaced Content Module
Properties †
- グラデーション
- 線形グラデーション: linear-gradient()
- 円形グラデーション: radial-gradient()
変化 †
Standards and Drafts †
- CSS Transforms Module
- CSS Transitions
- CSS Animations
Properties †
- 変形
- 2D変形
transform, transform:xxxx(), transform-xxxxを使用する。
- 3D変形
perspective, perspective-xxxxを使用する。
- 時間変化
transition、transition-xxxxを使用する。
- アニメーション
- animation、animation-xxxxを使用する。
- その他
- jQueryのanimateなど、ライブラリでも可能。
- Velocity.jsなどのアニメーション専用プラグインもある。
その他 †
アコーディオンメニュー †
モーダルウィンドウ †
参考 †
↓ CSS3で、色々なことができるのを確認できる。
- もはやネタ!CSSだけで作っちゃった無茶な作品
- CSSではちゅねミク3D
- CSSだけでRPGっぽい仕組み(3Dバージョン)
- CSS PANIC
- Pure CSS お絵かきロジック