9月 272010
 
このエントリーをはてなブックマークに追加
はてなブックマーク - Q&Aのように四角枠で囲む方法 HTMLサンプルソース
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Post to Google Buzz
Bookmark this on FC2 Bookmark
Share on FriendFeed

よく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>

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

 

 


 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam Protection by WP-SpamFree

Get Adobe Flash player