【ブログ】HTMLで文章を線で囲む「囲み文字」の入力方法【カスタマイズ】

ブログ記事を書いているときに文章を枠で囲うと、見栄えが良くなりメリハリがついてオシャレでカッコいいですよね。

CSSをいじるのは難しそうだけれど、ブログ記事にHTMLタグをコピペ入力だけでできるのならばやってみたい！
今回はそんなプチ初心者も大歓迎の<div>タグを使ったコピペOKのテキスト文章を線で囲む方法です。

枠線でテキストを囲む基本形

まずは枠線でテキストを囲む基本形の説明から始めます。枠線の種類を指定することで様々な装飾ができます。

<div style="border: 3px solid;">
枠線を実線で装飾
</div>

<div style="border: 3px double;">
枠線を二重線で装飾
</div>

<div style="border: 3px dotted;">
枠線を点線で装飾
</div>

<div style="border: 3px dashed;">
枠線を破線で装飾
</div>

<div style="border: 3px none;">
枠線を表示しない
</div>

上記のように<div style="border: 3px ○○;">の○○の部分に枠線の種類を指定することで装飾することができます。

枠線の太さと色、背景色を装飾

次に枠線の太さと色、背景色を装飾していきます。

<div style="border: 10px solid;">
枠線が太い
</div>

<div style="border: ○px solid;">の○の数字が大きいほど線が太く、小さいほど細くなります。

<div style="border: 3px solid #ff9933;">
枠線がオレンジ
</div>

<div style="border: 3px solid ○;">の○にカラーコードを入力していきます。

<div style="border: 3px solid; background-color: #ffff00;">
背景色が黄色
</div>

<div style="border: 3px solid; background-color: ○;">の○に背景のカラーコードを入力していきます。

#に続く6桁の英数字がカラーコードです。
カラーコードは以下のサイトが参考になります。
原色大辞典

枠の幅とテキストの余白を装飾

次は枠の幅とテキストの余白を装飾していきます。

<div style="border: 3px solid; padding: 20px 20px 20px 20px;">
余白が20px
</div>

paddingに続く○px ○px ○px ○pxで上、右、下、左の余白を調整していきます。

<div style="border: 3px solid; width: 150px;">
枠の幅が150px
</div>

widthに続く○pxで枠の幅を調整していきます。

さらに枠を装飾する

いままでの装飾は基本的な装飾です。
これ以降は応用的な装飾になります。

<div style="border: 3px solid #ff9933; border-radius:5px;">
角を丸くする。
</div>

border-radiusで角を丸くする指定をつけます。
○pxは丸さの数字です。数字が大きいほど丸みが増します。

<div style="border: 3px solid #ff9933; box-shadow: 5px 5px 5px #AAA;">
影をつける。
</div>

ちなみにこれらの装飾はパソコンの環境によっては表示されない場合があります。
気を付けて使用してください。

さらに応用！タイトルを加える

さらなる応用として、枠線にタイトルを加える装飾です。

<div style="height:12px;">
<span style="margin-left:8px; padding:6px 5px; background:white; font-weight:bold;border-radius:5px;">タイトル</span>
</div>
<div style="border:2px solid #000066; padding:25px 12px 10px; font-size:1em;border-radius:5px;">
枠線の中にタイトル
</div>

枠線の途中が途切れてタイトルを記入できます。

<div style="height:12px;">
<span style="margin-left:8px; padding:6px 10px; background:#ff9933; color:#ffffff; font-weight:bold;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;">タイトル</span>
</div>
<div style="border:2px solid #ff9933; padding:25px 12px 10px; font-size:0.85em;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;">
枠線の中にタイトル＋タイトルにも枠
</div>

タイトルの背景色も装飾して枠線との一体感を出します。

これらの装飾は、例えば「注意！」や「参考文献」などのちょっとした見出しにも使えて、とても見栄えが良いです。

まとめ

ここで紹介したHTMLはコピペだけで簡単に利用できます。
お好みの太さやカラーリングがある場合は、色々試しながら学んでみてください！