CSS3
CSS3で新たに追加されたセレクタやプロパティの一覧です。
- flex-grow
flex-growプロパティはFlexible Boxに余白が生じた際にどのような比率でその余白を埋めるかが定義できるプロパティです。 - box-ordinal-group
box-ordinal-groupプロパティはFlexアイテムの並び順を制御するための古いプロパティです。 - flex-order
flex-orderプロパティはFlexアイテムの並び順を制御するための古いプロパティです。 - order
orderプロパティはFlexアイテムの並び順を制御するためのプロパティです。 - flex-flow
flex-flowプロパティはflex-directionプロパティとflex-wrapプロパティをまとめて指定できるプロパティです。 - box-lines
box-linesプロパティはFlexアイテムがFlexコンテナボックスの横幅から溢れた際の挙動を制御するための古いプロパティです。 - flex-wrap
flex-wrapはFlexアイテムがFlexコンテナボックスの横幅から溢れた際の挙動を制御するためのプロパティです。 - box-direction
「box-direction」はFlexコンテナボックスの子要素(Flexアイテム)の並び順を指定するための古いプロパティです。 - box-orient
「box-orient」はFlexコンテナボックスの子要素(Flexアイテム)の並び順を指定するための古いプロパティです。 - flex-direction
「flex-direction」はFlexコンテナボックスの子要素(Flexアイテム)の並び順を指定するための新しいプロパティです。 - display:inline-box
display:inline-boxはインラインFlexコンテナボックスを作成するためのdisplayプロパティです。 - display:inline-flexbox
display:inline-flexboxはインラインFlexコンテナボックスを作成するためのdisplayプロパティです。 - display:inline-flex
display:inline-flexはインラインFlexコンテナボックスを作成するためのdisplayプロパティです。 - display:box
display:boxはFlexコンテナボックスを作成するためのdisplayプロパティです。 - display:flexbox
display:flexboxはFlexコンテナボックスを作成するためのdisplayプロパティです。 - display:flex
display:flexはFlexコンテナボックスを作成するためのdisplayプロパティです。 - box-decoration-break
box-decoration-breakは印刷時にページをまたがるボックスの背景やボーダーの描画を制御するためのプロパティです。 - box-shadow
box-shadowプロパティは要素に対して影を設定することができるプロパティです。 - border-image
border-imageはボーダー画像を指定するためのプロパティです。 - border-image-repeat
border-image-repeatはボーダー画像の繰り返し方法について指定するためのプロパティです。 - border-image-outset
border-image-outsetはボーダー画像が描画する領域外のサイズを指定するためのプロパティです。 - border-image-width
border-image-widthはボーダー画像が描画する領域のサイズを指定するためのプロパティです。 - border-image-slice
border-image-sliceはボーダーに画像を指定する際にborder-image-sourceで指定した画像のスライス位置を指定できるプロパティです。 - border-image-source
border-image-sourceはボーダーに画像を指定する際の画像のURLを指定できるプロパティです。 - border-radius
border-radiusは要素の各角を角丸にする為のプロパティです。 - border-bottom-left-radius
border-bottom-left-radiusはCSS3で定義された要素の左下の角丸を指定するためのプロパティです。 - border-bottom-right-radius
border-bottom-right-radiusはCSS3で定義された要素の右下の角丸を指定するためのプロパティです。 - border-top-right-radius
border-top-right-radiusはCSS3で定義された要素の右上の角丸を指定するためのプロパティです。 - border-top-left-radius
border-top-left-radiusはCSS3で定義された要素の左上の角丸を指定するためのプロパティです。 - background
backgroundプロパティは背景に関する指定を行うためのプロパティです。 - background-size
CSS3で追加されたbackground-sizeプロパティは背景画像のサイズを指定できるプロパティです。 - background-origin
background-originプロパティは背景画像の基準位置を指定する為のプロパティです。 - background-clip
background-clipはCSS3で追加されたプロパティで背景の描画の範囲を指定できます。 - background-position
background-positionプロパティは背景画像の初期表示位置を指定できるプロパティです。 - background-attachment
background-attachmentプロパティはスクロール時の背景画像の挙動を制御できるプロパティです。 - background-repeat
background-repeatプロパティは背景画像の繰り返し方法を設定できるプロパティです。 - backface-visibility
backface-visibilityプロパティは3D変形時の背景を描画するかどうか指定するプロパティです。 - perspective-origin
perspective-originプロパティはperspectiveプロパティの3D変形時の奥行きの位置を指定できるプロパティです。 - perspective
perspectiveプロパティは3D変形時の奥行きを指定できるプロパティです。 - transform-style
transform-styleは子要素を3D空間に配置するためのプロパティです。 - transform-origin
transform-originプロパティはtransformプロパティで行う自由変形の起点の位置を指定できるプロパティです。 - matrix3d()
transformプロパティのmatrix3d()は要素の3D自由変形が可能です。 - matrix()
transformプロパティのmatrix()は要素の自由変形が可能です。 - perspective()
perspective()はtransformプロパティによる自由変形時の起点となる奥行きを指定できます。 - skewY()
transformプロパティで指定できるのskewY()は要素をY軸に変形させることができます。 - skewX()
transformプロパティで指定できるのskewX()は要素をX軸に変形させることができます。 - skew()
transformプロパティで指定できるのskew()は要素をX軸とY軸に変形させることができます。 - rotate3d()
transformプロパティで指定できるのrotate3d()は要素を任意の軸を中心に回転させることができます。 - rotateZ()
transformプロパティで指定できるのrotateZ()は要素をZ軸を中心に回転させることができます。 - rotateY()
transformプロパティで指定できるのrotateY()は要素をY軸を中心に回転させることができます。 - rotateX()
transformプロパティで指定できるのrotateX()は要素をX軸を中心に回転させることができます。 - rotate()
transformプロパティで指定できるのrotate()は要素を回転させることが可能です。 - scale3d()
transformプロパティで指定できるのcale3d()は要素をX軸方向、Y軸方向、Z軸方向に拡大・縮小させることが可能です。 - scaleZ()
transformのscaleZ()は要素をZ方向に拡大・縮小させることが可能です。 - scaleY()
transformのscaleY()は要素の高さを拡大・縮小させることが可能です。 - scaleX()
transformのscaleX()では要素の横幅を拡大・縮小させることが可能です。 - scale()
transformのscale()では要素を拡大・縮小させることが可能です。 - translateZ()
transformのtranslate()では要素をZ軸方向に移動させることが可能です。 - translate3d()
transformのtranslate()では要素を3D移動させることが可能です。 - translateY()
transformのtranslateY()では要素をY軸方向に移動させることが可能です。 - translateX()
transformのtranslateX()では要素をX軸方向に移動させることが可能です。 - translate()
transformのtranslate()では要素を移動させることが可能です。 - transform
transformプロパティは要素の自由変形を行うためのプロパティです。 - Keyframes
KeyframesはCSS3のanimationの動きを指定できる書式です。 - animation
animationはkeyframesで作成したアニメーションの指定ができるプロパティです。 - animation-fill-mode
animation-fill-modeはkeyframesで作成したアニメーションが適応される前後の状態を指定できるプロパティです。 - animation-delay
animation-delayはkeyframes作成したアニメーションを遅延させてスタートさせる為のプロパティです。 - animation-play-state
animation-play-stateは@keyframesで作成したアニメーションが動いているか停止しているかの状態を指定できるプロパティです。 - animation-direction
animation-directionはkeyframes作成したアニメーションの向きを指定できるプロパティです。 - animation-iteration-count
animation-iteration-countはkeyframesで作成したアニメーションの回数を指定できるプロパティです。 - animation-timing-function
animation-timing-functionはkeyframesで作成したアニメーションの動きを指定できるプロパティです。 - animation-duration
animation-durationはkeyframesで作成したアニメーションの間隔を指定できるプロパティです。 - animation-name
animation-nameはkeyframesで作成したアニメーションの名前を指定できるプロパティです。 - transition
transitionはトランジションアニメーションに関する指定が可能なプロパティです。 - transition-delay
transition-delayはトランジションアニメーションの遅延時間を指定できるプロパティです。 - transition-timing-function
transition-timing-functionはトランジションアニメーションの動きを指定できるプロパティです。 - transition-duration
transition-durationはトランジションアニメーションの間隔を指定できるプロパティです。 - transition-property
transition-propertyはトランジションアニメーションを行う要素を指定できるプロパティです。 - 兄弟セレクタ
兄弟セレクタはチルダ(~)でつなげることで指定した要素以降に登場する兄弟要素(自身は含まない)のみを指定できるセレクタです。 - :not()
:not()は否定擬似クラスと呼ばれ特定のセレクタで指定した要素から、引数に指定したセレクタの要素を取り除くセレクタです。 - ::after
after擬似要素は要素の最後にコンテンツを追加するセレクタです。 - ::before
before擬似要素は要素の先頭にコンテンツを追加するセレクタです。 - ::first-letter
first-letter擬似要素は要素の最初の1文字を指定できるセレクタです。 - ::first-line
first-line擬似要素は要素の最初の行を指定できるセレクタです。 - :checked
checked擬似クラスはラジオボタンやチェックボックスでチェックされている要素を選択できるセレクタです。 - :disabled
disabled擬似クラスは無効なUI要素を選択できるセレクタです。 - :enabled
enabled擬似クラスは有効なUI要素を選択できるセレクタです。 - :target
target擬似クラスはURLのハッシュフラグメント(#)と同じid属性を持つ要素を選択できるセレクタです。 - :empty
empty擬似クラスは空の要素を選択できるセレクタです。 - :only-of-type
only-of-type擬似クラスは兄弟要素で特定の要素のうちで1つだけ登場する要素を選択できるセレクタです。 - :only-child
only-child擬似クラスは兄弟要素が一つしかない要素を選択できるセレクタです。 - :last-of-type
last-of-type擬似クラスはは兄弟要素で特定の要素のうちで1番最後の要素を絞り込めるセレクタです。 - :first-of-type
first-of-type擬似クラスは兄弟要素で特定の要素のうちで1番目の要素を絞り込めるセレクタです。 - :last-child
last-child擬似クラスは同一の親要素内の最後の子要素を検索できるCSSセレクタです。 - :nth-last-of-type()
:nth-last-of-type(n) は兄弟要素で特定の要素のうち後ろから数えてn番目の要素を絞り込めるセレクタです。 - :nth-of-type()
:nth-of-type(n) は兄弟要素で特定の要素のうちでn番目の要素を絞り込めるセレクタです。 - :nth-last-child()
:nth-last-child()は兄弟要素で後ろから数えてn番目の要素を絞り込めるセレクタです。 - :nth-child()
:nth-child()は兄弟要素の中でn番目の要素を絞り込めるセレクタです。 - :root
:rootはHTMLのルート要素を指定できるセレクタです。 - 属性セレクタ
属性セレクタはHTMLの属性の値で要素を絞り込めるセレクタです。