よく使うCSSプロパティ一覧【CSS基礎】

テキスト関係

color（カラー）

文字の色。

p {
      color : #ff0000;
}

プロパティ	値の例	値の説明
color	#ff0000	16進数のカラーコード。他にRGB値、色名などで指定してもOK。
	rgb(255, 0, 0);	RGB値
	red	色名（147色定義されている）

font-size（フォントサイズ）

文字サイズ。

p {
      font-size : 20px;
}

プロパティ	値の例	値の説明
font-size	20px	値は数字＋単位。単位はpxrem」em%など。

font-weight（フォントウェイト）

文字の太さ。

p {
      font-weight : bold;
}

プロパティ	値の例	値の説明
font-weight	bold	標準はnormal、太字はbold。
	700	標準は400、太字は700。

font-style（フォントスタイル）

文字の形。

p {
      font-style : italic;
}

プロパティ	値の例	値の説明
font-style	normal	標準（垂直の状態）。
	italic	筆記体風の斜体。イタリックがフォントに含まれていない場合は普通の斜体になる。
	oblique	斜体。

font-family（フォントファミリー）

フォントの種類。

p {
      font-family: "Noto Sans JP", sans-serif;
}

プロパティ	値の例	値の説明
font-family	serif	フォント名をカンマ区切りで複数指定できる。左から順にフォントがあればそれで表示。serifは明朝体。sans-serifはゴシック体。

line-height（ラインハイト）

行の高さ。

p {
      line-height: 40px;
}

プロパティ	値の例	値の説明
line-height	40px	１行の高さを指定する。フォントサイズが20pxでline-heightを40pxにした場合、文字の上下に10pxの余白をとる。

letter-spacing（レタースペーシング）

文字と文字の間のサイズ。

p {
      letter-spacing: 3px;
}

プロパティ	値の例	値の説明
letter-spacing	3px	文字と文字の間のサイズ。

text-align（テキストアライン）

要素内のテキスト等の水平方向の位置。

p {
      text-align: center;
}

プロパティ	値の例	値の説明
text-align	left	文字等の位置を、左寄せ、真ん中寄せ、右寄せなどに設定する。
	center
	right

text-decoration（テキストデコレーション）

文字の装飾。

p {
      text-decoration: underline;
}

プロパティ	値の例	値の説明
text-decoration	underline	下線や点線などを文字に適用する。

要素（タグ）の調整・装飾

width（ウィズ）

要素の幅。

.box {
      width: 200px;
}

プロパティ	値の例	値の説明
width	200px	値は数字＋単位。単位はpx%など。インラインボックスには反映されない。

max-width（マックスウィズ）

要素の最大幅。

.box {
      max-width: 200px;
}

プロパティ	値の例	値の説明
max-width	200px	基本はwidthと同じ。値のサイズより大きくはならず、小さくは可変する。

min-width（ミニマムウィズ）

要素の最小幅。

.box {
      min-width: 200px;
}

プロパティ	値の例	値の説明
min-width	200px	基本はwidthと同じ。値のサイズより小さくはならず、大きくは可変する。

height（ハイト）

要素の高さ。

.box {
      height: 500px;
}

プロパティ	値の例	値の説明
height	500px	値は数字＋単位。単位はpx%など。インラインボックスには反映されない。

max-height（マックスハイト）

要素の最大高さ。

.box {
      max-height: 500px;
}

プロパティ	値の例	値の説明
max-height	500px	基本はheightと同じ。値のサイズより大きくはならず、小さくは可変する。

min-height（ミニマムハイト）

要素の最小高さ。

.box {
      min-height: 500px;
}

プロパティ	値の例	値の説明
min-height	500px	基本はheightと同じ。値のサイズより小さくはならず、大きくは可変する。

margin（マージン）

要素の外側の余白。

.box {
      pmargin: 50px;
}

プロパティ	値の例	値の説明
margin	50px 20px 50px 20px	値が１つだと４方向。２つだと上下左右。３つだと上左右下。４つだと上右下左と時計回り。値はスペースで区切る。
margin-top	50px	要素の外側の上方向の余白。
margin-right		要素の外側の右方向の余白。
margin-bottom		要素の外側の下方向の余白。
margin-left		要素の外側の左方向の余白。

padding（パディング）

要素の内側の余白。

.box {
      padding: 50px;
}

プロパティ	値の例	値の説明
padding	50px 20px 50px 20px	値が１つだと４方向。２つだと上下左右。３つだと上左右下。４つだと上右下左と時計回り。値はスペースで区切る。
padding-top	50px	要素の内側の上方向の余白。
padding-right		要素の内側の右方向の余白。
padding-bottom		要素の内側の下方向の余白。
padding-left		要素の内側の左方向の余白。

border（ボーダー）

要素の枠線。

.box {
      border: 1px solid #000000;
}

プロパティ	値の例	値の説明
border	1px solid #000000	要素の４方向に枠線を付ける。線幅線の種類線の色をスペース区切りで指定。順不同。
border-top		要素の上方向に枠線を付ける。
border-right		要素の右方向に枠線を付ける。
border-bottom		要素の下方向に枠線を付ける。
border-left		要素の左方向に枠線を付ける。

border-radius（ボーダーレイディアス）

要素を角丸にする。

.box {
      border-radius: 30px;
}

プロパティ	値の例	値の説明
border-radius	30px	値が１つだと４つ角、４つだと左上右上右下左下と時計回り。値はスペースで区切る。他にも指定方法があるが、この２つで大体OK。

background（バックグラウンド）

要素の背景色や背景画像を設定する。

.box {
      background: #ffffff url(images/bg.jpg) repeat;
}

プロパティ	値の例	値の説明
background	#ffffff url(images/bg.jpg) repeat	background関連プロパティの一括指定（値が一つでも使える。複数はスペースで区切る）。background-positionとbackground-sizeは/（スラッシュ）で区切り連続する必要があるが、他は順不同。
background-color	#ffffff	背景色の指定。16進数のカラーコード、他にRGB値、色名などで指定してもOK。
background-image	url(images/bg.jpg)	背景画像をurl(パス)で指定。
background-repeat	no-repeat	背景画像の繰り返し。
background-position	left top	背景画像の位置。横・縦で指定。数値も可。
background-size	50%	背景画像のサイズ。数値以外にもcontain（要素に合わせて拡大）cover（要素に合わせて隙間なく拡大）なども指定可。

transform（トランスフォーム）

要素の変形。

.box {
      transform: scale(2, 1);;
}

プロパティ	値の例	値の説明
transform	translateX(50px)	移動回転拡大縮小ひずみなど要素の様々な変形が可能。

transition（トランジション）

CSSプロパティの変化の時間や動作。

.box {
      transition: background 1s;
}

プロパティ	値の例	値の説明
transition	all 1s	対象のプロパティとその秒数などを指定する。:hoverなどと組み合わせて使用。

list-style（リストスタイル）

リスト要素のマーカーデザイン。

.box {
      list-style: none;
}

プロパティ	値の例	値の説明
list-style	none	list-style関連プロパティの一括指定。noneはリストマーカー無し。
list-style-type	disc	リストマーカーの形を指定。
list-style-image	url(images/list.jpg)	リストマーカーを画像にする場合url(パス)で指定。
list-style-position	inside	リストマーカーの位置を指定。要素の内外。

box-sizing（ボックスサイジング）

要素の幅と高さの計算方法。

.box {
      box-sizing: border-box;
}

プロパティ	値の例	値の説明
box-sizing	border-box	要素のpaddingやborderの値を、widthheightに含める。
	content-box	要素のpaddingやborderの値を、widthheightに含めない。初期値。

overflow（オーバーフロウ）

要素からはみ出したコンテンツの表示方法。

.box {
      overflow: hidden;
}

プロパティ	値の例	値の説明
overflow	visible	はみ出して表示。初期値。
	hidden	はみ出したら非表示。
	scroll	スクロールバーを常に表示。
	auto	はみ出したらスクロールバーを表示。
	clip	hiddenとほぼ同じだが、要素内での全てのスクロールが禁止。

レイアウト関係

display（ディスプレイ）

要素のボックスの変更や、子要素のレイアウト方法の指定。

.box {
      display: flex;
}

プロパティ	値の例	値の説明
display	block	要素がブロックボックスを生成する。
	inline	要素がインラインボックスを生成する。
	inline-block	要素がインラインブロックボックスを生成する。（インラインボックスのまま、幅・高さ・余白の設定が可能）
	flex	要素がフレックスボックスモデルを生成する。
	grid	要素がグリッドモデルを生成する。

position（ポジション）

要素の配置方法。

.box {
      position: fixed;
}

プロパティ	値の例	値の説明
position	static	要素配置の既定値（元の状態）。
	relative	要素の元位置からの相対配置。
	absolute	親要素を基準とする相対配置。親要素指定がなければブラウザ基準。
	fixed	ブラウザを基準としての絶対配置。固定され、スクロールしても動かない。
	sticky	直近の親要素を基準として、スクロールで通り過ぎずに指定位置で固定される。

positionと一緒に使うプロパティ

positionで移動させる要素の位置等。

.box {
      position: fixed;
      top: 50%;
      right: 10px;
      z-index: 5;
}

プロパティ	値の例	値の説明
top	100px	上からの移動距離。
right	50%	右からの移動距離。
bottom	50px	下からの移動距離。
left	50%	左からの移動距離。
z-index	5	position要素の重なり順。数字を順に使う必要はなく、単純に数値の大きい方が上になる。