CSS リファレンス

❮ ホームへ 次のリファレンス ❯

Note W3Schools の CSS リファレンスは、主要な全ブラウザで正式にテストをしています。


CSS プロパティ

CSS プロパティグループ


"CSS"の欄は、プロパティが定義された CSS のバージョン(CSS1、CSS2、CSS3)を表します。

色 プロパティ

プロパティ 説明 CSS
color テキストの色を設定します 1
opacity 要素の不透明度を設定します 3

背景とボーダープロパティ

プロパティ 説明 CSS
background 1回の宣言で全ての background プロパティを設定するショーハンドプロパティ 1
background-attachment 背景イメージを固定するか、スクロールするかを設定します 1
background-blend-mode 各背景レイヤ(カラー/画像)の描画モードを指定します
background-color 要素の背景色を設定します 1
background-image 要素に1つ以上の背景画像を指定します 1
background-position 背景画像の位置を指定します 1
background-repeat 背景画像の繰返し方法を設定します 1
background-clip 背景の描画エリアを指定します 3
background-origin 背景画像をどこに配置するかを指定します 3
background-size 背景画像のサイズを指定します 3
border 1回の宣言で全ての border プロパティを設定します 1
border-bottom 1回の宣言で全ての下ボーダープロパティを設定します 1
border-bottom-color Sets the color of the bottom border
border-bottom-left-radius 左下コーナーのボーダーの形状を定義します 3
border-bottom-right-radius 右下コーナーのボーダーの形状を定義します 3
border-bottom-style 下ボーダーのスタイルを設定します 1
border-bottom-width 下ボーダーの幅を設定します 1
border-color 4辺のボーダーの色を設定します 1
border-image 全ての border-image-* プロパティを設定するためのショートハンドプロパティ 3
border-image-outset ボーダーボックスを越えて拡大するボーダー画像エリアの量を指定します 3
border-image-repeat ボーダー画像を、繰り返すか、整数回繰り返すか、引伸ばすかどうかを指定します 3
border-image-slice ボーダー画像のスライス方法を指定します 3
border-image-source ボーダーとして使用する画像へのパスを指定します 3
border-image-width 画像ボーダーの幅を指定します 3
border-left 1回の宣言で全ての左ボーダープロパティを設定します 1
border-left-color 左ボーダーの色を設定します 1
border-left-style 左ボーダーのスタイルを設定します 1
border-left-width 左ボーダーの幅を設定します 1
border-radius 全ての border-*-radius プロパティを設定するためのショートハンドプロパティ 3
border-right 1回の宣言で全ての右ボーダープロパティを設定します 1
border-right-color 右ボーダーの色を設定します 1
border-right-style 右ボーダーのスタイルを設定します 1
border-right-width 右ボーダーの幅を設定します 1
border-style 4つのボーダーのスタイルを設定しますs 1
border-top 1回の宣言で全ての上ボーダープロパティを設定します 1
border-top-color 上ボーダーの色を設定します 1
border-top-left-radius 左上コーナーのボーダーの形状を定義します 3
border-top-right-radius 右上コーナーのボーダーの形状を定義します 3
border-top-style 上ボーダーのスタイルを設定します 1
border-top-width 上ボーダーの幅を設定します 1
border-width 4つのボーダーの幅を設定しますs 1
box-decoration-break 改ページ時の要素、または改行時のインライン要素の、背景とボーダーの振る舞いを設定します 3
box-shadow ボックスに1つ以上の影を設定します 3

基本的な Box プロパティ

プロパティ 説明 CSS
bottom 配置した要素の下辺の位置を指定します 2
clear 他のフローティング要素を許容しない要素のサイドを指定します 1
clip 絶対配置された要素を切り抜きます 2
display 特定の HTML 要素をどのように表示するかを指定します 1
float ボックスをフロートするかどうかを指定します 1
height 要素の高さを設定します 1
left 配置した要素の左辺の位置を指定します 2
margin 1回の宣言で全ての margin プロパティを設定します 1
margin-bottom 要素の下マージンを設定します 1
margin-left 要素の左マージンを設定します 1
margin-right 要素の右マージンを設定します 1
margin-top 要素の上マージンを設定します 1
max-height 要素の最大の高さを設定します 2
max-width 要素の最大の幅を設定します 2
min-height 要素の最小の高さを設定します 2
min-width 要素の最小の幅を設定します 2
overflow
コンテンツが要素のボックスをオーバフローした場合どうするかを指定します 2
overflow-x 要素のコンテンツエリアをオーバフローした場合、コンテンツの左/右の端をクリップするかどうかを指定します 3
overflow-y 要素のコンテンツエリアをオーバフローした場合、コンテンツの上/下の端をクリップするかどうかを指定します 3
padding 1回の宣言で全てのパディングプロパティを設定します 1
padding-bottom 要素の下パディングを設定します 1
padding-left 要素の左パディングを設定します 1
padding-right 要素の右パディングを設定します 1
padding-top 要素の上パディングを設定します 1
position 要素の配置方法のタイプを指定します(static、relative、absolute または fixed) 2
right 配置した要素の右辺の位置を指定します 2
top 配置した要素の上辺の位置を指定します 2
visibility 要素を表示するかどうかを指定します 2
width 要素の幅を設定します 1
vertical-align 要素の縦位置揃えを設定します 1
z-index 配置した要素のスタック順序を設定します 2

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

