1. レイアウト

1.1 ボックスモデル

プロパティ	値の例	説明
width	300px	要素の幅を指定
height	200px	要素の高さを指定
margin	10px	要素の外側の余白を指定
padding	5px	要素の内側の余白を指定
box-sizing	border-box	content-box・・・要素の幅と高さにpaddingやborderが含まれない border-box・・・要素の幅と高さにpadding、borderが含まれる

width,height

要素の横幅、高さを指定するプロパティです。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

margin,padding

要素の外側、内側に余白をつけるためのプロパティです。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

box-sizing

要素にborderやpaddingを含むかどうかを決めるプロパティです。
値にcontent-boxを設定した場合は元の要素にborderやpaddingが足されるため要素のサイズが変わり、
一方border-boxを設定した場合は元の要素の中にborderやpaddingを含むため要素のサイズが変わりません。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

1.2 ポジショニング

プロパティ	値の例	説明
position	static, relative, absolute, fixed,sticky	要素の配置方法を指定 static・・・デフォルト値で通常の配置 relative・・・通常の配置からの相対的な配置 absolute・・・親要素に対して配置 fixed・・・ビューポートに対して配置 sticky・・・定義された位置にビューポートが到達した際に固定
top, right, bottom, left	10px	要素の位置を指定 値はpx、%、またはauto（デフォルト値）など
float	left, right	要素を左または右に浮かせる
clear	both	要素の両側にフロートされた要素がないようにする

position

要素の配置方法を決めるためのプロパティです。
同時に、具体的にどの位置に配置をさせるのか方向と数値を指定します。

position:static

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

position:relative

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

position:absolute

親要素にはposition:relative、子要素にposition:absoluteを指定することにより、
親要素を起点にしどこに配置するか決めることができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

position:fixed

画面に対してどの位置に固定するかの指定が可能です。
下記のResult画面をスクロールしても常に位置が固定されています。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.


position: sticky

スクロール後に要素が特定の位置に表示されたときにその要素を固定することができます。
下記の例ではtop:0;と指定することで上から0pxの位置（＝ページの一番上）になったときにメニューが固定されています。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

float

要素を左（=left）もしくは右（=right）に浮かせることでレイアウトを作るためのプロパティです。
※通常一般的な横並べのレイアウトは、後述のFlexboxを使用します（2023年12月現在）

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

clear

floatが適用された要素に、別の要素を回りこませるかどうかの設定が可能です。
下記の例は「Lorem ipsum〜」の例文にclearプロパティを設定しておらず、結果float:rightが命令された「これはテキストです」の左に回りこんでいます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

clear:both　を設定することで、回り込みを防ぐことができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

1.3 Flexbox

プロパティ	値の例	説明
display	flex	Flexコンテナを指定
justify-content	flex-start, flex-end, center, space-between, space-around	水平軸方向の要素の配置を指定 flex-start・・・開始部分 flex-end・・・終了部分 center・・・中央 space-between・・・均等に配置 space-around・・・均等に配置され、周囲にも余白をとる
align-items	stretch, flex-start, flex-end, center, baseline	垂直軸方向の要素の配置を指定 stretch・・・デフォルトで要素がコンテナに合わせて伸縮 flex-start・・・クロス軸の開始部分 flex-end・・・終了部分 center・・・中央 baseline・・・ベースライン（文字の基準線）
flex-direction	row, row-reverse, column, column-reverse	要素の配置方向を指定 row・・・横方向（デフォルト） column・・・縦方向 row-reverse・・・横方向逆順 column-reverse・・・縦方向逆順
flex-wrap	nowrap, wrap, wrap-reverse	要素の折り返し方法を指定 nowrap・・・折り返さない（デフォルト） wrap・・・折り返す wrap-reverse・・・逆順に折り返す

display:flex

flexコンテナを指定します。
子要素を直接囲む親要素に命令を出すことで、すべての子要素を水平方向に並ばせます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

justify-content

display:flexを指定した要素に対してこの命令を出すことで、水平方向の配置方法の設定ができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

align-items

display:flexを指定した要素に対してこの命令を出すことで、垂直方向の配置方法の設定ができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

1.4 Grid

Gridレイアウトについての詳細や事例はこちらを参考にしてください。

