CSS3プロパティ｜CSS－havin' a coffee break｜珈琲とウェブデザイン

＃

ボックスのレイアウト

プロパティ	説明
clear:
float:
bottom:
clip:
left:
position:
right:
top:
z-index:
visibility:

整列

プロパティ	説明
align-content:
justify-content:
place-content:
align-self:
justify-self:
place-self:
align-items:
justify-items:
place-items:
row-gap:
column-gap:
gap:

マルチカラム・レイアウト

プロパティ	説明
column-width:	段組みの段の横幅を指定する
column-count:	段組みの段数を指定する
columns:	段組みを指定する
column-gap:
column-rule-color:	段組みの罫線の色を指定する
column-rule-style:	段組みの罫線の見た目を指定する
column-rule-width:	段組みの罫線の太さを指定する
column-rule:	段組みの罫線を指定する
column-span:	要素を複数の段にまたがらせるかどうかを指定する
column-fill:	段組みのコンテンツの割り振りを指定する

フレキシブル・ボックス・レイアウト

プロパティ	説明
flex-direction:	フレックス・アイテムの配列順序を指定する
flex-wrap:	フレックス・アイテムを複数行に配列かを指定する
flex-flow:	フレックス・アイテムの配列方法を指定する
order:
flex:	フレックス・アイテムの寸法を指定する
flex-grow:	フレックス・アイテムの伸長率を指定する
flex-shrink:	フレックス・アイテムの縮小率を指定する
flex-basis:	フレックス・アイテムの初期寸法を指定する
justify-content:
align-items:
align-self:
align-content:

グリッド・レイアウト

プロパティ	説明
grid-template-rows:
grid-template-columns:
grid-template-areas:
grid-template:
grid-auto-rows:
grid-auto-columns:
grid-auto-flow:
grid:
grid-row-start:
grid-column-start:
grid-row-end:
grid-column-end:
grid-row:
grid-column:
grid-area

＃

ボックスの寸法

プロパティ	説明
width:	横幅を指定する
height:	高さを指定する
max-height:	最大の高さを指定する
max-width:	最大の横幅を指定する
min-height:	最小の高さを指定する
min-width:	最小の横幅を指定する
box-sizing:	サイズの計算方法を指定する
aspect-ratio:	アスペクト比を指定する
contain-intrinsic-width:
contain-intrinsic-height:
contain-intrinsic-block-size:
contain-intrinsic-inline-size:
min-intrinsic-sizing:
resize:	ユーザーによるサイズの変更の可否を指定する

＃

ボックスの見た目

プロパティ	説明
display:
margin-top:	境界線の外側の上の余白を指定する
margin-right:	境界線の外側の右の余白を指定する
margin-bottom:	境界線の外側の下の余白を指定する
margin-left:	境界線の外側の左の余白を指定する
margin:	境界線の外側の余白を指定する
padding-top:	境界線の内側の上の余白を指定する
padding-right:	境界線の内側の右の余白を指定する
padding-bottom:	境界線の内側の下の余白を指定する
padding-left:	境界線の内側の左の余白を指定する
padding:	境界線の内側の余白を指定する

ボックス装飾

プロパティ	説明
background-color:	背景色を指定する
background-image:	背景画像を指定する
background-repeat:	背景画像の繰り返しを指定する
background-attachment:	背景画像を固定するかを指定する
background-position:	背景画像の表示位置を指定する
background-clip:	背景の描画領域を指定する
background-origin:	背景画像の配置領域を指定する
background-size:	背景画像の大きさを指定する
background:	背景を指定する
border-color:	境界線の色を指定する
border-top-color:	上辺の境界線の色を指定する
border-right-color:	右辺の境界線の色を指定する
border-bottom-color:	下辺の境界線の色を指定する
border-left-color:	左辺の境界線の色を指定する
border-top-style:	上辺の境界線の見た目を指定する
border-right-style:	右辺の境界線の見た目を指定する
border-bottom-style:	下辺の境界線の見た目を指定する
border-left-style:	左辺の境界線の見た目を指定する
border-style:	境界線の見た目を指定する
border-top-width:	上辺の境界線の太さを指定する
border-right-width:	右辺の境界線の太さを指定する
border-bottom-width:	下辺の境界線の太さを指定する
border-left-width:	左辺の境界線の太さを指定する
border-width:	境界線の太さを指定する
border-top:	上辺の境界線を指定する
border-right:	右辺の境界線を指定する
border-bottom:	下辺の境界線を指定する
border-left:	左辺の境界線を指定する
border:	境界線を指定する
border-top-left-radius:	左上の角丸を指定する
border-top-right-radius:	右上の角丸を指定する
border-bottom-right-radius:	右下の角丸を指定する
border-bottom-left-radius:	左下の角丸を指定する
border-radius:	角丸を指定する
border-image-source:	境界線として使用する画像を指定する
border-image-slice:	境界線として使用する画像の分割方法を指定する
border-image-width:	画像による境界線の太さを指定する
border-image-outset:	画像による境界線の配置領域の大きさを指定する
border-image-repeat:	画像による境界線の繰り返し方法を指定する
border-image:	画像による境界線を指定する
box-shadow:	要素の影を指定する

