「.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 †
Properties †
- 列グリッド: grid-columns
- 行グリッド: grid-rows
- , etc.
参考 †
Flexbox †
floatプロパティ、display: inlineに変わる新しい1軸のグリッド。
Standards and Drafts †
CSS Flexible Box Layout Module
Properties †
主要なものの紹介。
参考 †
スタイル †
背景と境界（形状） †
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 お絵かきロジック
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
