CSS

cssの辞典となるタグ一覧です。

CSSタグ一覧 機能別

カラー

color
文字の色
opacity
透明度

背景とボーダー

border-image-outset
ボーダー画像の外側への拡張
border-image-repeat
ボーダー画像の繰り返し方法
border-image-slice
画像を9つにスライス
border-image-source
ボーダー画像指定
border-image-width
ボーダー画像の太さ
border-left
ボーダー左側のショートハンド
border-left-color
ボーダー左側の色
border-left-style
ボーダー左側の種類
border-left-width
ボーダー左側の太さ
border-radius
角丸のショートハンド
border-right
ボーダー右側のショートハンド
border-right-color
ボーダー右側の色
border-right-style
ボーダー右側の種類
border-right-width
ボーダー右側の太さ
border-style
ボーダーの種類
border-top
ボーダー上側のショートハンド
border-top-color
ボーダー上側の色
border-top-left-radius
角丸左上
border-top-right-radius
角丸右上
border-top-style
ボーダー上側の種類
border-top-width
ボーダー上側の太さ
border-width
ボーダーの太さ
box-decoration-break
ボックスが複数行の場合の表示形式
box-shadow
ボックスの影
background
背景のショートハンド
background-attachment
背景画像のスクロール方法
background-clip
背景の描画エリア
background-color
背景色
background-image
背景画像
background-origin
背景画像の配置エリア
background-position
背景画像の表示位置
background-repeat
背景画像の繰り返し方法
background-size
背景画像のサイズ
border
ボーダーのショートハンド
border-bottom
ボーダー下側のショートハンド
border-bottom-color
ボーダー下側の色
border-bottom-left-radius
角丸左下
border-bottom-right-radius
角丸右下
border-bottom-style
ボーダー下側の種類
border-bottom-width
ボーダー下側の太さ
border-color
ボーダーの色
border-image
ボーダー画像

画像と置換

image-resolution
画像の解像度
object-fit
オブジェクトのフィット方法
object-position
オブジェクトの位置

マーキー

marquee-direction
マーキーのスクロール方向
marquee-play-count
マーキーの再生回数
marquee-speed
マーキーのスクロール速度
marquee-style
マーキーの動き方

マルチカラム

break-after
マルチカラムの後ろでの改段方法
break-before
マルチカラムの前での改段方法
break-inside
マルチカラムの要素内での改段方法
column-count
マルチカラムの段の数
column-fill
マルチカラムのテキストの均等分配
column-gap
マルチカラムの段の間隔
column-rule
マルチカラムの境界線ショートハンド
column-rule-color
マルチカラムの境界線の色
column-rule-style
マルチカラムの境界線の種類
column-rule-width
マルチカラムの境界線の太さ
column-span
マルチカラムのまたがる数
column-width
マルチカラムの幅
columns
マルチカラムのショートハンド

音声

voice-rate
読み上げ声の速度
voice-stress
読み上げ声の強調
voice-volume
読み上げ声の音量
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
読み上げ声の幅

トランスフォーム

backface-visibility
背面の表示/非表示
perspective
遠近効果
perspective-origin
遠近効果の配置エリア
transform
変形のショートハンド
transform-origin
変形の配置エリア
transform-style
変形の種類

トランジション

transition
遷移のショートハンド
transition-delay
遷移の遅延時間
transition-duration
遷移の時間
transition-property
遷移のプロパティ
transition-timing-function
遷移の変化タイミング

アニメーション

animation
アニメーションのショートハンド
animation-delay
アニメーションの遅延時間
animation-direction
アニメーションの逆再生
animation-duration
アニメーションの時間
animation-fill-mode
アニメーションの実行前後のスタイル適用
animation-iteration-count
アニメーションの再生回数
animation-name
アニメーションの名前指定
animation-play-state
アニメーションの再生中/一時停止
animation-timing-function
アニメーションの変化タイミング

フレキシブルボックス

align-content
フレキシブルボックス内の縦軸配置方法
align-items
フレキシブルボックス内の子要素の縦軸配置方法
align-self
フレキシブルボックス内の子要素の個別の縦軸配置方法
flex
フレキシブルボックスのショートハンド
flex-basis
フレキシブルボックス内の子要素の横軸配置方法
flex-direction
フレキシブルボックス内の子要素の表示方向
flex-flow
フレキシブルボックスの子要素のショートハンド
flex-grow
フレキシブルボックス内の子要素の伸長率
flex-shrink
フレキシブルボックス内の子要素の圧縮率
flex-wrap
フレキシブルボックスのマルチライン
justify-content
フレキシブルボックス内の子要素の横軸配置方法
order
フレキシブルボックス内の配置順序

