このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

CSS3プロパティ一覧

CSS辞書
CSS3のプロパティの一覧
ABC順CSS3プロパティ

ボックスのレイアウト

ボックスのレイアウト

プロパティ 説明
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:

その他

プロパティ 説明
content:
all: スタイルをリセットする
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク