9月 272010
よく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>
※ダブルコーテーション(”)は半角にして下さい。