スタッフ webクリエイター加藤です。

記事文章を枠線で囲みたい時があると思います。

  • ただ枠で囲んでみたい
  • 目立たせるために囲みたい
  • 内容を分けて表示させるために囲みたい…etc

など、いろいろ理由はあると思います。

ではどうすれば、枠線で囲むことができるのか?
囲みたい文章を HTMLタグ、CSS、CSS3を使って設定する方法があります。

例えば、このように。。。

記事文章をこのように、HTMLやCSSを使って枠線で囲むことができます。
背景の色や線の色、先の太さなども調整することができます。

枠で囲むタグはこちらになります。

<div style="padding: 20px; border: solid 2px #ff6347; border-radius: 10px; background-color: #fffaf0; margin-top: 30px; margin-bottom: 30px;">
■ここに文章を入力する■</div>

どうでしょうか?
さて、CSSの設定はといいますと、下記にそれぞれのCSSの設定内容を書いておきましたので、色々と設定してみてください。

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

カラーコード参考サイト:原色大辞典
HTML&CSSタグ参考サイト:HTMLクイックリファレンス