プロパティ 説明 CSS
align-content 項目が利用可能な全てのスペースを使用しない場合、フレキシブル・コンテナの内部の行間の配置を指定します 3
align-items フレキシブル・コンテナの内部の項目の配置を指定します 3
align-self フレキシブル・コンテナ内部の選択した項目の配置を指定します 3
flex 残り部分を基準に項目の長さを指定します 3
flex-basis フレキシブル項目の長さの初期値を指定します 3
flex-direction フレキシブル項目の方向を指定します 3
flex-flow flex-direction と flex-wrap プロパティのショーハンドプロパティ 3
flex-grow アイテムが残りに比べてどれくらい引伸ばすか指定します 3
flex-shrink アイテムが残りに比べてどれくらい縮小するか指定します 3
flex-wrap フレキシブル項目をラップすべきかどうかを指定します 3
justify-content 項目が利用可能なスペースを全て使用しない場合、フレキシブル・コンテナの内部のアイテム間の配置を指定します 3
order 残りの部分と相対的にフレキシブル項目の順序を設定します 3

テキスト・プロパティ

プロパティ 説明 CSS
hanging-punctuation 句読点(約物か?)を行ボックスの外側に配置できるかどうかを指定します(禁則処理) 3
hyphens 段落のレイアウトを改善するために単語を分割する方法を設定します 3
letter-spacing テキストの文字間のスペースを増分または減分します 1
line-break 禁則処理のレベルを指定します 3
line-height 行の高さを設定します 1
overflow-wrap 包含ボックスにフィットされるには文字列が長すぎる場合、オーバフローを防止するために、 単語内で改行できるかどうかをブラウザに指定します 3
tab-size タブ文字の長さを指定します 3
text-align テキストの横の配置を指定します 1
text-align-last text-align が "justify"(均等割り付け)の場合、強制改行前のブロックの最終行、 または行の右側がどのように配置されるかを記述します 3
text-combine-upright 単独の文字スペースの中へ複数文字の結合を指定します(訳注:縦書き内の横書きの字組み。縦中横ともいう) 3
text-indent テキスト・ブロックの先頭行のインデントを指定します 1
text-justify text-align が"justify"(均等割り付け)の場合、均等割り付けのメソッドを指定します 3
text-transform テキストの大文字表示・小文字表示を制御します 1
white-space 要素内の空白の取扱い方法を指定します 1
word-break 非 CJK 文字(中国語:Chinese、日本語:Japanese、韓国語:Korean)の改行ルールを指定します 3
word-spacing テキスト内の単語間のスペースを増減します 1
word-wrap 長い非改行の単語を改行して次の行に回り込むことを可能にします 3

テキスト装飾プロパティ

プロパティ 説明 CSS
text-decoration テキストに装飾の追加を指定します 1
text-decoration-color 線の色を指定します 3
text-decoration-line 線の位置を指定します 3
text-decoration-style 線の種類を指定します 3
text-shadow テキストに影を付加します 3
text-underline-position text-decoration プロパティを使用して設定したアンダーラインの位置を指定します 3

フォント・プロパティ

プロパティ 説明 CSS
@font-face 「ウェブセーフ」なフォントの他に、web サイトがフォントをダウンロードし、使用することを可能にする規則 3
@font-feature-values Allows authors to use a common name in font-variant-alternate for feature activated differently in OpenType 3
font 1回の宣言で全ての font プロパティを設定します 1
font-family テキストのフォント・ファミリーを指定します 1
font-feature-settings OpenType フォントで高度なタイポグラフィ機能の制御を可能にします 3
font-kerning カーニング情報(字間値)の利用を制御します 3
font-language-override 書体における言語固有のグリフの使用を制御します 3
font-size テキストのフォント・サイズを指定します 1
font-size-adjust フォントのフォールバックが発生したときにテキストの読みやすさを保持します 3
font-stretch フォントフェースの形状をnormal(通常)、condensed(幅狭)、expanded(幅広)から選択します 3
font-style テキストのフォント・スタイルを指定します 1
font-synthesis 欠落した書体(bold または italic)が、ブラウザによって合成することができるかを制御します 3
font-variant テキストをスモール・キャップ・フォントで表示するかどうかを指定します 1
font-variant-alternates @font-feature-values で定義された代替名に関連付けられた代替グリフの使用を制御します 3
font-variant-caps 大文字の代替グリフの使用を制御します 3
font-variant-east-asian 東アジア文字(例えば日本語や中国語)の代替グリフの使用を制御します 3
font-variant-ligatures 合字やコンテキストが、それが適用される要素のテキストコンテンツでの使用を制御します(?) 3
font-variant-numeric 数字、分数、序数マーカ(1st,2nd,3rd の st nd rd などを上付き小文字で表示)の代替グリフの使用を制御します 3
font-variant-position フォントのベースラインより上付きまたは下付きとして配置する小さいサイズの代替グリフの使用を制御します 3
font-weight フォントの太さを指定します 1