フォント

font
フォントのショートハンド
font-family
フォントの種類
font-feature-settings
OpenTypeフォントの表示形式
font-kerning
フォントのカーニング
font-language-override
別言語フォントの表示形式
font-size
フォントサイズ
font-size-adjust
フォント間サイズのバラつき調整
font-stretch
フォントの横幅
font-style
フォントのイタリック体/斜体
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
フォントの太さ

印刷

image-orientation
画像の回転角度
page
ページボックス
page-break-after
印刷時の改ページの位置 直前
page-break-before
印刷時の改ページの位置 直後
page-break-inside
印刷時の改ページの禁止
size
ページボックスのサイズと向き

テキスト

letter-spacing
文字の間隔
line-break
改行の禁則処理
overflow-wrap
単語途中での改行
tab-size
タブ文字サイズ
text-align
テキストの水平揃え
text-align-last
テキストの最終行の水平揃え
text-decoration
テキストの下線等のショートハンド
text-decoration-color
テキストの下線等のカラー
text-decoration-line
テキストの下線等の種類
text-decoration-skip
テキストの下線等のスキップ方法
text-decoration-style
テキストの下線等のスタイル
text-emphasis
テキストの強調マークのショートハンド
text-emphasis-color
テキストの強調マークのカラー
text-emphasis-position
テキストの強調マークの位置
text-emphasis-style
テキストの強調マークのスタイル
text-indent
テキストの1行目のインデント
text-justify
テキストの行端揃え
text-shadow
テキストの影
text-transform
テキストの大文字/小文字表示
text-underline-position
テキストの下線等の位置
white-space
連続したスペースの表示方法
word-break
単語途中の改行方法
word-spacing
単語間の間隔
hanging-punctuation
句読点の行ボックス外配置

ユーザインタフェース

box-sizing
ボックスサイズの算出方法
cursor
カーソルの形状
icon
要素のアイコン
ime-mode
IMEの入力モード
nav-down
下方向キーによるフォーカス移動
nav-index
タブキーによるフォーカス移動
nav-left
左方向キーによるフォーカス移動
nav-right
右方向キーによるフォーカス移動
nav-up
上方向キーによるフォーカス移動
outline
アウトラインのショートハンド
outline-color
アウトラインのカラー
outline-offset
アウトラインのオフセット値
outline-style
アウトラインのスタイル
outline-width
アウトラインの太さ
resize
サイズ変更の可否
text-overflow
はみ出したテキストの表示方法

ライティングモード

direction
文字表記の方向
text-combine-horizontal
縦書き時縦中横配置
text-orientation
縦書き時文字表記方向
unicode-bidi
Unicode文字の表記方向
writing-mode
文字表記方向

グリッド

grid
グリッドのショートハンド
grid-auto-columns
空白グリッドトラックの列幅
grid-auto-flow
グリッドの拡張方向
grid-auto-rows
空白グリッドトラックの行幅
grid-area
行グリッド/列グリッドの開始終了のショートハンド
grid-row
行グリッドの開始終了のショートハンド
grid-row-end
行グリッドの終了位置やサイズ
grid-row-start
行グリッドの開始位置やサイズ
grid-column
列グリッドの開始終了のショートハンド
grid-column-end
列グリッドの終了位置やサイズ
grid-column-start
列グリッドの開始位置やサイズ
grid-template
グリッドの配置のショートハンド
grid-template-areas
名前付きグリッド
grid-template-columns
列グリッドのサイズ
grid-template-rows
行グリッドのサイズ

リスト

list-style-image
リストのマーカーの画像
list-style-position
リストのマーカーの表示位置
list-style-type
リストのマーカーの種類
list-style
リストのマーカーのショートハンド

ポジション

bottom
下からの配置位置
clip
ボックスの切り抜き表示
left
左からの配置位置
position
ボックスの配置方法
right
右からの配置位置
top
上からの配置位置
z-index
重なりの順序

テーブル

