こんにちはっ!
DVDとCDって側面みるとわかるー。まめしばだよー。
ちなみに側面が2層になってみえるのがDVDということなんですね。(しらなかった笑)
今回はブログをカスタマイズするときに隠し味的な、そして縁の下の力持ち的な、線(ボーダー)のデザインについてちょろちょろと書こうかなーと。
ブログをカスタマイズするときってやっぱりいっこずつのパーツを区切ると思うんです。「ここからサイドバーよー」「ここからフッターよっ!」みたいな。
区切るってなると、色の違いで区切るかボーダーで区切るかになってきて、種類がたくさんあるぶんボーダーの方がかわいいと思うんです。
ボーダーの種類
まずはcssで使える線(ボーダー)の種類をみてみると、
直線(border-bottom: solid 3px pink)
二重線(border-bottom: double 3px pink)
破線(border-bottom: dashed 3px pink)
ドット(border-bottom: dotted 3px pink)
こんな感じ♪
今回は字の下だけに線をつけてるのでborder-bottom、ボーダーのボトムっていう書き方。
それで線の種類(solid,double,dashed,dotted)から好きなのを選んで…、次の3pxっていうのは線の太さ、例だとぜんぶ3pxっていう細さってことっ!
さいごのは色。今回はpinkにしてみました。
太さを変えるだけで…
cssの線の種類ってこんなにたくさんあるんですね。どうです?かわいいホームページのイメージがどんどんわいてきませんか?
さ・ら・に!線の太さを変えるだけでぜんぜんイメージを変えられるんです♪
二重線3px(border-bottom: double 3px pink)
二重線10px(border-bottom: double 10px pink)
破線3px(border-bottom: dashed 3px pink)
破線10px(border-bottom: dashed 10px pink)
んー、どれくらいの太さにしようか迷いますよね~笑
わたしもけっこう1pxかえたりして、悩んだりしてます笑(そんな細かいところまでだれも見てない笑)
線で囲むときは…
さっきのは下線だったんですが、線で全体を囲むときもありますよね。こんなときは、かどっこに丸みをつけてあげるとかわいい感じに。
破線(border: dashed 3px pink)
破線、かどまる(border: dashed 3px pink;border-radius: 5px;)
ほらっ♪どうですっ?角丸の方がなんかかわいくないですか?
border-radiusっていうのが角丸にする書き方。
その後の5pxっていうのはどれくらい丸くするかの数字で、おおきければおおきいほどまるくなっていきます。例はなんとなく5にしてみる。
「ふつうの直線だとかわいくない…」てときは、線の種類をちょっとかえるだけでこんなにブログの雰囲気をかわいくおしゃれにできちゃうんですよ~。ぐへへっ
ぐへっぐへへっ…、おためしあれっ!
おわり
0 件のコメント:
コメントを投稿