ASTRODEO 株式会社アストロデオ
CSSでborderの上手な使い方
CSS2009/06/02ゴウ
CSSでborderをつかって囲みを表現する時ってよくあるんですが、たとえば以下みたいな場合、
上部のタイトル部分は画像をペタって置くかなんかして、その下のBOXはCSSで1pxの線を引くのが一般的かと思うんですが、まぁその時の書き方について、気がついた事があったのでメモ。
これが一番省略できる書き方。四隅に同じ条件の線を引く場合はこうやって書きます。
でも、上の画像のような場合は上部の線がいりません。こうした時は
こんな感じで書いていました。これは、右、下、左にそれぞれボーダーを指定してあげている形です。ただ、どうもしっくりこないですよね。自分はしっくり来ていませんでした。なんかあまりキレイな書き方じゃないなーってずっと思ってたんです。
そこで、先日ふと以下のような感じにしてみました。
そしたらあら不思議ー！
しっかり上の線だけ消えました。
あー、これなら結構すっきり書けるなー。
もっと早くに気がつけば良かったです。
とまぁ、かなり細々した話ですが、個人的にはだいぶスッキリしました。（性的に）