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の属性の値で要素を絞り込めるセレクタです。

検索

スポンサードリンク

バージョン

リファレンス