CSS3プロパティ

CSS3 プロパティの復習の一覧

• -color　 文字の色.cls{ color : red }
• -opacity　 透明度.cls{ opacity : 0.5 }
• -background　 背景全般の設定.cls{ background : center / contain no-repeat url(https://jpn-lab.com/image/dot_bk.png),#eee 35% }
• -background-attachment　 背景画像のスクロール.cls{ background-attachment : scroll }
• -background-clip　 背景画像の表示エリア.cls{ background-clip : content-box }
• -background-color　 背景色の設定.cls{ background-color : skyblue }
• -background-image　 背景画像の設定.cls{ background-image : url(https://jpn-lab.com/image/dot_bk.png)) }
• -background-origin　 背景画像の表示位置の基点.cls{ background-origin : padding-box }
• -background-position　 背景画像の表示位置の設定.cls{ background-position : center center }
• -background-repeat　 背景画像の繰返し設定.cls{ background-repeat : repeat }
• -background-size　 背景画像の表示サイズ設定.cls{ background-size : contain }
• -border　 罫線の設定.cls{ border : 1px soid #FFDA00 }
• -border-color　 罫線の色設定.cls{ border-color : red }
• -border-image　 画像を使った罫線の表示.cls{ border-image : url(https://jpn-lab.com/image/dot_bk.png) }
• -border-image-outset　 ボーダーイメージエリアを広げる.cls{ border-image-outset : 30px }
• -border-image-repeat　 画像ボーダーの繰り返し方法.cls{ border-image-repeat : repeat }
• -border-image-slice　 画像のボーダー使用範囲.cls{ border-image-slice : 7 12 14 5 }
• -border-image-source　 ボーダーの使用画像ファイル.cls{ border-image-source : url(https://jpn-lab.com/image/dot_bk.png) }
• -border-image-width　 画像ボーダーの太さ.cls{ border-image-width : 20px }
• -border-radius　 角丸の設定.cls{ border-radius : 5px 5px 5px 5px }
• -border-style　 罫線のスタイル設定.cls{ border-style : dashed }
• -border-width　 罫線の太さ設定.cls{ border-width : 5px }
• -box-decoration-break　 要素の断片が複数の行、段、ページに渡る場合に描画する方法を指定.cls{ box-decoration-break : clone }
• -box-shadow　 ボックスの影.cls{ box-shadow : 2px 2px 10px #000 }
• -image-rendering　 画像の拡大縮小アルゴリズムの設定.cls{ image-rendering : pixelated }
• -object-fit　 ボックスに合わせた画像サイズの調節.cls{ object-fit : contain }
• -object-position　 ボックス内での画像の表示位置.cls{ object-position : 50% 50% }
• -break-after　 マルチカラムの改段（ボックス後）.cls{ break-after : avoid-column }
• -break-before　 マルチカラムの改段（ボックス前）.cls{ break-before : column }
• -break-inside　 マルチカラムの改段（ボックス内）.cls{ break-inside : avoid }
• -column-count　 マルチカラムのカラムの数.cls{ column-count : 4 }
• -column-fill　 マルチカラムのカラムのバランス.cls{ column-fill : balance }
• -column-gap　 マルチカラムのカラムの間隔.cls{ column-gap : 0.05 }
• -column-rule　 マルチカラムの区切り線.cls{ column-rule : solid 5px red }
• -column-rule-color　 マルチカラムの区切り線の色.cls{ column-rule-color : red }
• -column-rule-style　 マルチカラムの区切り線のスタイル.cls{ column-rule-style : solid }
• -column-rule-width　 マルチカラムの区切り線の太さ.cls{ column-rule-width : 10px }
• -column-span　 マルチカラムのカラムをまたがって表示.cls{ column-span : all }
• -column-width　 マルチカラムのカラムの横幅.cls{ column-width : 0.25 }
• -columns　 マルチカラムのカラムの数と横幅.cls{ columns : 4 25% }
• -speak　 読み上げ方法.cls{ speak : digits }
• -speak-as　 音声の読上げ方法.cls{ speak-as : numbers }
• -backface-visibility　 裏面を可視化するか否か.cls{ backface-visibility : visible }
• -perspective　 子要素の奥行きの指定.cls{ perspective : 200px }
• -perspective-origin　 子要素の奥行きのx軸・y軸方向の位置.cls{ perspective-origin : 150% 300% }
• -transform　 要素の変形.cls{ transform : translate(30px, 20px) rotate(20deg); }
• -transform-origin　 要素変形の起点.cls{ transform-origin : 25% 50% }
• -transform-style　 要素重なり時の３D表示.cls{ transform-style : preserve-3d }
• -transition　 トランジションの設定.cls{ transition : opacity 0.2s ease-out; }
• -transition-delay　 トランジションのディレイ.cls{ transition-delay : 1s }
• -transition-duration　 トランジションの再生時間.cls{ transition-duration : 0.2s }
• -transition-property　 トランジション対象のCSSプロパティ.cls{ transition-property : transform }
• -transition-timing-function　 トランジションのタイミング・進行割合を指定.cls{ transition-timing-function : ease-in-out }
• -animation　 アニメーションの設定 ( -name, -duration, -timing-function, -delay… ).cls{ animation : .5s linear 1s 1 alternate slidein; }
• -animation-delay　 アニメーションのディレイ.cls{ animation-delay : 2s }
• -animation-direction　 アニメーションの方向.cls{ animation-direction : alternate }
• -animation-duration　 アニメーションの再生時間.cls{ animation-duration : 5s }
• -animation-fill-mode　 アニメーションの再生前後のスタイル.cls{ animation-fill-mode : forwards }
• -animation-iteration-count　 アニメーションの繰り返し.cls{ animation-iteration-count : infinite }
• -animation-name　 アニメーションのキーフレーム名.cls{ animation-name : go_go }
• -animation-play-state　 アニメーションの再生と一時停止.cls{ animation-play-state : running }
• -animation-timing-function　 アニメーションのタイミング・進行割合を指定.cls{ animation-timing-function : ease-out }
• -align-content　 コンテナ内の行の揃え方.cls{ align-content : baseline }
• -align-items　 コンテナ内の垂直方向の揃え方.cls{ align-items : end }
• -align-self　 flexコンテナの垂直(縦)位置を個別に指定.cls{ align-self : self-start }
• -flex　 flex-grow,flex-shrink,flex-basisをまとめて指定.cls{ flex : 1 1 100px }
• -flex-basis　 flexboxアイテムの幅を調整.cls{ flex-basis : 200px }
• -flex-direction　 flexboxアイテムの配置（縦/横）.cls{ flex-direction : row }
• -flex-flow　 flex-directionとflex-wrapまとめて指定.cls{ flex-flow : column wrap }
• -flex-grow　 flexboxアイテムの自動幅調整（伸ばす）.cls{ flex-grow : 3 }
• -flex-shrink　 flexboxアイテムの自動幅調整（縮む）.cls{ flex-shrink : 0 }
• -flex-wrap　 flexboxアイテムの折り返し.cls{ flex-wrap : wrap }
• -justify-content　 コンテナ内の水平方向の揃え方.cls{ justify-content : space-between }
• -order　 flexコンテナ内の並び順.cls{ order : 4 }
• -font　 文字のデザイン.cls{ font : bold 1.2em serif }
• -font-family　 フォント.cls{ font-family : "Fira Sans", sans-serif; }
• -font-feature-settings　 OpenTypeフォントの字形の切替え.cls{ font-feature-settings : tnum }
• -font-kerning　 文字間の設定( auto, normal, none ).cls{ font-kerning : none }
• -font-language-override　 言語を一時的に変更.cls{ font-language-override : "ENG" }
• -font-size　 文字の大きさ.cls{ font-size : 16px }
• -font-stretch　 フォントの形状（幅広・幅狭）.cls{ font-stretch : 2 }
• -font-style　 斜体のスタイル.cls{ font-style : italic }
• -font-variant　 フォントの変換ルール.cls{ font-variant : small-caps proportional-nums slashed-zero; }
• -font-variant-caps　 英大文字での表示制御.cls{ font-variant-caps : all-small-caps }
• -font-variant-east-asian　 漢字の表示指定.cls{ font-variant-east-asian : traditional }
• -font-variant-ligatures　 合字の制御指定.cls{ font-variant-ligatures : historical-ligatures }
• -font-variant-numeric　 数値の表示形式指定.cls{ font-variant-numeric : tabular-nums }
• -font-weight　 文字の太さ.cls{ font-weight : 600 }
• -image-orientation　 画像の回転角度(回転したカメラで撮影された画像の方向を修正するため).cls{ image-orientation : }
• -orphans　 前ページの末尾に最小限必要な行数.cls{ orphans : 2 }
• -page　 特定の名前を付けてページを定義(@page に指定したページ名).cls{ page : my_name }
• -size　 ページサイズを定義.cls{ size : a4 }
• -hyphens　 ハイフネーション(単語途中の改行指定)の利用.cls{ hyphens : none }
• -letter-spacing　 文字の間隔.cls{ letter-spacing : 0.1em }
• -line-break　 禁則処理のルール(改行位置指定).cls{ line-break : anywhere }
• -overflow-wrap　 分割できない文字列の途中で改行を入れるか否か.cls{ overflow-wrap : break-word }
• -tab-size　 タブ文字 (U+0008) の幅を指定.cls{ tab-size : 8em }
• -text-align　 横（水平）方向の文字位置.cls{ text-align : justify }
• -text-align-last　 行揃え.cls{ text-align-last : end }
• -text-decoration　 文字の装飾線をまとめて指定.cls{ text-decoration : wavy red underline }
• -text-decoration-color　 文字の装飾線の色.cls{ text-decoration-color : red }
• -text-decoration-line　 文字の装飾線の位置を指定.cls{ text-decoration-line : overline }
• -text-decoration-skip-ink　 文字と装飾線を重ねるか否か.cls{ text-decoration-skip-ink : auto }
• -text-decoration-style　 文字の装飾線のスタイル.cls{ text-decoration-style : dotted }
• -text-emphasis　 圏点スタイルをまとめて指定.cls{ text-emphasis : open circle #000 }
• -text-emphasis-color　 圏点の色を指定.cls{ text-emphasis-color : red }
• -text-emphasis-position　 圏点の位置を指定.cls{ text-emphasis-position : over }
• -text-emphasis-style　 圏点のスタイルを指定.cls{ text-emphasis-style : filled circle }
• -text-indent　 １行目のインデント.cls{ text-indent : 1em }
• -text-justify　 両端揃えの調節方法.cls{ text-justify : inter-word }
• -text-shadow　 文字の影付け.cls{ text-shadow : 2px -2px 5px #000 }
• -text-transform　 字形の変換.cls{ text-transform : uppercase }
• -text-underline-position　 文字下線の位置を指定.cls{ text-underline-position : under }
• -white-space　 改行コード・タブ・スペースの表示方法.cls{ white-space : nowrap }
• -word-break　 自動改行のルール.cls{ word-break : break-all }
• -word-spacing　 単語の間隔.cls{ word-spacing : 1.5em }
• -box-sizing　 ボックスの大きさの算出方法.cls{ box-sizing : border-box }
• -cursor　 カーソルの指定.cls{ cursor : pointer }
• -outline　 アウトラインの一括設定( width, stlye, color ).cls{ outline : red solid red }
• -outline-color　 アウトラインの色.cls{ outline-color : green }
• -outline-offset　 アウトラインのオフセット.cls{ outline-offset : 5px }
• -outline-style　 アウトラインのスタイル.cls{ outline-style : dashed }
• -outline-width　 アウトラインの太さ.cls{ outline-width : 10px }
• -resize　 ボックスのリサイズ.cls{ resize : both }
• -text-overflow　 オーバーフローしたテキストの省略表示.cls{ text-overflow : ellipsis }
• -direction　 書字方向( rtl, ltr ).cls{ direction : rtl }
• -text-combine-upright　 一文字分の空間に挿入する文字の組み合わせを設定.cls{ text-combine-upright : all }
• -text-orientation　 行内のテキストの向きを設定。.cls{ text-orientation : upright }
• -writing-mode　 縦書きか横書きかを設定.cls{ writing-mode : mixed }
• -grid　 グリッドコンテナをまとめて指定.cls{ grid : }
• -grid-area　 gridのstart,endをまとめて指定.cls{ grid-area : 2 / 1 / 2 / 4 }
• -grid-auto-columns　 自動生成されるグリッドアイテムの幅.cls{ grid-auto-columns : max-content }
• -grid-auto-flow　 グリッドアイテムの自動配置方法.cls{ grid-auto-flow : row }
• -grid-auto-rows　 自動生成されるグリッドアイテムの高さ.cls{ grid-auto-rows : 50px }
• -grid-column　 グリッドアイテムの列開始/終了をまとめて指定.cls{ grid-column : 1 / span 2 }
• -grid-column-end　 グリッドアイテムの列終了位置.cls{ grid-column-end : 3 }
• -grid-column-start　 グリッドアイテムの列開始位置.cls{ grid-column-start : 1 }
• -grid-gap　 グリッドアイテムの余白をまとめて指定.cls{ grid-gap : 10px 10px }
• -grid-gap-columns　 グリッドアイテム列間の余白.cls{ grid-gap-columns : 20px }
• -grid-gap-rows　 グリッドアイテム行間の余白.cls{ grid-gap-rows : 20px }
• -grid-row　 グリッドアイテムの行開始/終了をまとめて指定.cls{ grid-row : 1 / span 2 }
• -grid-row-end　 グリッドアイテムの行終了位置.cls{ grid-row-end : 3 }
• -grid-row-start　 グリッドアイテムの行開始位置.cls{ grid-row-start : 1 }
• -grid-template　 grid-templateをまとめて指定.cls{ grid-template : 10px 10px }
• -grid-template-areas　 グリッドコンテナの名前を指定.cls{ grid-template-areas : ”a a b” }
• -grid-template-columns　 グリッドコンテナの幅を指定.cls{ grid-template-columns : 100px }
• -grid-template-rows　 グリッドコンテナの高さを指定.cls{ grid-template-rows : 20px }
• -list-style　 リストマークの一括指定.cls{ list-style : circle inside }
• -list-style-image　 リストマークの画像.cls{ list-style-image : url(https://jpn-lab.com/image/dot_bk.png); }
• -list-style-position　 リストマークの表示位置.cls{ list-style-position : outside }
• -list-style-type　 リストマークの種類.cls{ list-style-type : cjk-ideographic }
• -bottom　 基点の下辺からの距離.cls{ bottom : 10px }
• -left　 基点の左辺からの距離.cls{ left : 0.5 }
• -position　 配置方法.cls{ position : 10vh }
• -right　 基点の右辺からの距離.cls{ right : 0 }
• -top　 基点の上辺からの距離.cls{ top : 5vw }
• -z-index　 ボックスの重なり順.cls{ z-index : 999 }
• -border-collapse　 テーブルの罫線の表示方法.cls{ border-collapse : }
• -border-spacing　 テーブルの罫線の間隔.cls{ border-spacing : }
• -caption-side　 テーブルのキャプションの表示位置.cls{ caption-side : }
• -empty-cells　 空セルの表示.cls{ empty-cells : }
• -table-layout　 テーブルの表示方法.cls{ table-layout : }
• -clear　 回り込み＜float＞の解除.cls{ clear : both }
• -display　 ボックスの種類.cls{ display : inline-block }
• -float　 配置と回り込み.cls{ float : left }
• -height　 高さ.cls{ height : 100px }
• -margin　 マージン＜外側の余白＞の設定.cls{ margin : 5px 5px 0 10px }
• -max-height　 高さの最大値.cls{ max-height : 100vh }
• -max-width　 横幅の最大値.cls{ max-width : 100vw }
• -min-height　 高さの最小値.cls{ min-height : calc(100vh / 3) }
• -min-width　 横幅の最小値.cls{ min-width : 100px }
• -overflow　 オーバーフローしたコンテンツの表示( x, y ).cls{ overflow : hidden hidden }
• -overflow-x　 横方向にオーバーしたコンテンツの表示.cls{ overflow-x : scroll }
• -overflow-y　 縦方向にオーバーしたコンテンツの表示.cls{ overflow-y : overlay }
• -padding　 パディング＜内側の余白＞の大きさ.cls{ padding : 3px 4em 10% 5px }
• -visibility　 表示の有無.cls{ visibility : hidden }
• -width　 横幅.cls{ width : 1 }
• -content　 コンテンツの挿入・置換.cls{ content : ”●” }
• -counter-increment　 カウンターの増減値.cls{ counter-increment : my-counter -1 }
• -counter-reset　 カウンターの初期値.cls{ counter-reset : my-counter 5 }
• -counter-set　 カウンターの値を設定.cls{ counter-set : my-counter 3 }
• -quotes　 引用符.cls{ quotes : auto }
• -vertical-align　 縦＜垂直＞方向の文字位置.cls{ vertical-align : baseline }
• -ruby-position　 ルビの表示位置.cls{ ruby-position : after }