書字モードプロパティ

プロパティ 説明 CSS
direction テキストの方向/書字方向を指定します 2
text-orientation 行内のテキストの方向を定義します 3
text-combine-upright 単独の文字スペースの中へ複数文字の結合を指定します(訳注:縦書き内の横書きの字組み。縦中横ともいう) 3
unicode-bidi 同じ文書に複数の言語をサポートするため、テキストをオーバーライドする必要があるかどうかを設定するか、または返すために directionプロパティと一緒に使用します 2
writing-mode 3

テーブル・プロパティ

プロパティ 説明 CSS
border-collapse テーブルのボーダーを重ねるかどうかを指定します 2
border-spacing 隣接するセルのボーダー間の距離を指定します 2
caption-side テーブル表題の位置を指定します 2
empty-cells テーブルにおける空セルのボーダーと背景を表示するかどうかを指定します 2
table-layout テーブルに使用するレイアウト・アルゴリズムを設定します 2

リストとカウンタ・プロパティ

プロパティ 説明 CSS
counter-increment カウンタを1以上増分します 2
counter-reset 1つ以上のカウンタを作成またはリセットします 2
list-style 1回の宣言で全てのリストのプロパティを設定します 1
list-style-image リスト項目のマーカに画像を指定します 1
list-style-position リスト項目のマーカがコンテンツ・フローの内側に現れるか外側に現れるかを指定します 1
list-style-type リスト項目のマーカのタイプを指定します 1

アニメーション・プロパティ

プロパティ 説明 CSS
@keyframes アニメーションのコードを指定します 3
animation animation-play-state と animation-fill-mode を除く、全 animation プロパティのショートハンド・プロパティ 3
animation-delay アニメーション開始までの待機時間を指定します 3
animation-direction アニメーションを交互に反転再生させるかどうかを指定します 3
animation-duration アニメーション1サイクル分の時間の長さを秒またはミリ秒で指定します 3
animation-fill-mode アニメーション再生中以外(完了後または待機中)の時の、要素のスタイルを指定します 3
animation-iteration-count アニメーションの再生回数を指定します 3
animation-name @keyframes アニメーションの名前を指定します 3
animation-play-state アニメーションが再生中か一時停止かを指定します 3
animation-timing-function アニメーションの速度曲線を指定します 3

変形プロパティ

プロパティ 説明 CSS
backface-visibility 要素がスクリーンに面していない場合に、表示すべきかどうかを定義します 3
perspective 3D 要素の表示方法に視点を指定します 3
perspective-origin 3D 要素の底辺位置を指定します 3
transform 要素へ 2D 変形、または 3D 変形を適用します 3
transform-origin 変形した要素の位置変更を可能にします 3
transform-style ネストした要素を 3D 空間にレンダリングする方法を指定します 3

トランジション・プロパティ

プロパティ 説明 CSS
transition 4つの transition プロパティを設定するショートハンド・プロパティ 3
transition-property トランジション効果を適用する CSS プロパティの名前を指定します 3
transition-duration トランジション効果が完了するまでに掛かる時間を秒またはミリ秒で指定します 3
transition-timing-function トランジション効果の速度曲線を指定します 3
transition-delay トランジション効果がいつ始まるかを指定します 3

基本的なユーザインタフェース・プロパティ

