🚀

CSSでつまずきやすいポイントまとめ

に公開
CSS
tech

1. opacity と rgba の違い

  • opacity
    要素全体の透明度を設定。背景だけでなく文字やボーダーも含めて透明になる。
div {
  opacity: 0.5; /* 要素全体が半透明になる */
}
  • rgba
    色だけに透明度を設定できる。文字やボーダーを別に透明化したい場合に便利。
div {
  background-color: rgba(255, 0, 0, 0.5); /* 背景色だけ半透明 */
}

2. position の基本と注意点

static

  • デフォルト値
  • top, right, bottom, left は効かない

relative

  • 要素は通常の位置に表示される
  • top, right, bottom, left で位置を調整できる

absolute

  • 表示する空間（レイアウトの位置）が削除される
  • 親要素に position が指定されていなければ、body に対して上下左右が決まる

fixed

  • 表示する空間が削除される点は absolute と同じ
  • 表示位置は viewport を基準に決まる

sticky

  • 通常は relative と同じ挙動
  • ビューportから外れそうになると、スクロールしても画面内に残る

3. transition の使い方とベストプラクティス

a {
  transition: background-color 0.3s ease-in;
}
  • 変化させたい CSS プロパティだけを書くのがベスト
  • all や省略すると、ホバー時に変化させるプロパティが増えたときに意図しない挙動が起きることがある

4. img タグの改行によるホワイトスペース問題

  • img タグを改行すると、インライン要素としてホワイトスペースが発生することがある
  • flexbox を使うとホワイトスペースを気にせずレイアウトできる
.container {
  display: flex;
}

Discussion