Web事業部実績紹介
Web事業部実績紹介
2009.06.02

CSSでborderの上手な使い方

ゴウ

CSSでborderをつかって囲みを表現する時ってよくあるんですが、たとえば以下みたいな場合、

ボックスのサンプル

上部のタイトル部分は画像をペタって置くかなんかして、その下のBOXはCSSで1pxの線を引くのが一般的かと思うんですが、まぁその時の書き方について、気がついた事があったのでメモ。

/* 四隅に1pxの線を引く */
.hoge{
	border:1px solid #ccc;
}

これが一番省略できる書き方。四隅に同じ条件の線を引く場合はこうやって書きます。

でも、上の画像のような場合は上部の線がいりません。こうした時は

/* 上以外に1pxの線を引く */
.hoge{
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	border-left:1px solid #ccc;
}

こんな感じで書いていました。これは、右、下、左にそれぞれボーダーを指定してあげている形です。ただ、どうもしっくりこないですよね。自分はしっくり来ていませんでした。なんかあまりキレイな書き方じゃないなーってずっと思ってたんです。

そこで、先日ふと以下のような感じにしてみました。

.hoge{
	border:1px solid #ccc; /* 四隅に1pxの線を引く */
	border-top:0; /* 上の線だけ消す */
}

そしたらあら不思議ー!
しっかり上の線だけ消えました。

あー、これなら結構すっきり書けるなー。

もっと早くに気がつけば良かったです。

とまぁ、かなり細々した話ですが、個人的にはだいぶスッキリしました。(性的に)