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

HOME > javascriptを使って、画像サイズに惑わされず上下中央揃えできちゃうの巻

画像を使わずCSSだけで角丸を作るの巻

角丸は画像を使ってやるのが今までの定番でしたが、どうも面倒で仕方ない。
それが、「border-radius」プロパティを使えば簡単に実現できるのです。

わーい角丸が簡単にできるぞーい

とっても便利なのですが、「border-radius」プロパティはIEには対応していないのです。
そこで、「PIE.htc」を使ってIEでも実現できるようにします。
PIE.htcはCSSからのパスではなく、ページからのパスを記述しなければいけないので注意が必要です。

HTML

<div class="example11">
<p>わーい角丸が簡単にできるぞーい</p>
</div>

CSS

.example11 {
  /*角丸*/
  border-radius: 10px; /* CSS3 */
  -webkit-border-radius: 10px; /* Safari,Google Chrome用 */
  -moz-border-radius: 10px; /* Firefox用 */
  behavior: url(../js/PIE.htc); /* IE用 */

  /*レイアウト*/
  width: 600px;
  text-align: center;
  padding: 30px;
  background-color: #0CF;
}

ただし、ボーダーを使って角丸にする場合は注意が必要です。
問題はMacのSafari。幅を指定してしまうと、右側のボーダーが消えてしまいます。。。
指定しないときちんと表示されるのになぜ・・・?

幅を指定しないとSafariでも正常に表示されるが。。。

↓MacのSafariで見てちょ。

<div>に幅を指定すると、右側のボーダーが消えたり切れたりする現象が。。。
(Safari)

<div>をひとつ増やしてくくり、それに幅を指定する。
その中の元々の<div>にはボーダー分少ない幅を指定するときちんと表示する。
しかしどういう理由か、幅のサイズや内容量によってはやはり消えてしまうことも多く不安定。
画面をスクロールすると切れるということもしばしば。。。

Safariだけハックをかけて角丸を回避させるという対処でもいいのかもしれない。

HTML

<div class="example11-plus">
<div class="example11-ok-macopera">
<p>サイズや内容によって切れたりするので使いどころは?かもしれない。</p>
</div>
</div>

CSS

.example11-plus {
  /*角丸*/
  border-radius: 6px; /* CSS3 */
  -webkit-border-radius: 6px; /* Safari,Google Chrome用 */
  -moz-border-radius: 6px; /* Firefox用 */
  behavior: url(../js/PIE.htc); /* IE用 */
  /*レイアウト*/
  width: 660px;
}
.example11-ok-macopera {
  /*角丸*/
  border-radius: 6px; /* CSS3 */
  -webkit-border-radius: 6px; /* Safari,Google Chrome用 */
  -moz-border-radius: 6px; /* Firefox用 */
  behavior: url(../js/PIE.htc); /* IE用 */
  /*レイアウト*/
  width: 598px; /*ボーダー分少ない幅*/
  text-align: center;
  padding: 30px;
  background-color: #FFF;
  border: 1px solid #0CF;
}

テーブルもこんな感じで角丸にできます。

車両本体価格 70万円未満 100万円未満 150万円未満 200万円未満 300万円未満
システム利用料 52,500円 84,000円 84,000円 105,000円 126,000円

HTML

<div class="example11-wrap">
<table class="example11-table" summary="価格表">
<tr>
<th>車両本体価格</th>
<td>70万円未満</td>
<td>100万円未満</td>
<td>150万円未満</td>
<td>200万円未満</td>
<td class="right-noline">300万円未満</td>
</tr>
<tr>
<th class="bottom-noline">システム利用料</th>
<td class="bottom-noline">52,500円</td>
<td class="bottom-noline">84,000円</td>
<td class="bottom-noline">84,000円</td>
<td class="bottom-noline">105,000円</td>
<td class="bottom-noline right-noline">126,000円</td>
</tr>
</table>
</div>

CSS

.example11-wrap {
  /*角丸*/
  border-radius: 6px; /* CSS3 */
  -webkit-border-radius: 6px; /* Safari,Google Chrome用 */
  -moz-border-radius: 6px; /* Firefox用 */
  behavior: url(../js/PIE.htc); /* IE用 */
  /*レイアウト*/
  background-color: #FFF;
  border: 1px solid #CCC;
  width: 939px; /*コンテンツ幅が940pxなので1px減らしている。*/
}
.example11-table {
  width: 939px; /*コンテンツ幅が940pxなので1px減らしている。*/
}
.example11-table th {
  width: 130px;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  background-image: url(../example/img/table_line_bg.png);
  background-repeat: repeat-y;
  background-position: right top;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #CCC;
}
.example11-table td {
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #CCC;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #CCC;
  line-height: 120%;
}
.example11-table .right-noline {
  border-right-style: none; /*<div>のボーダーと重なりあう線を消す*/
}
.example11-table .bottom-noline {
  border-bottom-style: none; /*<div>のボーダーと重なりあう線を消す*/
}

↑ページトップへ

HOMEへ