文章の囲み修飾　その２

どうもみなさん、でざりゅう（deza_ryu）です

前回は文章の修飾で囲み線を学びましたが今回はもう一歩進んで背景や、凝った囲み線を学びましょう。

背景の塗りつぶし

さて、前回の続きですが、

<div style="border: 大きさ 種類 色; padding: 10px; background: #ffffff;"&gt;いれたい文字</div>

でしたね。

ということは、感の良い方はpaddingかbackgroundを変更すればいいということがわかりますね。

backgroundのあとを#ffffff  から#ffff00 に変更するということになります。

<div style="border: 10px solid #ff0000; padding: 10px; background: #ffff00;">塗りつぶし変更</div>

ちなみに、paddingの後の数字を10px ⇒40px変えると、

ということになります。

かなり上下左右の余白が多くなったと思います。

このpaddingの後の数字の書き方によって、様々な余白の指定ができます。

このように指定すれば表のように余白を指定することができます。

角の丸まった囲み

先程のコードに【border-radius: 30px;】というコードに追加記述してみます。

<div style="border: 10px solid #ff0000; padding: 10px; background: #ffff00; border-radius: 30px;">
　塗りつぶし変更</div>

数字によって丸みが変わります。わかりやすく30pxでしてみましたがかなり丸まってますね。

様々な見出しと囲み方の組合わせ

さてここまでたくさんの囲み方を学んできましたが、<div><style> と <dive><span>それらを組み合わせると様々な見出しと囲み方ができます。

見出しと本文

<div style="padding: 5px 10px; color: #ffffff; background: #0000ff;">タイトル</div>
<div style="padding: 10px; border: 1px solid #0000ff; background: #ffffff;">本文</div>

というようになります。色は自分の好みに合わせていいと思います。

角を丸まる場合はこんなかんじですかね。

<div style="padding: 5px 10px; color: #ffffff; background: #0000ff;border-radius: 10px;"">タイトル</div>
<div style="padding: 10px; border: 1px solid #0000ff; background: #ffffff;border-radius: 10px;";本文</div>

<dive style>と<dive span>の組み合わせ

その１で学んだ<div span><div style>を組合わせるとまた違った個性的な見出しを付ける事が出来ます。

<div><span style="padding: 6px 10px; color: #ffffff; font-weight: bold; background: #0000ff;">
　　タイトル</span></div>
<div style="padding: 10px; border: 1px solid #0000ff; font-size: 0.9em; margin-top: 2px;">本文</div>

丸みをつけてみる

<div><span style="background: #0000ff; padding: 4px 10px; border-radius: 10px 10px 0 0; color: #ffffff; 
　　font-weight: bold; margin-left: 10px;">タイトル</span></div>
<div style="padding: 10px; border-radius: 5px; border: 2px solid #0000ff;">本文</div>

<div style="height: 12px;"><span style="background: #0000ff; padding: 6px 10px; border-radius: 10px;
　　 color: #ffffff; font-weight: bold; margin-left: 10px;">タイトル</span></div>
<div style="padding: 20px 15px 10px; border-radius: 5px; border: 2px solid #0000ff;">本文</div>

まとめ

様々な線の描き方や、塗りつぶしを勉強していましたので、お気に入りを一つ作って登録しておくのもいいかもしれませんね。

そうそう、その１で目指していたこの囲み方は

<div style="border: 5px dotted #ff0000; padding: 10px; background: #ffc0cb;">TEST</div>

でできますよ。