レイアウト作成のためのdisplay:gridを分かりやすく解説！【初・中級者向け】

2. タイポグラフィ

2.1 フォント

プロパティ	値の例	説明
font-family	‘Arial’, sans-serif	フォントの種類を指定
font-size	16px	フォントサイズを指定
font-weight	normal, bold, bolder, lighter, 100, 200, …, 900	フォントの太さを指定 normal・・・デフォルト、通常の太さ bold・・・太字 bolder・・・より太い lighter・・・より細い、 数値・・・100が最も細く、900が最も太い
line-height	1.5	行の高さ（行送り）を指定

font-family

HTML要素のフォント（書体）の種類を指定するためのプロパティです。
具体的なフォント名と一緒にフォントの総称名（ゴシック体や明朝体など）を記述することで、指定したフォントが閲覧環境に無い場合、該当の書体のデフォルトフォントを表示します。

複数のフォントを指定する場合、初めに書かれたものから順番に検索し、最初に見つかったものを表示します。
下記の例では、「Helvetica」が優先的に表示され、それがない場合は「Arial」、それもない場合はゴシック体（sans-serif）のデフォルトフォントが使用されます。

また、フォント名にスペースを含む場合は“”で囲んで記述します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

font-size

HTML要素の文字の大きさを指定するプロパティです。
数値にpxや%などの単位をつけて大きさを設定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

font-weight

HTML要素の文字の太さを指定するプロパティです。
値にはboldなどのキーワード、もしくは400、800などの数値を設定します。数値は、数が大きいほど太いフォントになります。
太さのバリエーションがフォントによって異なるため、フォントごとに確認してから設定する必要があります。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

line-height

文字1行分の高さ（行送り）を設定するためのプロパティです。
これを使うことにより、複数行の文章があった場合行と行の間隔の調整ができます。
行間の数値を直接指定するわけではないため注意しましょう。

値には「20px」など具体的なサイズのほかに、「2」のようにフォントサイズの何倍の行の高さにするかを指定することも可能です。
下記の例では文字のサイズが16pxに対し、行の高さを2倍＝1行の高さが32pxとなっています。
結果、1行分の高さの行間がつくことになります。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

2.2 テキストスタイル

プロパティ	値の例	説明
text-align	left, right, center, justify	テキストの水平方向の配置を指定 left・・・左寄せ right・・・右寄せ center・・・中央寄せ justify・・・両端寄せ
text-decoration	none, underline, overline, line-through	テキストの装飾を指定 none・・・なし underline・・・下線 overline・・・上線 line-through・・・中央線
text-transform	none, uppercase, lowercase, capitalize	テキストの大文字・小文字変換を指定 none・・・変換なし uppercase・・・全て大文字 lowercase・・・全て小文字 capitalize・・・各単語の先頭を大文字

text-align

テキストの水平方向の配置を指定します。
親要素の左端・中央・右端・両端のどこに揃えるかの設定ができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

text-decoration

下線など、テキストの装飾を設定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

text-transform

テキストの大文字・小文字を変換できるプロパティです。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

2.3 テキスト効果

プロパティ	値の例	説明
letter-spacing	normal, 2px	文字間のスペースを指定 normal・・・デフォルト（通常のスペース） 数値・・・指定したピクセル数分のスペースを設定
word-spacing	normal, 5px	単語間のスペースを指定 normal・・・デフォルト（通常のスペース） 数値・・・指定したピクセル数分のスペースを設定
text-shadow	2px 2px 4px #333	テキストに影を付ける x方向のずれ、y方向のずれ、ぼかしの半径、色を指定

letter-spacing

文字と文字の間のスペースの大きさを指定します。
normal、もしくは数値+pxや%、emなどの単位を使って設定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

word-spacing

スペースで区切られた単語と単語の間の大きさを指定します。
normal、もしくは数値+pxや%、emなどの単位を使って設定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

3. カラーと背景

3.1 カラー

プロパティ	値の例	説明
color	#333	テキストの色を指定

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

3.2 背景

