web制作

CSS一覧

CSS一覧

とどんな時に使うのかを説明する別サイトリンクです。

スピード重視なので@、a~zで並べてます。ご自由に利用下さい。

@charset スタイルシートで使用される文字セットを定義

@font-face 使用する外部のフォントを定義

@import 指定した外部のスタイルシートを読み込む

@keyframes アニメーションの動きを指定

@media メディア毎の条件をを定義

@page 文書(html)を印刷するとき定義

align-content コンテナ内の行の揃え方

align-items コンテナ内の垂直方向の揃え方

align-self flexコンテナの垂直(縦)位置を個別に指定

animation アニメーションの設定

animation-delay アニメーションのディレイ

animation-direction アニメーションの方向

animation-duration アニメーションの再生時間

animation-fill-mode アニメーションの再生前後のスタイル

animation-iteration-count アニメーションの繰り返し

animation-name アニメーションのキーフレーム

animation-play-state アニメーションの再生と一時停止

animation-timing-function アニメーション速度

backface-visibility 裏面の表示

background 背景全般の設定

background-attachment 背景画像のスクロール

background-blend-mode 背景をブレンド

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-collapse テーブルの罫線の表示方法

border-color 罫線の色設定

border-image 画像を使った罫線の表示

border-image-outset ボーダーイメージエリアを広げる

border-image-repeat 画像ボーダーの繰り返し方法

border-image-slice 画像のボーダー使用範囲

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-spacing テーブルの罫線の間隔

border-style 罫線のスタイル設定

border-top 罫線の上辺の設定

border-top-color 罫線の上辺の色設定

border-top-left-radius 左上の角丸

border-top-right-radius 右上の角丸

border-top-style 罫線の上辺のスタイル設定

border-top-width 罫線の上辺の太さ設定

border-width 罫線の太さ設定

bottom 基点の下辺からの距離

box-shadow ボックスの影付け

box-sizing ボックスの大きさの算出方法

caption-side テーブルのキャプションの表示位置

clear 回り込みの解除 clip 画像の切り抜き

clip-path 画像の切り抜き

color 文字の色

column-count マルチカラムのカラムの数

column-fill マルチカラムのカラムのバランス

column-gap マルチカラムのカラムの間隔

column-rule マルチカラムの区切り線

column-rule-color マルチカラムの区切り線の色

column-rule-style マルチカラムの区切り線のスタイル

column-rule-width マルチカラムの区切り線の太さ

column-span マルチカラムのカラムをまたがって表示

column-width マルチカラムのカラムの横幅

columns マルチカラムのカラムの数と横幅

content コンテンツの挿入・置換

counter-increment カウンターの増減値

counter-reset カウンターの初期値

cue-after 要素の後の合図音

cue-before 要素の前の合図音

cursor カーソルの種類

direction 書字方向

display ボックスの種類

empty-cells 空セルの表示

filter 画像に各種効果

flex flex-grow,flex-shrink,flex-basisをまとめて指定

flex-basis flexboxアイテムの幅を調整

flex-direction flexboxアイテムの配置(縦/横)

flex-flow flex-directionとflex-wrapまとめて指定

flex-grow flexboxアイテムの自動幅調整(伸ばす)

flex-shrink flexboxアイテムの自動幅調整(縮む)

flex-wrap flexboxアイテムの折り返し

float 配置と回り込み

font 文字のデザイン

font-family フォント

font-feature-settings OpenTypeフォントの字形の切替え

font-kerning 字間スペース

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 文字の太さ

grid グリッドコンテナをまとめて指定

grid-area gridのstart,endをまとめて指定

grid-auto-columns 自動生成されるグリッドアイテムの幅

grid-auto-flow グリッドアイテムの自動配置方法

grid-auto-rows 自動生成されるグリッドアイテムの高さ

grid-column グリッドアイテムの列開始/終了をまとめて指定

grid-column-end グリッドアイテムの列終了位置

grid-column-start グリッドアイテムの列開始位置

grid-gap グリッドアイテムの余白をまとめて指定

grid-gap-columns グリッドアイテム列間の余白

grid-gap-rows グリッドアイテム行間の余白

