はてなブログカスタマイズを0から学ぶ

無料版はてなブログのカスタマイズを学んでいくブログ

シンプルな囲い枠その2

シンプルな直線の囲い枠のバリエーションを作ってみます。

 

<div style="background: #fff; padding: 10px; border: 5px solid #c6c6c6;">本文を入れる</div>

 

このコードをHTML編集画面に貼り付けるとこうなります。

本文を入れる

 

solid」の部分を変えて線を変えていきます。

 

 

「dashed」破線にすると

本文を入れる
 
 
「groove」立体的な谷型の線にすると
本文を入れる
 
「ridge」立体的な山型の線にすると
本文を入れる
 
「outset」囲まれた部分が浮きあがって見える立体的な線
本文を入れる
 
こんな感じになりました。
 
枠の色を変える場合は#c6c6c6の部分を変更します。
 
色はこちらから選びたい放題!

www.colordic.org

 

参考にナチュラルなカラーだとこんなのがあります。

#dfcba5

本文を入れる

 

#b9d0b1

本文を入れる

 

#e1c0b6

本文を入れる

 

 

くっきりしたいときはこんな感じのカラーもあります。

#956d30

本文を入れる

 

#234555

本文を入れる

 

#6b1d3b文

本文を入れる

 

枠線がくっきりしてるとちょっと目が疲れそう。

 

「dotted」点線くらいがちょうどいいかな?

本文を入れる

 

この本を参考にしています!