＃

はみ出しと断片化

プロパティ	説明
overflow-x:	水平方向にはみ出すコンテンツの処理を指定する
overflow-y:	垂直方向にはみ出すコンテンツの処理を指定する
overflow:	はみ出すコンテンツの処理を指定する
overflow-clip-margin:
overflow-block:	ブロック軸方向にはみ出すコンテンツの処理を指定する
overflow-inline:	インライン軸方向にはみ出すコンテンツの処理を指定する
scrollbar-gutter:
text-overflow:	はみ出すコンテンツに省略記号を付与する
block-ellipsis:
line-clamp:
max-lines:
continue:
break-before:
break-after:
break-inside:
orphans:
widows:
page-break-after:
page-break-before:
page-break-inside:
box-decoration-break:

＃

色

プロパティ	説明
color:	テキストの文字色を指定する
opacity:	透明度を指定する
filter:	グラフィック・フィルターを指定する
flood-color:
flood-opacity:
color-interpolation-filters:
backdrop-filter:	要素の背後に適用されるグラフィック・フィルターを指定する
background-blend-mode:
mix-blend-mode:
isolation:
color-scheme:	対応するカラー・スキームを示す
forced-color-adjust:
print-color-adjust:
color-adjust:

＃

テキストのレイアウト

プロパティ	説明
direction:
unicode-bidi:
writing-mode:	書字方向が横書きか縦書きかを指定する
text-orientation:	縦書きのテキストの文字の向きを指定する
text-combine-upright:	縦書きのテキストの縦中横を指定する
dominant-baseline:
vertical-align:
baseline-source:
alignment-baseline:
baseline-shift:
line-height:	行の高さを指定する
text-edge:
leading-trim:
inline-sizing:
initial-letter:
initial-letter-align:
initial-letter-wrap:
text-transform:	テキストを大文字や小文字に置き換える
word-boundary-detection:
word-boundary-expansion:
white-space:	ホワイトスペースの処理と行の折り返しの可否を指定する
text-wrap:	行の折り返しを指定する
wrap-before:
wrap-after:
wrap-inside:
tab-size:
text-space-collapse:	ホワイトスペースの処理方法を指定する
text-space-trim:
word-break:	単語途中での改行を許容するかを指定する
line-break:	改行規則の適用方法を指定する
hyphens:	ハイフネーションを行うかを指定する
overflow-wrap:	要素からはみ出してしまう単語を途中で改行するかを指定する
hyphenate-character:
hyphenate-limit-zone:
hyphenate-limit-chars:
hyphenate-limit-lines:
hyphenate-limit-last:
hanging-punctuation:
letter-spacing:	文字の間隔を調整する
text-align:	文字揃えを指定する
text-align-all:	最終行以外の文字揃えを指定する
text-align-last:	最終行の文字揃えを指定する
text-group-align:
text-justify:	両端揃えの方法を指定する
line-padding:
text-spacing:
text-indent:	字下げを指定する
word-spacing:	単語間の間隔を調整する
shape-outside:
shape-image-threshold:
shape-margin:

＃

テキストの見た目

フォント

プロパティ	説明
font:	フォントを指定する
font-family:	文字のフォントを指定する
font-feature-settings:
font-kerning:
font-language-override:
font-size:	フォントサイズを指定する
font-size-adjust:	文字の大きさを調整する
font-stretch:
font-style:	文字をイタリック体と斜体にする
font-synthesis-weight:	太字の合成を許可する
font-synthesis-style:	斜体の合成を許可する
font-synthesis-small-caps:	スモールキャピタルの生成を許可する
font-synthesis:	太字と斜体の合成を許可する
font-variant:
font-variant-alternates:
font-variant-caps:
font-variant-east-asian:
font-variant-ligatures:
font-variant-numeric:
font-variant-position:
font-weight:	文字の太さを指定する

