CSS/プロパティの機能別分類

この章では、CSSのプロパティをその機能ごとに分類して解説します。これにより、特定の目的に応じたプロパティを効率的に学ぶことができます。

プロパティの分類

以下のカテゴリーに分類します。

• レイアウト関連
• テキストとフォント関連
• 背景とボーダー関連
• 色と透明度関連
• アニメーションと変形関連
• その他のユーティリティプロパティ

レイアウト関連

レイアウトを制御するためのプロパティです。

主なプロパティ

• display: 要素の表示形式を定義します。
• position, top, left, z-index: 要素の位置を制御します。
• flex, grid: 柔軟なレイアウトを可能にします。
• float, clear: フロートを設定します。
• overflow: 内容のはみ出しを制御します。

使用例

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

テキストとフォント関連

テキストやフォントのスタイルを調整するためのプロパティです。

主なプロパティ

• color, font-family, font-size: テキストの外観を定義します。
• line-height, letter-spacing: テキスト間の間隔を調整します。
• text-align, text-decoration: テキストの整列や装飾を設定します。

使用例

h1 {
  font-family: 'Arial, sans-serif';
  font-size: 2rem;
  color: #333;
}

背景とボーダー関連

背景やボーダーに関するプロパティです。

主なプロパティ

• background-color, background-image: 背景色や背景画像を設定します。
• border, border-radius: ボーダーのスタイルや角の丸みを設定します。
• box-shadow: ボックスに影を付けます。

使用例

.card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

色と透明度関連

色や透明度を操作するプロパティです。

主なプロパティ

• opacity: 要素の透明度を設定します。
• color, background-color: テキストや背景の色を指定します。

使用例

.button {
  background-color: rgba(255, 0, 0, 0.5);
  color: white;
}

アニメーションと変形関連

アニメーションや変形に関するプロパティです。

主なプロパティ

• transform, transition: 要素を変形・移動させます。
• animation: アニメーションを定義します。

使用例

.box {
  transition: transform 0.3s ease;
}
.box:hover {
  transform: scale(1.2);
}

その他のユーティリティプロパティ

その他の便利なプロパティをまとめます。

主なプロパティ

• cursor: カーソルの形状を指定します。
• visibility: 要素の可視性を制御します。

まとめ

本章では、CSSのプロパティを機能別に分類し、それぞれの特徴や使用例を紹介しました。これらを活用して、効率的なスタイル設定を目指してください。