grid-row グリッドアイテムの行開始/終了をまとめて指定

grid-row-end グリッドアイテムの行終了位置

grid-row-start グリッドアイテムの行開始位置

grid-template grid-templateをまとめて指定

grid-template-areas グリッドコンテナの名前を指定

grid-template-columns グリッドコンテナの幅を指定

grid-template-rows グリッドコンテナの高さを指定

height 高さ

hyphens ハイフネーション(単語途中の改行指定)の利用

image-rendering 画像倍率表示時の指定

justify-content コンテナ内の水平方向の揃え方

left 基点の左辺からの距離

etter-spacing 文字の間隔

line-break 禁則処理のルール(改行位置指定)

line-height 行の高さ

list-style リストマークのデザイン

list-style-image リストマークの画像

list-style-position リストマークの表示位置

list-style-type リストマークの種類

margin マージンの大きさ

margin-bottom 下マージン

margin-left 左マージン

margin-right 右マージン

margin-top 上マージン

max-height 高さの最大値

max-width 横幅の最大値

min-height 高さの最小値

object-fit ボックスに合わせた画像サイズの調節

object-position ボックス内での画像の表示位置

opacity 透明度

order flexコンテナ内の並び順

orphans 前ページの末尾に最小限必要な行数

outline アウトラインの表示

outline アウトラインの表示

outline-color アウトラインの色

outline-offset アウトラインのオフセット

outline-style アウトラインのスタイル

outline-width アウトラインの太さ

overflow オーバーフローしたコンテンツの表示

overflow-wrap 単語の途中で改行指定

overflow-x 横方向にオーバーしたコンテンツの表示

overflow-x 横方向にオーバーしたコンテンツの表示

overflow-x 横方向にオーバーしたコンテンツの表示

overflow-y 縦方向にオーバーしたコンテンツの表示

padding パディングの大きさ

padding-bottom 下パディング

padding-left 左パディング

padding-right 右パディング

padding-top 上パディング

page 特定の名前を付けてページを定義

page-break-after 改ページの位置:ボックス後

page-break-before 改ページの位置:ボックス前

page-break-inside 改ページの位置:ボックス内

perspective 子要素の奥行きの指定

perspective-origin 子要素の奥行きのx軸・y軸方向の位置

pointer-events マウスイベントのターゲット制御

position 配置方法

quotes 引用符

resize ボックスのリサイズ

right 基点の右辺からの距離

ruby-align ルビの揃え方

ruby-merge ルビの分割

ruby-position ルビの表示位置

size ページサイズを定義

tab-size タブ幅

table-layout テーブルの表示方法

text-align 横(水平)方向の文字位置

text-decoration 文字の装飾線の表示

text-decoration 文字の装飾線の表示

text-decoration-color 文字の装飾線の色を指定

text-decoration-line 文字の装飾線の位置を指定

text-decoration-style 文字の装飾線の種類を指定

text-emphasis 圏点スタイルをまとめて指定

text-emphasis-color 圏点の色を指定

text-emphasis-position 圏点の位置を指定

text-emphasis-style 圏点の形を指定

text-indent 1行目のインデント

text-justify 両端揃えの調節方法

text-overflow オーバーフローしたテキストの省略表示

text-shadow 文字の影付け

text-transform 字形の変換

text-underline-position 文字下線の位置を指定

top 基点の上辺からの距離

transform 要素の変形

transform-origin 要素変形の起点

transform-style 要素重なり時の3D表示

transition トランジションの設定

transition-delay トランジションのディレイ

transition-duration トランジションの再生時間

transition-property トランジション対象のCSSプロパティ

transition-timing-function トランジションの速度

unicode-bidi 双方向アルゴリズムの変更

vertical-align 縦(垂直)方向の文字位置

visibility 表示の有無 voice-family 声の種類

white-space 改行コード・タブ・スペースの表示

widows 次ページの先頭に最小限必要な行数

width 横幅

word-break 自動改行のルール

word-spacing 単語の間隔

word-wrap 長い単語の改行ルール

writing-mode 文字の縦書き

z-index ボックスの重なり順

-web制作