border-collapse
セルのボーダーの表示方法
border-spacing
セルのボーダーの間隔
caption-side
テーブルのキャプション位置
empty-cells
空白セルのボーダーの表示/非表示
table-layout
テーブルの表示方法

ボックスモデル

clear
回り込み解除
display
要素ボックスの表示形式
float
要素ボックスの左または右寄せ
height
要素ボックスの高さ
margin
要素のマージンのショートハンド
margin-bottom
要素の下方向のマージン
margin-left
要素の左方向のマージン
margin-right
要素の右方向のマージン
margin-top
要素の上方向のマージン
max-height
要素ボックスの高さの最大値
max-width
要素ボックスの幅の最大値
min-height
要素ボックスの高さの最小値
min-width
要素ボックスの幅の最小値
overflow
はみ出た要素の表示方法
overflow-style
はみ出た要素の表示スタイル
overflow-x
はみ出た要素の横軸方向の表示方法
overflow-y
はみ出た要素の縦軸方向の表示方法
padding
要素のパディングのショートハンド
padding-bottom
要素の下方向のパディング
padding-left
要素の左方向のパディング
padding-right
要素の右方向のパディング
padding-top
要素の上方向のパディング
visibility
要素ボックスの表示/非表示
width
要素ボックスの幅

生成と置換

content
要素の前後にコンテンツを挿入
counter-increment
要素のカウンタの値を進める
counter-reset
要素のカウンタの値をリセット
crop
置換要素の表示範囲
move-to
要素の後ろへの移動
page-policy
セクションの番号/名前
quotes
contentで挿入する引用符の設定

ライン

line-stacking-shift
行ボックスを重ねる際のベースライン
line-stacking-strategy
行ボックスを重ねる高さ
text-height
テキストの高さ
vertical-align
縦軸方向の揃え位置
alignment-adjust
インラインエリアのライン位置
alignment-baseline
インラインエリアのベースライン
baseline-shift
優先するベースライン再指定
dominant-baseline
優先するベースライン
drop-initial-after-adjust
::first-letterの頭文字1番目の接続ポイント揃え位置
drop-initial-after-align
::first-letterの頭文字1番目の接続ポイント揃えライン
drop-initial-before-adjust
::first-letterの頭文字2番目の接続ポイント揃え位置
drop-initial-before-align
::first-letterの頭文字2番目の接続ポイント揃えライン
drop-initial-size
::first-letterの頭文字サイズ
drop-initial-value
::first-letterの頭文字行数
inline-box-align
インラインボックスを整列させる基準の行
line-height
行の高さ
line-stacking
行ボックスの重ね方のショートハンド
line-stacking-ruby
行ボックスを重ねる際のルビ

ルビ

ruby-align
ルビの揃え位置
ruby-overhang
ルビの対象文字の前後の文字の表示方法
ruby-position
ルビの表示位置
ruby-span
ルビの対象文字数

ハイパーリンク

target
リンク先の表示方法のショートハンド
target-name
リンク先を表示する場所
target-new
リンク先を新しいウィンドウ/タブで開く
target-position
リンク先の新しいウィンドウ/タブを開く位置

スクロールスナップ

scroll-padding-top
スクロールの上方向のパディング
scroll-padding-right
スクロールの右方向のパディング
scroll-padding-left
スクロールの左方向のパディング
scroll-padding-bottom
スクロールの下方向のパディング
scroll-padding
スクロールのパディングのショートハンド
scroll-margin-top
スクロールの上方向のマージン
scroll-margin-right
スクロールの右方向のマージン
scroll-margin-left
スクロールの左方向のマージン
scroll-margin-bottom
スクロールの下方向のマージン
scroll-margin
スクロールのマージンのショートハンド
scroll-snap-stop
スナップポジションでの停止
scroll-snap-align
スナップポジションの位置
scroll-snap-type
スクロールスナップの軸と厳密さ

CSSとは

HTML(エイチティーエムエル)とはHypeText Markup Languageの略で、Webページを制作する際に用いるマークアップ言語です。上記のhtmlタグを文法に従って使いWebページを作ります。
html自体は単なるテキストデータなので、テキストエディタなどでタグがなくても文字を入力し、拡張子.htmlをつければ、Webブラウザ(google chromeなど)でファイルを開けばページが表示されるようになります。