プロパティ	値の例	説明
background-color	#f0f0f0	背景色を指定
background-image	none, url(‘background.jpg’)	背景画像を指定 none・・・デフォルト（背景画像なし） url()・・・()の中に画像のパスを指定
background-size	auto, cover, contain	背景画像のサイズを指定 auto・・・デフォルト（画像のサイズそのまま） cover・・・コンテナ全体に画像を表示 contain・・・画像全体を等倍で表示
background-position	center top, left bottom	背景画像の位置を指定 値は水平位置と垂直位置を指定
background-repeat	no-repeat	repeat・・・背景画像が縦方向および横方向に繰り返される（デフォルト） repeat-x・・・背景画像を横方向に繰り返す repeat-y・・・背景画像を縦方向に繰り返す no-repeat・・・背景画像は繰り返されず、一度だけ表示 space・・・背景画像が横・縦方向に繰り返され、画像の周りに余白をつける（画像は見切れない） round・・・背景画像が横・縦方向に繰り返され、画像の周りに余白をつけない（画像は見切れない）

background-color

要素に対して背景色の設定を行います。
同じ要素にbackground-imageを設定する場合、背景色は一番後ろに設定されます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

background-image

要素に対して背景画像の設定を行います。
後述のプロパティで背景画像の細かな設定を行います。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

background-size

背景画像のサイズを指定します。
決められたキーワードのほか、具体的な数値を指定することも可能です。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

background-position

背景画像の位置を指定します。
水平方向（left・center・right）と垂直方向（top・center・ bottom）の値をスペースで区切って設定します。具体的な数値を指定することも可能です。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

background-repeat

背景画像を繰り返し表示させるかどうかの設定ができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

4. ボーダー

4.1 ボーダーの設定

プロパティ	値の例	説明
border	1px solid #ccc	ボーダーの設定を指定
border-color	#ddd	ボーダーの色を指定
border-style	none, dotted, dashed, solid, double, groove, ridge, inset, outset	ボーダーのスタイルを指定 none・・・ボーダーなし dotted・・・点線 dashed・・・破線 solid・・・実線 double・・・二重線 groove・・・浮き出るような立体効果 ridge・・・めくれ上がるような立体効果 inset・・・くぼむような立体効果 outset・・・浮き出るような立体効果
border-radius	5px	ボーダーの角を丸く設定

border

要素に枠線を引くためのプロパティです。
値に「太さ（=border-width）」「種類（=border-style）」「色」の3つを設定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

border-width、border-color、border-styleとプロパティを分けて設定することも可能です。
その際、必ずすべてのプロパティが適用されている状態にしましょう。どれか一つでも欠けてしまうと枠線の設定ができません。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

border-radius

要素の角丸表現をするためのプロパティです。
例えば10pxと設定した場合、10pxの半径の円の角丸表現になります。
margin・paddingプロパティと同じような考え方で、値を1つ設定すると四角すべてを同じ角丸にでき、異なる値を入れることでそれぞれの角丸を調整も可能です。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

4.2 ボックスシャドウ

プロパティ	値の例	説明
box-shadow	3px 3px 5px #888888	要素にボックスシャドウを追加 x方向のずれ、y方向のずれ、ぼかしの半径、色を指定
outline	2px solid red	要素のアウトラインを指定

box-shadow

要素にボックスシャドウを適用させるプロパティです。
値にx軸方向のずれ・Y軸方向のずれ・ぼかしの範囲系・色　の4つをスペースで区切って設定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

outline

要素の外側の枠線（アウトライン）を設定するためのプロパティです。
borderプロパティとは異なり、要素のサイズを変更しません。
下記の例ではoutlineとborderプロパティの比較をしています。
それぞれのBOXをマウスオーバーすると、outlineは要素のサイズが変わらないのに対し、borderは要素のサイズも変化しています。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

5. アニメーション

animation、transitionプロパティについての詳細や事例はこちらを参考にしてください。

CSSだけでOK！ transition・animationで動き・アニメーションを実装する

6.変形

transformプロパティについての詳細や事例はこちらを参考にしてください。

移動・拡大・回転・3D表現もできる！transformプロパティを学習しよう【CSSアニメーション】

7.フィルター

7.1 Filter

