当メディアのリンクにはアフィリエイト広告が含まれています

文章の囲み修飾 その2

WordPress

どうもみなさん、でざりゅう(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の後の数字の書き方によって、様々な余白の指定ができます。

padding: 10px; 上下左右を指定
padding: 10px 20px; 上下と左右を指定
padding: 10px 20px 15px; 上と左右と下を指定
padding: 10px 20px 15px 10px; 上と右と下と左を指定

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

角の丸まった囲み

先程のコードに【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>の組み合わせ

その1で学んだ<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>

まとめ

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

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

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

でできますよ。

コメント