CSS3スタイル虎の巻

CSS3スタイル虎の巻

主要なCSS3の書き方をまとめたリファレンスです。
Web開発にぜひご利用ください。

CSS基本

背景系スタイル

background	背景に関するスタイルをまとめて指定する
background-attachment	背景画像のスクロール方法を指定する
background-clip	背景画像を表示する範囲を指定する
background-color	背景色を指定する
background-image	背景に画像を指定する
background-position	背景画像の位置を指定する
background-repeat	背景画像の表示方法を指定する
background-size	背景画像のサイズを指定する

枠線系スタイル

border	枠線に関するスタイルをまとめて指定する
border-color	枠線の色を指定する
border-style	枠線のスタイルを指定する
border-width	枠線の太さを指定する
border-radius	枠線の角の丸みを指定する

文字系スタイル

color	文字の色を指定する
direction	テキストの表示方向を指定する
font	フォント関連のスタイルを一括して指定する
font-family	フォントの種類を指定する
font-size	文字のサイズを指定する
font-style	文字のスタイルを指定する
font-variant	フォントをスモールキャップにする
font-weight	文字の太さを指定する
text-shadow	文字に影を指定する
text-transform	大文字や小文字などに変換して表示する

リスト系スタイル

list-style	リストマーカーのスタイルを一括して指定する
list-style-image	リストマーカーの画像を指定する
list-style-position	リストマーカーの位置を指定する
list-style-type	リストマーカーの種類を指定する

余白・サイズ・位置系スタイル

height	要素の高さを指定する
letter-spacing	文字の間隔を指定する
margin	要素の外側の余白を指定する
padding	要素の内側の余白を指定する
width	要素の幅を指定する
text-align	横方向の位置揃えを指定する
vertical-align	縦方向の位置揃えを指定する
line-height	行の高さを指定する
text-indent	１文字目の字下げ幅を指定する
word-spacing	単語の間隔を指定する
position	要素を表示する時の基準位置を指定する
top	上側からの位置を指定する
bottom	下側からの位置を指定する
left	左側からの位置を指定する
right	右側からの位置を指定する
max-width	幅の最大値を指定する
min-width	幅の最小値を指定する
max-height	高さの最大値を指定する
min-height	高さの最小値を指定する
box-sizing	ボックスサイズの計算方法を指定する
white-space	半角スペース、タブ文字、改行の表示方法を指定する

ボックス系スタイル

clear	ボックスの回り込みを解除する
display	ボックスの種類を指定する
float	ボックスの回り込みを指定する
box-shadow	要素に影を付ける
visibility	要素の表示・非表示を指定する
z-index	ボックスの重ね順を指定する
resize	要素のサイズ変更可否を指定する

テーブル系スタイル

border-collapse	セルの枠線の重なりを指定する
border-spacing	セルの枠線の間隔を指定する
caption-side	テーブルの見出しの位置を指定する
empty-cells	空白セルの枠線の表示非表示を指定する
table-layout	テーブル列幅の表示方法を指定する

アウトライン系スタイル

outline	アウトラインに関するスタイルをまとめて指定する
outline-color	アウトラインの色を指定する
outline-style	アウトラインのスタイルを指定する
outline-width	アウトラインの太さを指定する

装飾線系スタイル

text-decoration	テキストに引くの装飾線に関するスタイルを一括して指定する
text-decoration-line	テキストに引く装飾線の位置を指定する
text-decoration-style	テキストに引く装飾線のスタイルを指定する
text-decoration-color	テキストに引く装飾線の色を指定する

その他系スタイル

疑似クラス

:link	未訪問のリンクのスタイルを指定する
:visited	アクセス済みのリンクのスタイルを指定する
:hover	カーソルを乗せた時のリンクのスタイルを指定する
:active	クリック中のリンクのスタイルを指定する
:before	要素の直前にコンテンツを挿入する
:after	要素の直後にコンテンツを挿入する
:first-of-type	指定した子要素で一番最初の要素にスタイルを適用する
:last-of-type	指定した子要素で一番最後の要素にスタイルを適用する
:first-child	一番最初の子要素にスタイルを適用する
:last-child	一番最後の子要素にスタイルを適用する
:nth-of-type(n)	指定したn番目の子要素にスタイルを指定する
:nth-last-of-type(n)	指定した要素の最後からn番目の子要素にスタイルを指定する
:nth-child(n)	指定した要素のn番目の子要素にスタイルを適用する
:first-line	１行目にスタイルを適用する
:first-letter	１文字目にスタイルを適用する

【姉妹サイト】
　HTML5タグ虎の巻 - HTML5のタグリファレンスです。

【更新履歴】

2023/01/27　:nth-last-of-type(n)を追加しました
2022/12/06　white-spaceを追加しました
2021/03/07　box-sizingを追加しました
2019/12/15　:first-letter、:first-lineを追加しました
2019/12/14　:nth-child(n)を追加しました
2019/12/10　:nth-of-type(n)を追加しました
2019/12/09　:first-of-type、:last-of-typeを追加しました
2019/12/08　:first-child、:last-childを追加しました
2019/12/07　:before、:afterを追加しました
2019/12/04　:link、:visited、:hover、:activeを追加しました
2019/11/23　ドメインを変更しました
2019/11/03　新規公開

HOMEへ　 TOPへ