標準のボックスモデルとIE互換性

標準のCSSボックスモデルでは、要素の幅はコンテンツ領域 + パディング + ボーダー + マージンで計算されます。一方、IEの古いモデルでは、幅はコンテンツ領域 + パディング + ボーダー + マージンで計算されます。

標準モデルはbox-sizing: content-boxで定義され、幅/高さプロパティはコンテンツ領域のサイズを指します。IEモデルはbox-sizing: border-boxで定義され、幅/高さプロパティはコンテンツ + パディング + ボーダーを指します。

要素の配置方法

水平中央揃え（固定幅）

.container {
  width: 400px;
  margin: 0 auto;
  border: 1px solid #ccc;
}

絶対配置による水平中央揃え

.container {
  position: relative;
  width: 100%;
  height: 200px;
}
.center-item {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 200px;
  height: 100px;
  background: #336699;
}

Flexboxによる水平垂直中央揃え

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background: #f0f0f0;
}
.center-element {
  width: 150px;
  height: 100px;
  background: #0099cc;
}

CSS3の新機能と重要トピック

フロックスレイアウト

フロックスレイアウトは、要素の配置をより効率的に制御するための技術です。

.flex-parent {
  display: flex;
  gap: 10px;
}
.flex-child {
  flex: 1;
  background: #e0e0e0;
  padding: 15px;
}

アニメーションとトランジション

アニメーションはキーフレームを定義し、トランジションはプロパティの変化を滑らかにします。

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

.slide-element {
  animation: slide 3s infinite;
  width: 50px;
  height: 50px;
  background: #ff6b6b;
}

.hover-effect {
  transition: transform 0.3s ease;
}

.hover-effect:hover {
  transform: scale(1.1);
}

レスポンシブデザインの実装

レスポンシブデザインは、メディアクエリを使用して異なる画面サイズに応じてスタイルを変更します。

@media (max-width: 768px) {
  .responsive-element {
    width: 90%;
    padding: 10px;
  }
}

@media (min-width: 769px) {
  .responsive-element {
    width: 50%;
    padding: 20px;
  }
}

位置指定とレイアウトの最適化

要素の垂直配置

要素の垂直配置には、flex-directionプロパティを使用します。

.vertical-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.vertical-item {
  flex: 1;
  border: 1px solid #333;
  margin: 5px;
}

要素の透明度と色の制御

透明度を制御するには、opacityとrgba()を使用できます。

.transparent-element {
  opacity: 0.7;
}

.color-element {
  background-color: rgba(0, 0, 0, 0.5);
}

レスポンシブレイアウトの実装例

レスポンシブレイアウトは、rem単位とメディアクエリを組み合わせて実装します。

html {
  font-size: 16px;
}

@media (max-width: 600px) {
  html {
    font-size: 14px;
  }
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.item {
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .item {
    width: calc(50% - 20px);
  }
}