いろいろな応用が利く！見出し付の囲み線の作り方

ブログやホームページの本文の中で、「注釈」や「注意事項」などを表示するときに、普通に書いたのでは目立たないですね。そんなとき１つパターンを覚えておくだけでいろいろとカスタマイズできる【見出し付の囲み線】の作り方を紹介します。

例えば外部のサイトの内容を参考にしたとき、

コードはこちらのページを参考にさせていただきました

と、何気ないリンクで書くよりも、

<div style="height: 15px;"><span style="margin-left: 8px; padding: 6px 10px; background: #2d2d2d; color: #ffffff; font-weight: normal; border-radius: 8px; border: 2px solid #CC9900;">💡💡　参考にさせていただいたページ　💡💡</span></div>

<div style="border: 2px solid #CC9900; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px; background: #ffffff;">コードは<a href="https://ameblo.jp/sumitak1329/entry-11730920689.html" target="_blank" rel="noopener">こちら</a>のページを参考にさせていただきました</div>

と表示したほうがより分かりやすくなりますよね？今回は下のような見出しのついた囲み線の表示方法です。

WordPressの場合はテキストエディタで行うとコピペで同じものが作れます。

<div style="height:15px;"><span style="margin-left:8px; padding:6px 10px; background:#2d2d2d; color:#ffffff; font-weight:normal;border-radius:8px;border:2px solid #CC9900;">ここに見出しになる文字列</span></div><div style="border:2px solid #CC9900; padding:25px 12px 10px; font-size:1em;border-radius:5px;background:#ffffff;">ここに本文になる部分</div>

ただ、コピペで作っているといつまでたってもコピペ頼りになってしまいますし、オリジナルなものはいつまでたっても作れないということになりますから、この際どうやって表示しているかを勉強してしまいましょう。

見出し付囲み線のコードの中身

さて、早速ですが、この長いコードの中身についてできるだけ簡単かつ分かりやすく解説しますね。

このコードは【見出し】になる部分と【文章】になる部分のdiv要素を組み合わせて表示するようにしています。

せっかくだからこのコードを使って表示すると

<div style="height: 15px;"><span style="margin-left: 8px; padding: 6px 10px; background: #2d2d2d; color: #ffffff; font-weight: normal; border-radius: 8px; border: 2px solid #CC9900;">前半／見出しになる部分</span></div>

<div style="border: 2px solid #CC9900; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px; background: #ffffff;"><div style="height:15px;"><span style="margin-left:8px; padding:6px 10px; background:#2d2d2d; color:#ffffff; font-weight:normal;border-radius:8px;border:2px solid #CC9900;">💡💡　参考にさせていただいたページ　💡💡</span></div></div>

<div style="height: 15px;"><span style="margin-left: 8px; padding: 6px 10px; background: #2d2d2d; color: #ffffff; font-weight: normal; border-radius: 8px; border: 2px solid #CC9900;">後半／本体の文章部分</span></div>

<div style="border: 2px solid #CC9900; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px; background: #ffffff;"><div style="border:2px solid #CC9900; padding:25px 12px 10px; font-size:1em;border-radius:5px;background:#ffffff;">コードは<a href="https://ameblo.jp/sumitak1329/entry-11730920689.html" target="_blank" rel="noopener">こちら</a>のページを参考にさせていただきました</div></div>

という風に分解できます。

【見出し】部分のデザイン

span要素（囲んだ部分を装飾する）をdiv要素（固まり）で囲んで表示しています。

span要素の部分は

1. margin-left:8px; ・・・左から８ピクセル分右にずらして表示しなさい
2. padding:6px 10px;・・・装飾した部分の内側に上下６ピクセル、左右１０ピクセルの隙間を作りなさい
3. background:#2d2d2d; ・・・背景の色は#2d2d2dというカラーコードの色にしなさい
4. color:#ffffff;・・・文字の色は#ffffffというカラーコードの色にしなさい
5. font-weight:normal;・・・文字の太さは普通(normal)で
6. border-radius:8px;・・・囲む線を８ピクセルの丸みを帯びたものにしなさい
7. border:2px solid #CC9900;・・・太さ２ピクセル、実線で#CC9900という色の線で周りを囲みなさい

という風にデザインされています。そしてspan要素はこのタグで囲まれた部分だけが装飾されるので、中に入力した文字分だけに適用されます。

そしてspan要素で囲まれた部分をdiv要素（固まり）で挟んで１つの部品にしています。
div要素には

1. style=”height:15px;・・・高さを１５ピクセルにしなさい

という指示だけ出して、見出しの高さを決定しています。

本文部分のデザイン

こちらはページ本体の幅いっぱいの枠の中に文字を入れないと、文章が短かったときに不格好になりますので、単純にdiv要素だけで囲んで表示させます

1. border:2px solid #CC9900;・・・太さ２ピクセルの実線で#CC9900の色の線で回りを囲みなさい
2. padding:25px 12px 10px;・・・上２５ピクセル、下１２ピクセル、左右１０ピクセル分内側に隙間を作りなさい
3. font-size:1em;・・・文字の大きさはサイト中の他の文字と同じ大きさにしなさい
4. border-radius:5px;・・・囲む線を５ピクセルの丸みを帯びたものにしなさい
5. background:#ffffff;・・・背景色は#ffffffにしなさい

という風にデザインされています。

div要素はブロック要素なので、連続すると重なって表示されるという特性を利用して【本文】の上に幅が可変する別の【見出し】をのっけてるというイメージになるんですね。

逆にいうと、この【見出し付の囲み線】の下には<p>タグなどで段落を付けたり</br>タグで強制的に改行したりしないといつまでも連続してしまいますので、例えば上のように連続してこのデザインを使うときにはこれらのタグを間に挟むようにしなければなりません。

構造が分かってくると、どこをどうカスタマイズすればいいかも見えてくるのでサイト作りが楽しくなりますね。