10月
13

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

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

罫線のタグ<hr />に点線の枠線スタイルを適用することで簡単に点線を使った罫線が作れます。
罫線の枠を先ず消してしまって、上部の枠線のみを点線で表現します。
hr
{
/* 枠線を消す */
border:none;
/* 枠線上部を点線で表す */
border-top:1px dotted #666666;
}
これを使った罫線は以下のようになります。
ついでに太さを買えた罫線も作ってみました。




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

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

Leave a comment

↓サーバーを借りるなら↓
サーバーについてはこちら


↓ドメインをとるなら↓
ドメインについてはこちら

↓ネットショップを始めるなら↓

人気の記事