プロパティ 説明 CSS
box-sizing どのようなサイズ設定プロパティ(幅と高さ)が含むべきかをブラウザに指示します 3
content 生成コンテンツを挿入するため、:before 擬似要素および :after 擬似要素と共に使用します 2
cursor 表示するカーソルのタイプを指定します 2
ime-mode テキストフィールドの入力メソッドエディタの状態を制御します 3
nav-down 下矢印ナビゲーションキーを使用する際に移動する場所を指定します 3
nav-index 要素のタブ順序を指定します 3
nav-left 左矢印ナビゲーションキーを使用する際に移動する場所を指定します 3
nav-right 右矢印ナビゲーションキーを使用する際に移動する場所を指定します 3
nav-up 上矢印ナビゲーションキーを使用する際に移動する場所を指定します 3
outline 1回の宣言で全ての outline プロパティを設定します 2
outline-color アウトラインの色を設定します 2
outline-offset アウトラインをずらして、ボーダー境界を越えてアウトラインを描きます 3
outline-style アウトラインのスタイルを設定します 2
outline-width アウトラインの幅を設定します 2
resize ユーザによる要素サイズを変更できるかどうかを指定します 3
text-overflow テキストが含まれる要素をはみ出した場合どうするかを指定します 3

段組みレイアウト・プロパティ

プロパティ 説明 CSS
break-after 生成ボックスの後における改ページ、改段または指定位置での改行動作を指定します 3
break-before 生成ボックスの前における改ページ、改段または指定位置での改行動作を指定します 3
break-inside 生成ボックスの内部における改ページ、改段または指定位置での改行動作を指定します 3
段数 分割する要素の段数を指定します 3
column-fill 段をどのように埋めるかを指定します 3
段の間隔 段の間隔を指定します 3
段間の罫線 全ての column-rule-* プロパティを設定するためのショートハンド・プロパティ 3
column-rule-color 段の間のけい線の色を指定します 3
column-rule-style 段間のけい線のスタイルを指定します 3
column-rule-width 段間のけい線の幅を指定します 3
column-span 要素がまたがる段数を指定します 3
column-width 段の幅を指定します 3
columns column-width と column-count を設定するためのショートハンド・プロパティ 3
widows 要素の内部に改ページが発生する場合、ページの上部に残さなければならない行の最小数を設定します 2

ページ付きメディア

プロパティ 説明 CSS
orphans 要素の内部に改ページが発生する場合、ページの下部に残さなければならない行の最小数を設定します 2
page-break-after 要素の後の改ページ動作を設定します 2
page-break-before 要素の前の改ページ動作を設定します 2
page-break-inside 要素の中の改ページ動作を設定します 2

ページ付きメディアの生成コンテンツ

プロパティ 説明 CSS
marks 文書にトンボ(印刷物の見当合わせ記号)および十字マークの双方、または何れか一方を追加します 3
quotes 埋め込み引用符の引用符の種類を設定します 2

フィルタ効果プロパティ

プロパティ 説明 CSS
filter 要素を表示する前に、要素への効果(例えば、ぼかしやカラーシフト)を定義します 3

画像値と置換コンテンツ

プロパティ 説明 CSS
image-orientation ユーザエージェントが画像に適用する右または時計回りの方向の回転を指定します (多分、このプロパティは非推奨になり、機能は HTML に移動させられそうです) 3
image-rendering 画像が拡大・縮尺されるとき、画像のどの側面がエリアにとり最重要かについて、ブラウザにヒントを与えます 3
image-resolution 要素に、または要素で使用されるすべてのラスタ画像の固有な解像度を指定します 3
object-fit 置換された要素のコンテンツを、使用された高さと幅で作られたボックスに、どのようにフィットさせるかを指定します 3
object-position ボックス内の置換要素の配置を指定します 3

マスク・プロパティ

プロパティ 説明 CSS
mask 3
mask-type 3

スピーチ・プロパティ

プロパティ 説明 CSS
mark mark-before および mark-after プロパティを設定するためのショートハンド・プロパティ 3
mark-after オーディオストリームへ名前付きマーカの取り付けを可能にします 3
mark-before オーディオストリームへ名前付きマーカの取り付けを可能にします 3
phonemes 対応する要素に含まれるテキストに音声発音を指定します 3
rest rest-before および rest-after プロパティを設定するためのショートハンド・プロパティ 3
rest-after 要素内容を話した後の休憩・間を指定します 3
rest-before 要素内容を話す前の休憩・間を指定します 3
voice-balance 左右のチャンネルのバランスを指定します 3
voice-duration 選択した要素内容をレンダリングするのに掛かる時間を指定します 3
voice-pitch 話し声の平均な声の高さ(周波数)を指定します 3
voice-pitch-range 声の抑揚(周波数の変化幅)を指定します 3
voice-rate 話す速度を制御します 3
voice-stress 強調の度合い(強い・弱い・単調)を示します 3
voice-volume 音声合成で波形出力の振幅を参照します 3

マスキー・プロパティ

プロパティ 説明 CSS
marquee-direction コンテンツを移動する方向を設定します 3
marquee-play-count コンテンツ移動の回数を設定します 3
marquee-speed コンテンツのスクロールの速さを設定します 3
marquee-style Sコンテンツ移動のスタイルを設定します 3

❮ ホームへ 次のリファレンス ❯