記事を作っていて、この部分だけ囲ってわかりやすくしたい、、、
という時ありますよね。
しかも、キレイでオシャレな色で！
今回は文章を囲んでしまうカスタマイズをいろいろ試してみたいと思います。
シンプルな囲み
シンプルな囲みだとこんな感じに。
文章をここに入れます(*^^*)
ＨＴＭＬ編集画面 に下のコードを入れます。
<div style="border: 3px solid #000000;">文章をここに入れます(*^^*)</div>
＃000000の所はカラーなので変更出来ます。
こちらのカラーコード参考にさせて頂いてますm(__)m
www.colordic.org
yellow（#ffff00）だと
文章をここに入れます(*^^*)
red（#ff0000）
文章をここに入れます(*^^*)
blue（#0000ff）
文章をここに入れます(*^^*)
<div style="border: 3px の 3pxの数字を変更すれば囲いの太さを変更出来ます。
塗りつぶす
文章をここに入れます(*^^*)
<div style="padding: 5px; background: #F7E234;">文章をここに入れます(*^^*)</div>
tomato（#ff6347）だとこんな感じになります。
文章をここに入れます(*^^*)
skyblue（#87ceeb）だと
文章をここに入れます(*^^*)
lime（#00ff00）だと
文章をここに入れます(*^^*)
いろいろな囲み
<div style="border: 3px solid #ffff00;">文章をここに入れます(*^^*)</div>
上のコードの solid を変更します。
ドットにしたかったら (dotted ) と入れます。
ドットの囲み
文章をここに入れます(*^^*)
<div style="border: 3px dotted #9acd32;">文章をここに入れます(*^^*)</div>
点線の囲み (dashed）
文章をここに入れます(*^^*)
<div style="border: 3px dashed #9acd32;">文章をここに入れます(*^^*)</div>
二重線の囲み (double)
文章をここに入れます(*^^*)
<div style="border: 3px double #9acd32;">文章をここに入れます(*^^*)</div>
角を丸くする
border-radius: 10px の数字を変更して角の丸さを変えます。
文章をここに入れます(*^^*)
<div style="border: 3px solid #9acd32; padding: 10px; border-radius: 10px;">文章をここに入れます(*^^*)</div>
30pxにしてみると
文章をここに入れます(*^^*)
<div style="border: 3px solid #9acd32; padding: 10px; border-radius: 30px;">文章をここに入れます(*^^*)</div>
囲いに余白をつける
上下左右の余白0場合
<div style="border: 3px solid #fc4a1a;">余白、上下0の場合</div>
上下左右の余白が20pxの場合
<div style="border: 3px solid #fc4a1a; padding: 20px;">上下左右の余白が20pxの場合</div>
ちょっと余白がありすぎ？
上下が10px、左右が20pxの余白の場合
<div style="border: 3px solid #fc4a1a; padding: 10px 20px;">上下が10px、左右が20pxの余白の場合</div>
上下10px、左右20pxがジャストサイズ？
囲いと塗りつぶしを組み合わせる
文章をここに入れます(*^^*)
<div style="border: 3px double #fc4a1a; padding: 5px; background: #faebd7;">文章をここに入れます(*^^*)</div>
文章をここに入れます(*^^*)
<div style="border: 4px dotted #556b2f; padding: 5px; background: #9acd32;">文章をここに入れます(*^^*)</div>
文章をここに入れます(*^^*)
<div style="border: 3px solid #20b2aa; padding: 5px; background: #b0e0e6;">文章をここに入れます(*^^*)</div>
囲い・塗りつぶし・余白の組み合わせ！
上下が20px、左右が20pxの余白
プラス塗りつぶし
<div style="border: 3px dashed #ff6347; padding: 20px 20px; background: #faebd7; border-radius: 10px;">上下が20px、左右が20pxの余白
<p>プラス塗りつぶし</p>
</div>
あとがき
囲ってみると、どの色の組み合わせにしようと結構悩みます。
記事の構成に合わせて色も使い分けてもいいかもしれないですね。
それでは、最後まで読んで頂いてありがとうございました。
このブログが少しでも役立てば嬉しいです。
www.haurin-zatunenlife.com
