🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSSボックス装飾まとめ：カード・枠線・影・背景・見出しライン

ボックス装飾は、情報をまとまりとして見せるためのCSSです。カード、注意枠、見出しライン、背景色を使い分けると、長い記事でも読みやすくなります。

基本の枠線ボックス

.info-box {
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 6px;
  background: #fff;
}

カード型レイアウト

カードは一覧や関連記事に向いています。影を強くしすぎると古い印象になるので、控えめにします。

.card {
  padding: 1.25rem;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

点線と見出しライン

.dotted-separator {
  border-top: 2px dotted #ccc;
  margin: 2rem 0;
}

.section-title {
  padding-bottom: 0.5rem;
  border-bottom: 3px solid #0b63ce;
}

背景の使い分け

グラデーションや半透明背景は目立ちますが、使いすぎると読みにくくなります。重要な告知やヒーロー部分など、限定した場所で使うのが安全です。

.gradient-area {
  background: linear-gradient(135deg, #0b63ce, #2ca58d);
  color: #fff;
  padding: 2rem;
}

.overlay-box {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 1rem;
}