用途別インデックス
CSSプロパティ、メソッドの用途一覧です。
基本
テキスト、フォント
- フォント
- color、 font、 font-family、 font-feature-settings、 font-kerning、 font-size、 font-stretch、 font-style、 font-variant、 font-weight
- テキスト配置
- letter-spacing、 line-height、 overflow-wrap、 tab-size、 text-align、 text-align-last、 text-combine-upright、 text-indent、 text-justify、 text-overflow、 vertical-align、 white-space、 word-break、 word-spacing、 word-wrap
- 回り込み
- clear、 float
- テキスト装飾(text-decoration-style:line-through;で取り消し線)
- text-decoration、 text-decoration-color、 text-decoration-line、 text-decoration-style text-shadow、 text-transform、 text-underline-position
- 書式方向
- direction、 text-orientation、 writing-mode
- 自動挿入
- content、 counter-increment、 counter-reset、 quotes
- 改行
- box-decoration-break、 hyphens
- ユーザー操作
- user-select
テキストの体裁について詳しくはテキストの体裁
ページを参照してみてください。
リンク<a>
リンク<a>タグエレメントの装飾に関するCSSです。
- 下線
- text-decoration、 text-decoration-line、 text-decoration-color、 text-decoration-style、 text-underline-position
- 文字色
- color
- ポインター、カーソル
- cursor
- 疑似クラス
- :any-link、 :link、 :hover、 :visited
エレメント、レイアウト
エレメント全般で使用できる CSS プロパティです。
- サイズ
-
- height、 width、 max-height、 max-width、 min-height、 min-width、 resize
- 回転、拡大/縮小、傾斜、移動
- transform
- スクロール追加
- overflow、 overflow-x、 overflow-y
- マージン、パディング、ボーダー
-
- 共通
- box-sizing
- マージン
- margin、 margin-bottom、 margin-left、 margin-right、 margin-top
- パディング
- padding、 padding-bottom、 padding-left、 padding-right、 padding-top
- ボーダー、罫線
-
- 全体
- border、 border-collapse、 border-color、 border-spacing、 border-style、 border-width
- 上辺
- border-top、 border-top-color、 border-top-left-radius、 border-top-right-radius、 border-top-style、 border-top-width
- 下辺
- border-bottom、 border-bottom-color、 border-bottom-left-radius、 border-bottom-right-radius、 border-bottom-style、 border-bottom-width
- 左辺
- border-left、 border-left-color、 border-left-style、 border-left-width
- 右辺
- border-right、 border-right-color、 border-right-style、 border-right-width
- 角を丸に
- border-radius
- 画像を線に
- border-image、 border-image-outset、 border-image-repeat、 border-image-slice、 border-image-source、 border-image-width
- アウトライン
- outline、 outline-color、 outline-offset、 outline-style、 outline-width
- 配置
-
- 位置調整
- bottom、 left、 right、 top、 position、 z-index
- 横並び（フレックス）
- order
- 横並び（フレックス）
- display:flex;、 align-content、 align-items、 align-self、 justify-content、 flex-wrap、 flex-basis、 flex-direction、 flex-flow
- 配列（グリッド）
- display:grid;、 grid-area、 grid-auto-columns、 grid-auto-flow、 grid-auto-rows、 grid-column、 grid-column-end、 grid-column-gap、 grid-column-start、 grid-gap、 grid-row、 grid-row-end、 grid-row-gap、 grid-row-start、 grid-template、 grid-template-areas、 grid-template-columns、 grid-template-rows、
- 背景
- background、 background-attachment、 background-blend-mode、 background-clip、 background-color、 background-image、 background-origin、 background-position、 background-repeat、 background-size、 linear-gradient、 radial-gradient
- フィルタ、加工
-
- filter、 transform、 transform-origin
- ブレンド
- isolation、 linear-gradient()、 mix-blend-mode、 radial-gradient()
- 影
- box-shadow
- 透過
- opacity
- 段組みを複数列表示（カラム表示）
- column-fill、 column-gap、 column-rule、 column-rule-color、 column-rule-style、 column-rule-width、 column-span、 column-width、 columns
- ページ内移動
- scroll-behavior
- 表示、非表示
- visibility
LIST(UL,OL,DL)
リスト <ol>、<ul>、<dl> に使用できる主な CSS プロパティ、@ルール、ファンクション、擬似クラスには以下があります。
- リストのマーカー
- list-style、 list-style-image、 list-style-position、 list-style-type、 @counter-style
- 番号付け
- counter-incremente、 counter-reset、 counter-set、 @counter-style、 counter()、 counters()
- 擬似クラス
- :first-child、 :first-of-type、 :last-child、 :last-of-type、 :nth-child()、 :nth-of-type()
詳しくはリストのスタイル
ページを参照してください。
TABLE
<table> エレメントに関する CSS プロパティには主に以下があります。
- セル
- empty-cells、 table-layout
- 罫線
- border、 border-collapse、 border-spacing
- キャプション
- caption-side
- 行ごとの背景
- :nth-child()疑似クラス、 :nth-of-type()疑似クラス
詳しくは表のスタイル
ページを参照してください。