テキスト装飾

プロパティ	説明
text-decoration-line:	テキストに引く線の種類を指定する
text-decoration-style:	テキストに引く線の見た目を指定する
text-decoration-color:	テキストに引く線の色を指定する
text-decoration-thickness:	テキストに引く線の太さを指定する
text-decoration:	テキストに引く線を指定する
text-underline-position:
text-underline-offset:
text-decoration-skip:
text-decoration-skip-self:
text-decoration-skip-box:
text-decoration-skip-inset:
text-decoration-skip-spaces:
text-decoration-skip-ink:
text-emphasis-style:	圏点の見た目を指定する
text-emphasis-color:	圏点の見た色を指定する
text-emphasis:	圏点を付加する
text-emphasis-position:	圏点の位置を指定する
text-emphasis-skip:
text-shadow:	テキストの影を指定する
quotes:

＃

置換要素と画像

プロパティ	説明
object-fit:	置換要素のコンテンツのはめ込み方を指定する
object-position:	置換要素のコンテンツの配置位置を指定する
image-orientation:
image-rendering:	拡大・縮小時の画像処理の方法を指定する

マスキング

プロパティ	説明
clip-path:
clip-rule:
mask-image:
mask-mode:
mask-repeat:
mask-position:
mask-clip:
mask-origin:
mask-size:
mask-composite:
mask:
mask-type:

＃

テーブル

プロパティ	説明
border-collapse:	セルの境界線を共有するかを指定する
border-spacing:	セルの境界線の間隔を指定する
caption-side:
empty-cells:	空白セルの表示を指定する
table-layout:

＃

プロパティ	説明
list-style:	リスト・マーカーを指定する
list-style-image:	リスト・マーカー用の画像を指定する
list-style-position:	リスト・マーカーの位置を指定する
list-style-type:	リスト・マーカーの種類を指定する
marker-side:
counter-increment:
counter-reset:
counter-set:

＃

変形

プロパティ	説明
transform:	要素を変形
transform-origin:	変形の原点を指定する
transform-box:	変形の基準となるボックスを指定する
translate:
scale:
rotate:
transform-style:	子要素を三次元空間に配置
perspective:	視点までの距離を指定する
perspective-origin:	視点の位置を指定する
backface-visibility:	要素の裏面を非表示にする

＃

アニメーション

遷移効果

プロパティ	説明
transition-property:	遷移効果の対象プロパティを指定する
transition-duration:	遷移効果の所要時間を指定する
transition-timing-function:	遷移効果のイージングを指定する
transition-delay:	遷移効果の遅延時間を指定する
transition:	遷移効果を指定する

アニメーション

プロパティ	説明
animation-name:	アニメーションのキーフレームを指定する
animation-duration:	アニメーションの所要時間を指定する
animation-timing-function:	アニメーションのイージングの方法を指定する
animation-iteration-count:	アニメーションの繰り返しを指定する
animation-direction:	アニメーションの再生方向を指定する
animation-play-state:	アニメーションを一時停止する
animation-delay:	アニメーションの遅延時間を指定する
animation-fill-mode:	アニメーションのスタイルを実行前後も適用
animation:	アニメーションを指定する

＃

インターフェース

プロパティ	説明
outline:	輪郭線を指定する
outline-width:	輪郭線の太さを指定する
outline-style:	輪郭線の見た目を指定する
outline-color:	輪郭線の色を指定する
outline-offset:	要素と輪郭線の距離を指定する
cursor:
caret-color:
caret-shape:
caret:
nav-up:
nav-right:
nav-down:
nav-left:
accent-color:	強調表示色を指定する
appearance:
pointer-events:
touch-action:
scroll-behavior:	スムーズスクロールを指定する

＃

音声

プロパティ	説明
cue:
cue-after:
cue-before:
pause:
pause-after:
pause-before:
rest:
rest-after:
rest-before:
speak:
speak-as:
voice-balance:
voice-duration:
voice-family:
voice-pitch:
voice-range:
voice-rate:
voice-stress:
voice-volume: