CSSのプロパティって何がある？100個以上をご紹介！

CSSにはたくさんのプロパティがあります。まず、プロパティがわからない人はこちらのリンクをタップしてください。この記事はどんなプロパティがあるのかをざっと見ることができる記事になっています。

基本的なスタイル

プロパティ	説明	例
color	文字の色を指定	color: red;
opacity	透明度を指定（0 = 完全透明, 1 = 不透明）	opacity: 0.5;
font-size	文字の大きさ	font-size: 16px;
font-weight	文字の太さ	font-weight: bold;
font-family	フォントを指定	font-family: Arial, sans-serif;
font-style	文字のスタイル（斜体など）	font-style: italic;
text-align	テキストの位置を指定	text-align: center;
text-decoration	下線・打ち消し線など	text-decoration: underline;
text-transform	大文字・小文字の変換	text-transform: uppercase;
line-height	行間の指定	line-height: 1.5;

ボックスモデル

プロパティ	説明	例
width	幅を指定	width: 100px;
height	高さを指定	height: 200px;
min-width	最小幅を指定	min-width: 300px;
max-width	最大幅を指定	max-width: 600px;
min-height	最小高さを指定	min-height: 100px;
max-height	最大高さを指定	max-height: 500px;
margin	外側の余白	margin: 10px;
padding	内側の余白	padding: 20px;
border	枠線を指定	border: 2px solid black;
border-radius	角を丸くする	border-radius: 10px;

レイアウト関連

プロパティ	説明	例
display	表示形式を指定	display: flex;
visibility	表示・非表示の切り替え	visibility: hidden;
overflow	はみ出た部分の処理	overflow: hidden;
z-index	重なり順を指定	z-index: 10;
position	配置方法を指定	position: absolute;
top	上からの位置を指定	top: 50px;
bottom	下からの位置を指定	bottom: 20px;
left	左からの位置を指定	left: 30px;
right	右からの位置を指定	right: 40px;

背景関連

プロパティ	説明	例
background-color	背景色を指定	background-color: lightblue;
background-image	背景画像を指定	background-image: url(“image.jpg”);
background-size	背景画像のサイズ	background-size: cover;
background-repeat	背景画像の繰り返し	background-repeat: no-repeat;
background-position	背景画像の位置	background-position: center;
background-attachment	背景画像の固定	background-attachment: fixed;

フレックスボックス（Flexbox）

プロパティ	説明	例
display	フレックスボックスを適用	display: flex;
flex-direction	主軸の方向	flex-direction: row;
justify-content	子要素の整列（横方向）	justify-content: center;
align-items	子要素の整列（縦方向）	align-items: flex-start;
flex-wrap	子要素の折り返し	flex-wrap: wrap;
flex-grow	拡張比率	flex-grow: 1;
flex-shrink	縮小比率	flex-shrink: 0;

グリッド（CSS Grid）

プロパティ	説明	例
display	グリッドを適用	display: grid;
grid-template-columns	列のサイズを指定	grid-template-columns: 1fr 2fr;
grid-template-rows	行のサイズを指定	grid-template-rows: auto;
grid-gap	セル間の余白	grid-gap: 10px;
grid-column	列の範囲を指定	grid-column: 1 / 3;
grid-row	行の範囲を指定	grid-row: 2 / 4;

アニメーション

プロパティ	説明	例
transition	変化をスムーズにする	transition: all 0.3s ease-in-out;
animation	アニメーション適用	animation: fadeIn 2s infinite;
@keyframes	アニメーションの定義	@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

変形（Transform）

プロパティ	説明	例
transform	要素を変形	transform: rotate(45deg);
rotate	回転	transform: rotate(30deg);
scale	拡大・縮小	transform: scale(1.5);
translate	移動	transform: translate(50px, 100px);

フィルター（Filter）

プロパティ	説明	例
filter	画像のフィルター効果	filter: blur(5px);
blur	ぼかし	filter: blur(3px);
brightness	明るさ	filter: brightness(150%);
contrast	コントラスト	filter: contrast(200%);

ただ表にして並べただけですけど、ざっと見ることはできるので初心者で何があるかわからない人や、玄人でいろいろ知ってる気になってしまっている人はこれを見て復習してください。