HTMLタグ、CSSを使って、簡単に記事中の文章を枠線で囲むカスタマイズ方法！

 
どうも、ジョニーです。

当ブログで使用している「枠線」のカスタマイズ方法のご紹介です。

 

使用するHTMLタグ

<div style="padding: 20px; border: solid 2px #73907b; border-radius: 10px; background-color: #f3f3f3; margin-top: 30px; margin-bottom: 30px;">ここに文字を入力します。</div>

• padding … 枠と文章の余白。
• border … 枠線の種類、太さ、色。
• border-radius … 角丸の半径。
• background-color … 背景色。
• margin-top・margin-bottom … 枠の上下の余白。

 

まとめ（感想）

とっても簡単に枠線で囲めましたね。ちょっとしたことでサイトの見栄えって変わりますからね〜難しいです。