いつも忘れて思い出すのに時間がかかるCSSテクニック集

HOME > 角丸で囲まれた矩形デザインをCSSの背景処理で作るの巻

角丸で囲まれた矩形デザインをCSSの背景処理で作るの巻

よくある、角丸のレイアウトデザイン↓。
上下のヘッダーとフッターの部分をCSSの背景処理で作りたい。

2020.03.04
東国原総理大臣、橋下官房長官を更迭。苦渋の決断、まさに泣いて馬謖を切る。
2020.03.04
田村淳山口県知事、大泉洋北海道知事と連携し政治グループ結成へ。
2020.03.04
田村淳山口県知事、大泉洋北海道知事と連携し政治グループ結成へ。

HTML

<div class="example08">
<div class="inner-box">
<dl>
<dt>2020.03.04</dt>
<dd>東国原総理大臣、橋下官房長官を更迭。苦渋の決断、まさに泣いて馬謖を切る。</dd>
<dt>2020.03.04</dt>
<dd>田村淳山口県知事、大泉洋北海道知事と連携し政治グループ結成へ。</dd>
<dt>2020.03.04</dt>
<dd>田村淳山口県知事、大泉洋北海道知事と連携し政治グループ結成へ。</dd>
</dl>
</div>
</div>

CSS

.example08 {
  background-image: url(../example/img/example08_parts_header.png); /*角丸ボックス上部の画像*/
  background-repeat: no-repeat;
  background-position: left top;
  width: 240px;
  padding-top: 5px; /*背景画像の高さをpaddingで確保*/
}
.example08 .inner-box {
  width: 240px;
  background-image: url(../example/img/example08_parts_footer.png); /*角丸ボックス下部の画像*/
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-bottom: 5px; /*背景画像の高さをpaddingで確保*/
}
.example08 .inner-box dl {
  padding-right: 10px;
  padding-left: 10px;
  background-image: url(../example/img/example08_parts_middle.png); /*ボックス左右の線の画像*/
  background-repeat: repeat-y;
  background-position: left top;
  overflow: hidden; /*一番下の記事間の区切り線を非表示にするため*/
  _zoom: 1; /*IE6バグ対策*/
}
.example08 .inner-box dl dt {
  color: #F60;
  padding-top: 5px;
}
.example08 .inner-box dl dd {
  margin-bottom: -5px; /*下5pxを見えなくして区切り線を消す*/
  padding-bottom: 10px;
  background-image: url(../example/img/bar_bg.png);
  background-repeat: repeat-x;
  background-position: left bottom;
}

【ポイント】
HTMLタグが入れ子になってしまうが、角丸部分を直接画像配置した場合、
ボックス下に余計な余白ができてしまう(IE6,7)ので回避するにはこの方法がいいかも。
ちなみに、画像下に余分な余白ができてしまった場合、font-size: 0;を、
imgにcssを指定してあげれば解決するんだけれど。。。

↑ページトップへ

HOMEへ