cssとhtmlのみで本文中にメリハリを出す為、枠を作りました。
超参考にさせていただきました。
ありがとうございます。
シンプルな囲い枠
css
/* シンプルな囲いグレー */ .box3 { width:95%; margin: 2em auto 2em ; padding: 2em 1em; border: solid 2px #7f7f7f; } .box3 p { margin: 0; padding: 0; }
html
<div class="box3">
<p>ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章</p>
</div>
完成図
ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章
枠の途中にタイトルBOX
css
/* タイトル付き囲い */ .box26 { position: relative; width:95%; margin: 3em auto 2.5em ; padding: 2em 1em 1.5em; border: solid 2px #7f7f7f; border-radius: 8px; } .box26 .box-title { position: absolute; display: inline-block; top: -13px; left: 10px; padding: 0 9px; line-height: 1; font-size: 19px; background: #FFF; color: #fc3c3c; font-weight: bold; } .box26 p { margin: 0; padding: 0; }
html
<div class="box26">
<span class="box-title">ここにタイトル</span>
<p>ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章</p>
</div>
完成図
ここにタイトル
ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章
枠線ではなく影によりボックス領域が分かる
css
/* 影付き囲い */ .box11{ width:95%; margin: 2em auto 2em ; padding: 2em 1em; color: #5d627b; background: white; border-left: solid 3px #5d627b; box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.22); } .box11 p { margin: 0; padding: 0; }
html
<div class="box11">
<p>ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章</p>
</div>
完成図
ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章
まとめ
少しcssを調整したりはしましたが基本そのままです。
だいぶ華やかになってきました。
シンプルにしたいので、また調整予定です。