![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。 -[[戻る>CSS]] *目次 [#c7dbf2eb] #contents *概要 [#l65f2328] -CSS 2.1を中核とし、新たな機能の追加や改良をモジュールで実現 -新規の仕様を加えた規格で互換性がある（従来の記述と混在が可能）。 -Javascriptに頼ってきた部分をCSSだけで実装することが可能 -勧告されているモジュール~ https://www.w3.org/TR/#tr_CSS *基本 [#pa9f6a0e] **セレクタ [#w506bfe5] ***Standards and Drafts [#ve8b63a8] Selectors API **メディアクエリ [#b4ee9e19] メディアタイプとメディアグループに加え、式を指定できるようになった。 -[[メディアタイプとメディアグループ（CSS2でサポート）>CSS#c03811dc]] -式：横幅・高さ・色など（一つ以上）の値から構成される。 ***Standards and Drafts [#kb8eff5d] Media Queries ***Properties [#f11b364a] ***参考 [#w2211bd5] -メディアクエリの利用 - CSS | MDN~ https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries *レイアウト [#w3ed3639] **ボックスサイズ [#u63da596] -複雑な[[ボックスサイズ(width, height) の算出方法>CSSのレイアウト#h21dfa30]]を変更できる。 -width や height と同時に border や padding を指定しているとき、~ 意図しない表示になったりレイアウトが崩れたりすることを防ぐ。 ***Standards and Drafts [#c21cd389] CSS Basic User Interface Module ***Properties [#t2766bf0] box-sizing **マルチカラム機能 [#de55170e] -テキスト・画像を2段組や3段組にできる。 ***Standards and Drafts [#w9b9e63f] CSS Multi-column Layout Module ***Properties [#j9e6e7a3] -column-count -column-gap -, etc. **グリッド [#f86bfa73] [[tableタグ>CSSのレイアウト#rae95cb7]]に変わる新しい2軸のグリッド。 ***Standards and Drafts [#a1e4ebe4] CSS Grid Layout Module 以下で構成される。 -グリッドコンテナ -グリッドアイテム -グリッドライン -グリッドトラック -グリッドセル -グリッドエリア ***Properties [#g351f69d] -グリッドコンテナに以下を指定する。 --子要素が自動的にフレックスアイテムになる。 display: grid; /* or inline-grid; */ --グリッドコンテナの行グリッドトラックのサイズを指定 grid-template-columns: --グリッドコンテナの列グリッドトラックのサイズを指定 grid-template-rows: --, etc. -グリッドアイテムに以下を指定する。 --グリッド・エリア（列グリッド & 行グリッド） --グリッドアイテムのグリッド・エリア（列グリッド & 行グリッド）を指定 grid-area: --列グリッド --グリッドアイテムの列グリッドを指定 grid-columns: --行グリッド --グリッドアイテムの行グリッドを指定 grid-rows: -, etc. ***参考 [#xe782015] -これからのグリッドレイアウト - Grid Layout Moduleの概要 | CodeGrid~ https://app.codegrid.net/entry/display-grid-1 **Flexbox [#fcb5665d] [[floatプロパティ、display: inline>CSSのレイアウト#r1c60978]]に変わる新しい1軸のグリッド。 ***Standards and Drafts [#oc79cc62] CSS Flexible Box Layout Module 以下で構成される。 -フレックスコンテナ（flex container） -フレックスアイテム（flex item） ***Properties [#u8de925a] 主要なものの紹介。 -フレックスコンテナに以下を指定する。 --子要素が自動的にフレックスアイテムになる。~ 孫要素はフレックスアイテムにはならない。 display: flex; /* or inline-flex; */ --フレックスアイテムのスタック方向を指定 flex-direction: row | row-reverse | column | column-reverse; --フレックスアイテムの折り返しの指定 flex-wrap: nowrap | wrap | wrap-reverse; --フレックスアイテムのスタック方向の位置の整列方法の指定 justify-content: flex-start | flex-end | center | space-between | space-around; --スタック方向でない位置の整列方法の指定 ---単一行 or 列内のフレックスアイテムの位置の整列方法の指定 align-items: flex-start | flex-end | center | baseline | stretch; ---複数行 or 列になった場合の全体の位置の整列方法の指定 align-content: flex-start | flex-end | center | space-between | space-around | stretch; -- , etc. -フレックスアイテムに以下を指定する。 --個々のフレックスアイテムの整列方法を指定 align-self: auto | flex-start | flex-end | center | baseline | stretch; --個々のフレックスアイテムのスタック順序を指定 order: <integer>; --個々のフレックスアイテムのスタック方向の長さ（サイズ）を指定 flex-basis: <length> | auto; --個々のフレックスアイテムのスタック方向の長さ（伸比）を指定 flex-grow: <number>; --個々のフレックスアイテムのスタック方向の長さ（縮比）を指定 flex-shrink: <number>; ***参考 [#yc7bbe8c] -そこが知りたい、Flexible Box - 仕様を知る 1 | CodeGrid~ https://app.codegrid.net/entry/flexiblebox-1 -これからのCSSレイアウトはFlexboxで決まり！ | Webクリエイターボックス~ http://www.webcreatorbox.com/tech/flexbox/ -CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス～~ http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html *スタイル [#x78581dd] **背景と境界（形状） [#r858ca48] ***Standards and Drafts [#nb1bf5ba] CSS Backgrounds and Borders Module ***Properties [#d344b8d6] -背景 --background-* -境界（形状） --border-* --丸みを付ける～真円にする。 ---border-radius ---border-*-radius --画像ボーダーを指定する ---border-image ---border-*-image --box-shadow: 影を付ける。 **画像に関する処理 [#ob289c63] ***Standards and Drafts [#t9448981] CSS Image Values and Replaced Content Module ***Properties [#s6f5d4eb] -グラデーション --線形グラデーション: linear-gradient() --円形グラデーション: radial-gradient() -, etc. **変化 [#bd904751] ***Standards and Drafts [#w35db812] -CSS Transforms Module -CSS Transitions -CSS Animations ***Properties [#pc176ccb] -変形 --2D変形~ transform, transform:xxxx(), transform-xxxxを使用する。 --3D変形~ perspective, perspective-xxxxを使用する。 -時間変化~ transition、transition-xxxxを使用する。 -アニメーション --animation、animation-xxxxを使用する。 --その他 ---jQueryのanimateなど、ライブラリでも可能。 ---Velocity.jsなどのアニメーション専用プラグインもある。 **その他 [#o64ad807] ***アコーディオンメニュー [#q7a59ec4] ***モーダルウィンドウ [#u4b498c6] *参考 [#v7c3e5ed] -CSS3とは？ 機能が増えて便利になったスタイルシート [ホームページ作成] All About~ https://allabout.co.jp/gm/gc/376450/ -CSS3を使ったちょっと便利なテクニックシリーズ - Qiita~ http://qiita.com/kokushin/items/95a0ed389665fd51898a -一夜漬けでCSS3をマスターするために見ておくべきコードのまとめ~ [Japanese Version Only] - jsdo.it - Share JavaScript, HTML5 and CSS~ http://jsdo.it/event/topics/2011/07/css3showcase >↓ CSS3で、色々なことができるのを確認できる。 --もはやネタ！CSSだけで作っちゃった無茶な作品 ---CSSではちゅねミク3D ---CSSだけでRPGっぽい仕組み（3Dバージョン） ---CSS PANIC ---Pure CSS お絵かきロジック --, etc.
