水平線に一工夫

hrタグで水平線を引けることは既にご存じかと。今回はCSSを使って装飾を施し、実用度を高めてみます。

テクニック使用後（IEオンリー）

---

---

---

テクニック使用後（一般）

---

---

---

---

やり方

IEオンリー用にはフィルターを使っています。firefoxではただの水平線になってしまいますが、レイアウトに大きな問題が出るわけではないので、使ってみる価値はあります。

スタイルシート上から順にこんな感じになります。

#a{
    height:5px;
    background-color:#663300;
filter:progid:DXImageTransform.Microsoft.Alpha
(style=2,opacity=100,finishOpacity=0);
}
#b{
    height:5px;
    background-color:#663300;
filter:progid:DXImageTransform.Microsoft.Alpha
(style=3,opacity=100,finishOpacity=0);
}
#c{
    height:5px;
    background-color:#663300;
filter:progid:DXImageTransform.Microsoft.Gradient
(gradientType=0,startColorStr=#663300,endColorStr=#ffffff);
}

filterに関する情報はCSS Dencitieのフィルターに関する部分をご覧下さい。

ここからはfirefoxでもいけます。でもなぜかOperaは一部ダメです。まぁ、気にするほどではありませんが。

スタイルシートは上から順にこんな感じになります。

#d{
    border:0;
    height:5px;
    background-image:url(../../img/head-menu-back.gif);
}
#e{
    border:0;
    height:1px;
    color:#663300;
    background-color:#663300;
}
#f{
    border:double #663300;
    border-width:3px 0px;
    height:6px;
}
#g{
    color:#ffffff;
    border:dashed #663300;
    border-width:1px 0px;
    height:3px;
}

borderなどで装飾する場合は２つほどポイントがあります。

一つはborder:0;。hrタグにはデフォルトでborderが指定されているので、背景画像や背景色を使って装飾する場合は border:0;で消した方がきれいです。ただし、IEではなぜか効果がありません。

二つ目はcolor:#ffffff;。IEの場合colorを指定することで、デフォルトの枠線を消すことが出来ます。この場合、背景色などは意味が無くなるので、borderのみでの装飾となります。colorの値は、ページの背景色と同じにすると良いでしょう。

---

使いこなすための＋α

hrタグの挙動は仕様書できちんと定義されていないため、ブラウザーによりバラバラです。

なので、全てのブラウザーで同じように見せようとすると、深みにはまることもあります。

「ちょっと違うけど、まぁ、いいか」ぐらいの気持ちでご利用下さい。

---