🎨 CSSチートシート
| プロパティ | 用途 | 値の例 |
|---|---|---|
color | 文字色 | color: #3a86ff; |
font-size | 文字サイズ | font-size: 16px; |
font-weight | 文字の太さ | font-weight: bold; |
background-color | 背景色 | background-color: #f0f4ff; |
border | 枠線 | border: 2px solid #ccc; |
border-radius | 角丸 | border-radius: 8px; |
margin | 外側の余白 | margin: 16px auto; |
padding | 内側の余白 | padding: 24px; |
display | 表示方法 | display: flex; |
justify-content | Flex横方向の揃え | justify-content: center; |
align-items | Flex縦方向の揃え | align-items: center; |
flex-direction | Flex並ぶ方向 | flex-direction: column; |
width / height | 幅 / 高さ | width: 300px; |
@media | メディアクエリ | @media (min-width: 768px) |
box-sizing | 幅の計算方法 | box-sizing: border-box; |
position | 配置方法 | position: relative; |
z-index | 重なり順 | z-index: 10; |
transition | 変化のアニメーション | transition: all 0.3s ease; |
transform | 移動・回転・拡大 | transform: translateX(10px); |
animation | キーフレームアニメーション | animation: fadeIn 1s ease; |
grid-template-columns | Grid列の定義 | grid-template-columns: repeat(3, 1fr); |
gap | Flex/Gridの間隔 | gap: 16px; |
overflow | はみ出し処理 | overflow: hidden; |
opacity | 透明度 | opacity: 0.5; |
cursor | カーソルの形 | cursor: pointer; |
text-align | テキスト揃え | text-align: center; |
line-height | 行の高さ | line-height: 1.6; |
box-shadow | 影 | box-shadow: 0 2px 8px rgba(0,0,0,0.1); |
text-decoration | テキスト装飾 | text-decoration: none; |
visibility | 表示/非表示（場所は残る） | visibility: hidden; |
📖 関連する用語
❓ よくある質問
CSSチートシートはどんな人向け？
CSS初心者〜中級者向け。基本プロパティからFlexbox/Gridまで網羅しています。
プロパティが効かないときは？
エラー辞典でよくある原因と解決策を確認できます。
印刷して使える？
はい。印刷に最適化されたレイアウトで出力されます。
⚠️ よくあるエラー
- スタイルが特定の要素に当たらない — セレクタ名のタイポ
- 余白がおかしい — marginとpaddingの混同
- Flexboxでレイアウトが崩れる — 親要素に書く
📎 このチートシートを紹介する
ブログや記事で紹介する際は、以下のURLをご利用ください。
https://start-web-programming.com/cheatsheet/css/