CSSでborderの上手な使い方

Go Yoshiwara

Go Yoshiwara

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; /* 上の線だけ消す */
}

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

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

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

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

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

1982年生まれ。信濃中学校卒業。フリーターとして23歳まで様々な職業に従事し数々のスキルを身につける。ウェブデザイナーとして活躍したのち、25歳で起業し代表取締役に就任(会長を経て2022年に退任)。自然あふれる場所で生まれ、アウトドアスポーツをして育ったが故にITの道を志したが、近年、再びアウトドアな環境、遊び、生き方を模索して長野県に移住。わくわくするものをつくり続けていたい。

このメンバーの記事をもっと読む