CSS3
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-[[戻る>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...
-式:横幅・高さ・色など(一つ以上)の値から構成される。
***Standards and Drafts [#kb8eff5d]
Media Queries
***Properties [#f11b364a]
***参考 [#w2211bd5]
-メディアクエリの利用 - CSS | MDN~
https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queri...
*レイアウト [#w3ed3639]
**ボックスサイズ [#u63da596]
-複雑な[[ボックスサイズ(width, height) の算出方法>CSSのレ...
-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の概要 ...
https://app.codegrid.net/entry/display-grid-1
**Flexbox [#fcb5665d]
[[floatプロパティ、display: inline>CSSのレイアウト#r1c609...
***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-reve...
--フレックスアイテムの折り返しの指定
flex-wrap: nowrap | wrap | wrap-reverse;
--フレックスアイテムのスタック方向の位置の整列方法の指定
justify-content: flex-start | flex-end | center | space-...
--スタック方向でない位置の整列方法の指定
---単一行 or 列内のフレックスアイテムの位置の整列方法の指定
align-items: flex-start | flex-end | center | baseline |...
---複数行 or 列になった場合の全体の位置の整列方法の指定
align-content: flex-start | flex-end | center | space-be...
-- , etc.
-フレックスアイテムに以下を指定する。
--個々のフレックスアイテムの整列方法を指定
align-self: auto | flex-start | flex-end | center | base...
--個々のフレックスアイテムのスタック順序を指定
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/c...
*スタイル [#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とは? 機能が増えて便利になったスタイルシート [ホー...
https://allabout.co.jp/gm/gc/376450/
-CSS3を使ったちょっと便利なテクニックシリーズ - Qiita~
http://qiita.com/kokushin/items/95a0ed389665fd51898a
-一夜漬けでCSS3をマスターするために見ておくべきコードのま...
[Japanese Version Only] - jsdo.it - Share JavaScript, HTM...
http://jsdo.it/event/topics/2011/07/css3showcase
>↓ CSS3で、色々なことができるのを確認できる。
--もはやネタ!CSSだけで作っちゃった無茶な作品
---CSSではちゅねミク3D
---CSSだけでRPGっぽい仕組み(3Dバージョン)
---CSS PANIC
---Pure CSS お絵かきロジック
--, etc.
終了行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-[[戻る>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...
-式:横幅・高さ・色など(一つ以上)の値から構成される。
***Standards and Drafts [#kb8eff5d]
Media Queries
***Properties [#f11b364a]
***参考 [#w2211bd5]
-メディアクエリの利用 - CSS | MDN~
https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queri...
*レイアウト [#w3ed3639]
**ボックスサイズ [#u63da596]
-複雑な[[ボックスサイズ(width, height) の算出方法>CSSのレ...
-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の概要 ...
https://app.codegrid.net/entry/display-grid-1
**Flexbox [#fcb5665d]
[[floatプロパティ、display: inline>CSSのレイアウト#r1c609...
***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-reve...
--フレックスアイテムの折り返しの指定
flex-wrap: nowrap | wrap | wrap-reverse;
--フレックスアイテムのスタック方向の位置の整列方法の指定
justify-content: flex-start | flex-end | center | space-...
--スタック方向でない位置の整列方法の指定
---単一行 or 列内のフレックスアイテムの位置の整列方法の指定
align-items: flex-start | flex-end | center | baseline |...
---複数行 or 列になった場合の全体の位置の整列方法の指定
align-content: flex-start | flex-end | center | space-be...
-- , etc.
-フレックスアイテムに以下を指定する。
--個々のフレックスアイテムの整列方法を指定
align-self: auto | flex-start | flex-end | center | base...
--個々のフレックスアイテムのスタック順序を指定
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/c...
*スタイル [#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とは? 機能が増えて便利になったスタイルシート [ホー...
https://allabout.co.jp/gm/gc/376450/
-CSS3を使ったちょっと便利なテクニックシリーズ - Qiita~
http://qiita.com/kokushin/items/95a0ed389665fd51898a
-一夜漬けでCSS3をマスターするために見ておくべきコードのま...
[Japanese Version Only] - jsdo.it - Share JavaScript, HTM...
http://jsdo.it/event/topics/2011/07/css3showcase
>↓ CSS3で、色々なことができるのを確認できる。
--もはやネタ!CSSだけで作っちゃった無茶な作品
---CSSではちゅねミク3D
---CSSだけでRPGっぽい仕組み(3Dバージョン)
---CSS PANIC
---Pure CSS お絵かきロジック
--, etc.
ページ名: