よく使うCSSプロパティ一覧【色・文字・余白・配置】
よく使うCSSプロパティ一覧【色・文字・余白・配置】
CSSを使いこなすには、よく使われる基本的なプロパティを理解しておくことが重要です。この記事では、特に使用頻度の高い「色」「文字」「余白」「配置」に関するCSSプロパティをまとめて紹介します。
1. 色に関するプロパティ
color：文字の色を指定します
例：color: #333;background-color：背景色を指定します
例：background-color: #f0f0f0;border-color：枠線の色を指定します
例：border-color: red;
2. 文字に関するプロパティ
font-size：文字の大きさを指定
例：font-size: 16px;font-weight：文字の太さを指定
例：font-weight: bold;font-family：フォントの種類を指定
例：font-family: 'Arial', sans-serif;text-align：文字の配置（左寄せ・中央寄せなど）
例：text-align: center;line-height：行間を調整
例：line-height: 1.5;
3. 余白に関するプロパティ
margin：外側の余白を設定
例：margin: 20px;padding：内側の余白を設定
例：padding: 10px;margin-top / margin-bottom / padding-leftなど：上下左右を個別指定
4. 配置に関するプロパティ
display：表示形式を設定（block, inline, flexなど）
例：display: flex;position：配置の基準を指定（static, relative, absolute, fixedなど）top / right / bottom / left：位置を指定（positionと組み合わせて使用）z-index：要素の重なり順を指定float：要素を左右に寄せる（現在はあまり使われません）
まとめ
- 色：
color,background-color,border-color - 文字：
font-size,font-weight,text-alignなど - 余白：
margin,paddingでレイアウト調整 - 配置：
display,position,z-indexなど
これらの基本プロパティを覚えておくと、CSSの設計や修正がスムーズに行えるようになります。ALTERNATE toolsでは、今後これらのプロパティを試せるビジュアルツールも公開予定です。
