* You are viewing Posts Tagged ‘CSS’

CSS2.0で画像を使わず角を丸くする方法

このエントリーをはてなブックマークに追加
Check

CSS3.0に対応したブラウザが登場して「border-radius」プロパティを使えば簡単に角丸を表現できるようになってきましたが、Web制作の現場ではまだまだIE6対応の案件などがけっこうあるのが実情です。
そこで、画像を使わずにCSS2.0のみで角を丸くする方法を紹介します。

HTMLソース

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="kado">
  <div class="kado1"></div>
  <div class="kado2"></div>
  <div class="kado3"></div>
  <div class="kado4"></div>
</div>
<div class="mainArea">
<!-- ここに内容を記載 -->
</div>
<div class="kado">
  <div class="kado4"></div>
  <div class="kado3"></div>
  <div class="kado2"></div>
  <div class="kado1"></div>
</div>

CSSソース

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.kado {
  background-color: #FFF; /* 背景色 */
}
.kado div {
  height: 1px;
  overflow: hidden;
  background-color: #F7941D; /* 角丸BOXの背景色 */
}
.kado1 {
  margin: 0 5px;
}
.kado2 {
  margin: 0 3px;
}
.kado3 {
  margin: 0 2px;
}
.kado4 {
  margin: 0 1px;
  height: 2px;
}
.mainArea {
  background-color: #F7941D; /* 角丸BOXの背景色 */
}

画像を使わずに古いバージョンのブラウザでもCSSのみで角丸の表現が出来るので、クロスブラウザには有効かもしれませんが、div要素の中が空になってしまうので、文法的にはあまり良くないかもしれません。
ソースを綺麗に書きたい人は画像を使った方法がいいと思いますが、手っ取り早くCSSのみで実装したい場合はおすすめです。
また、CSS3.0では「border-radius」というプロパティで簡単に角丸を表現出来るので、早くCSS3.0が標準になってほしいです。

Date: 2011.4.14木曜日 12:01:00 Category: CSS Tags: