10月
13

簡単なので覚えておきたい。画像を使わないでスタイリッシュな点線を使った罫線を描く方法。

By admin // ケーススタディ, デザイン // 1 Comment

コンテンツとコンテンツを区切るために使える罫線。
点線を使った罫線だとデザインの邪魔にならずに格好良くコンテンツを区切ってくれます。
普通の罫線とちがってちょっと控えめにクールに罫線を描きたい、
そんなときはCSSを使ってスタイリッシュな点線の罫線はいかがでしょう。
点線の罫線をわざわざ画像で作って使っている人も見かけますが、
そんなことをしなくても簡単に作れます。

罫線のタグ<hr />に点線の枠線スタイルを適用することで簡単に点線を使った罫線が作れます。
罫線の枠を先ず消してしまって、上部の枠線のみを点線で表現します。

hr
{
/* 枠線を消す */
border:none;
/* 枠線上部を点線で表す */
border-top:1px dotted #666666;
}

これを使った罫線は以下のようになります。
ついでに太さを買えた罫線も作ってみました。

点線なのでデザインの邪魔をせずにクールな雰囲気を出してくれます。
結構使えますよ。

あわせて勉強しておこう

タグ: 点線, 罫線

Author:

has written 66 articles for us.

1 Comment to “簡単なので覚えておきたい。画像を使わないでスタイリッシュな点線を使った罫線を描く方法。”

画像無しでCSSだけで簡単に切り取り線のような罫線が作れる | 初心者でもわかるホームページの作り方 2010年11月12日 11:30 AM

[...] コンテンツ同士を区切るのによく使われる罫線。格好良くするために、点線の罫線を使いたいときもあります。画像を使わずに簡単に切り取り線のような点線ラインを引く方法。 CSSだけで簡単に作れます。通常の罫線よりかっこいいですよ。画像を使わないでスタイリッシュな点線を使った罫線を描く方法。 [...]