ブログの隠し味？線（ボーダー）のいろんなデザインたち

こんにちはっ！

DVDとCDって側面みるとわかるー。まめしばだよー。


ちなみに側面が2層になってみえるのがDVDということなんですね。（しらなかった笑）

今回はブログをカスタマイズするときに隠し味的な、そして縁の下の力持ち的な、線（ボーダー）のデザインについてちょろちょろと書こうかなーと。

ブログをカスタマイズするときってやっぱりいっこずつのパーツを区切ると思うんです。「ここからサイドバーよー」「ここからフッターよっ！」みたいな。

区切るってなると、色の違いで区切るかボーダーで区切るかになってきて、種類がたくさんあるぶんボーダーの方がかわいいと思うんです。

ボーダーの種類

まずはcssで使える線（ボーダー）の種類をみてみると、









こんな感じ♪

今回は字の下だけに線をつけてるのでborder-bottom、ボーダーのボトムっていう書き方。

それで線の種類（solid,double,dashed,dotted）から好きなのを選んで…、次の3pxっていうのは線の太さ、例だとぜんぶ3pxっていう細さってことっ！

さいごのは色。今回はpinkにしてみました。

太さを変えるだけで…

cssの線の種類ってこんなにたくさんあるんですね。

どうです？かわいいホームページのイメージがどんどんわいてきませんか？

さ・ら・に！線の太さを変えるだけでぜんぜんイメージを変えられるんです♪










んー、どれくらいの太さにしようか迷いますよね～笑

わたしもけっこう1pxかえたりして、悩んだりしてます笑（そんな細かいところまでだれも見てない笑）

線で囲むときは…

さっきのは下線だったんですが、線で全体を囲むときもありますよね。

こんなときは、かどっこに丸みをつけてあげるとかわいい感じに。





ほらっ♪どうですっ？角丸の方がなんかかわいくないですか？

border-radiusっていうのが角丸にする書き方。

その後の5pxっていうのはどれくらい丸くするかの数字で、おおきければおおきいほどまるくなっていきます。例はなんとなく5にしてみる。



「ふつうの直線だとかわいくない…」てときは、線の種類をちょっとかえるだけでこんなにブログの雰囲気をかわいくおしゃれにできちゃうんですよ～。ぐへへっ

ぐへっぐへへっ…、おためしあれっ！