CSS3よく使うプロパティ一覧（100個）
✅ レイアウト系
| プロパティ | 説明 | 主なパラメータ | 使用例 |
|---|---|---|---|
| display | 表示方法 | block, inline, flex, grid, none | display: flex; |
| position | 位置の指定 | static, relative, absolute, fixed, sticky | position: absolute; |
| top | 上からの位置 | 数値(px, %, em) | top: 10px; |
| right | 右からの位置 | 数値 | right: 20px; |
| z-index | 重なり順 | 整数値 | z-index: 10; |
| float | 回り込み | left, right, none | float: right; |
| overflow | はみ出し制御 | visible, hidden, scroll, auto | overflow: hidden; |
✅ ボックスモデル
| プロパティ | 説明 | 主なパラメータ | 使用例 |
|---|---|---|---|
| width | 幅 | px, %, em, auto | width: 100%; |
| padding | 内側余白 | px, %, em | padding: 10px; |
| margin | 外側余白 | px, %, auto | margin: auto; |
| box-sizing | サイズ計算 | content-box, border-box | box-sizing: border-box; |
✅ 背景・枠線
| プロパティ | 説明 | 主なパラメータ | 使用例 |
|---|---|---|---|
| background-color | 背景色 | 色名, #HEX, rgb() | background-color: #eee; |
| background-image | 背景画像 | url() | background-image: url("bg.jpg"); |
| border | 境界線 | 太さ 種類 色 | border: 1px solid black; |
| border-radius | 角丸 | px, % | border-radius: 8px; |
| box-shadow | 影 | offsetX offsetY blur color | box-shadow: 2px 2px 5px #999; |
✅ フォント・文字
| プロパティ | 説明 | 主なパラメータ | 使用例 |
|---|---|---|---|
| color | 文字色 | #HEX, 色名 | color: #333; |
| font-size | サイズ | px, em, rem | font-size: 16px; |
| font-weight | 太さ | normal, bold, 100〜900 | font-weight: bold; |
| text-align | 整列 | left, center, right, justify | text-align: center; |
✅ Flexbox
| プロパティ | 説明 | 主なパラメータ | 使用例 |
|---|---|---|---|
| display | Flexを有効化 | flex | display: flex; |
| flex-direction | 並び方向 | row, column | flex-direction: column; |
| justify-content | 横揃え | center, space-between | justify-content: center; |
| align-items | 縦揃え | center, flex-start, stretch | align-items: stretch; |
✅ トランジション・アニメーション
| プロパティ | 説明 | 主なパラメータ | 使用例 |
|---|---|---|---|
| transition | アニメ一括指定 | プロパティ 時間 イージング | transition: all 0.3s ease; |
| animation | アニメ定義 | 名前 時間 イージング | animation: fadein 1s ease-in; |
✅ メディアクエリ
| 構文 | 説明 | 主なパラメータ | 使用例 |
|---|---|---|---|
| @media | 条件付きスタイル | max-width, orientation | @media (max-width: 768px) { ... } |
✅ その他
| プロパティ | 説明 | 主なパラメータ | 使用例 |
|---|---|---|---|
| cursor | マウスカーソル | pointer, default | cursor: pointer; |
| opacity | 透明度 | 0〜1 | opacity: 0.8; |
| transform | 変形 | rotate(), scale(), translate() | transform: scale(1.2); |