プロパティ	値	説明
filter	none	フィルターなし。デフォルト値。
	blur(n)	画像をnピクセルぼかす。
	brightness(n)	画像の明るさをn倍に調整。
	contrast(n)	画像のコントラストをn倍に調整。
	drop-shadow(x, y, blur, color)	影を追加。xおよびyは影の位置、blurはぼかし量、colorは影の色。
	grayscale(n)	画像を白黒にする。nが0.0（デフォルト）なら白黒にせず、1.0なら完全に白黒にする。
	hue-rotate(angle)	画像の色相をangle度回転。
	invert(n)	画像の色を反転。nが1.0なら完全に反転。
	opacity(n)	画像の透明度をnに設定。
	saturate(n)	画像の彩度をn倍に調整。
	sepia(n)	画像をセピア色にする。nが1.0なら完全なセピア。

filter

画像にさまざまな効果を適用できるプロパティです。

blur(n)

画像のぼかし具合を設定します。blur(5px)のように数値を設定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

brightness(n)

画像の明るさを設定します。brightness(150%)（=1.5　でも可）のように数値で倍率を設定します。
100%（=0）を下回る数値を設定すると暗くすることができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

contrast(n)

画像のコントラストを設定します。contrast(150%)（=1.5　でも可）のように数値で倍率を設定します。
100%（=0）を下回る数値を設定するとコントラストを下げることができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

drop-shadow(x, y, blur, color)

画像にドロップシャドウをつけることができます。
drop-shadow()の中にX軸方向のずれ、Y軸方向のずれ、ぼかし、色をスペースで区切って指定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

grayscale(n)

画像のグレースケールを設定します。0〜100%（0〜1）の間で設定し、100%（=1）で完全なグレーにします。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

hue-rotate(angle)

画像の色相を変更させることができます。
hue-rotate(45deg)のように()には角度を設定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

invert(n)

画像の階調を変更することができるプロパティです。
0〜100%（0〜1）の間で設定し、100%（=1）で諧調が完全に反転します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

opacity(n)

画像の不透明度を変更することができるプロパティです。
0〜100%（0〜1）の間で設定し、0に近いほど透明度が高くなります。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

saturate(n)

画像の彩度を変更することができるプロパティです。saturate(150%)（=1.5　でも可）のように数値で倍率を設定します。
100%（=0）を下回る数値を設定すると彩度を下げることができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

sepia(n)

画像の色をセピアに変更することができるプロパティです。
0〜100%（0〜1）の間で設定し、100%（=1）で完全なセピアになります。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

8. CSSで使用される主な単位

単位	説明
px	ピクセル（画素）単位
em	フォントサイズに対する相対単位 1em＝親要素のフォントサイズ
rem	ルート要素（通常は<html>要素）のフォントサイズに対する相対単位
cm	センチメートル
mm	ミリメートル
in	インチ
pt	ポイント（1/72インチ）
pc	パイカ（1/6インチ）
%	パーセント 要素の寸法に対する相対単位
vw	ビューポートの幅に対する相対単位 1vwはビューポートの幅の1%
vh	ビューポートの高さに対する相対単位 1vhはビューポートの高さの1%
vmin	ビューポートの幅と高さのうち、小さい方に対する相対単位
vmax	ビューポートの幅と高さのうち、大きい方に対する相対単位
ex	現在のフォントの”x”の高さに対する相対単位
ch	“0”（ゼロ）文字の幅に対する相対単位

px、em、rem

pxが絶対単位なのに対し、emは親要素のフォントサイズ・remはルート要素のフォントサイズに対する相対単位となります。

下記の例ではhtml要素の文字サイズを62.5%としています。
これはブラウザのデフォルト文字サイズが16pxに設定されており、62.5%×16px=10pxとすることでrem単位の計算を簡単にしています。（こうすることで1rem＝10pxとなります）

一方bodyの文字サイズを10pxとすることで、em指定する場合も計算が楽になります。（1em＝10px）

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

%

親要素のサイズによって変化する相対単位です。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

vw、vh

vw（=viewport width）とvh（=viewport height）は、ブラウザの表示領域に対する相対的な単位です。
1vwは表示領域の幅の1%に相当し、1vhは表示領域の高さの1%に相当します。
これらを使用することで、画面サイズに応じて要素のサイズを調整することができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

vmin、vmax

vminはビューポートの幅（＝vw）と高さ（＝vh）のうち小さい方の値を採用し、vmaxは大きい方の値を採用します。
下記の例では.boxの縦横に50vminを設定することで、常にビューポートの幅と高さで小さい方の値の半分のサイズで可変するような設定になっています。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.