Q&Aのように四角枠で囲む方法　HTMLサンプルソース

よくQ&Aなどで以下のように四角枠にくくられていますね。

参考URL：万歩計と歩数計の違いは？

実際のコードは以下のように書かれています。

Style Sheetには以下を記載します。

.Q {

line-height: 1.5em;
padding: 10px ;
margin : 5px 0px 5px 10px;
border: 1px solid gray;
}

.A {

line-height: 1.5em;
padding: 10px ;
margin : 5px 0px 5px 10px;
border: 1px solid gray;
background-color: #F0FFFF;
font-size:16px;
}

Body部には以下を記載

<div class="Q"><b>質問</b> 万歩計と歩数計の違いについて</div>

<div class="A"><b>回答</b> 万歩計は山佐時計計器（株）の登録商標、歩数計が一般名称になります。</div>

------------------　ここまで　------------------

 

左の線を太くして、widthを消すと以下のようになります。

<div style=”margin: 0 0 1.5em 0; padding: 0.7em 0 0.7em 0.7em; border-top: 1px solid darkblue; border-right: 1px solid darkblue; border-bottom: 1px solid darkblue; border-left: 10px solid darkblue;”>ほげの意味ってご存知ですか？</div>

※ダブルコーテーション（”）は半角にして下さい。

こんなサンプルもどうでしょう。結構見やすいと思います。

<div style="line-height: 1.5;margin: 2em;padding: 1em;border: 1px solid #336699;background-color: #ECF2F9;">
ほげホゲ
さんぷるサンプル
見やすい感じの枠です。
</div>

※ダブルコーテーション（”）は半角にして下さい。