CSSデザイン引用
引用レイアウト1
unknown
<style type="text/css">
blockquote#bq1 {
margin:0 0 1em 20px;
padding:10px;
background:none;
}
blockquote#bq1 p {
color:#333;
display:list-item;
padding:0 5px;
list-style-image:url(/content/img/css/open_quotes.gif);
list-style-type:none;
background:url(/content/img/css/close_quotes.gif) bottom right no-repeat;
}
blockquote#bq1[cite]:after { /* IE未対応 */
content:"引用元: " attr(cite);
display:block;
font-size:0.8em;
color:#999;
text-align:right;
}
</style>
<blockquote cite="http://ja.wikipedia.org/wiki/Wikipedia" id="bq1">
<p>Wikipedia（ウィキペディア）という名前はウィキペディアが使用しているMediaWikiと呼ばれる Wiki （ウィキ）ソフトウェアの「Wiki （ウィキ）」と、百科事典を意味する英語「encyclopedia（エンサイクロペディア）」から合成されたものである（よって日本国内では、元々のWikiシステムを知らない層からはWikipediaをWikiと略して呼ばれることが多いが、これは誤用であり、混乱の元である）。</p>
</blockquote>Wikipedia（ウィキペディア）という名前はウィキペディアが使用しているMediaWikiと呼ばれる Wiki （ウィキ）ソフトウェアの「Wiki （ウィキ）」と、百科事典を意味する英語「encyclopedia（エンサイクロペディア）」から合成されたものである（よって日本国内では、元々のWikiシステムを知らない層からはWikipediaをWikiと略して呼ばれることが多いが、これは誤用であり、混乱の元である）。
引用レイアウト2
unknown
<style type="text/css">
.sample3 {
margin:1em 1em 1em 2em; padding:1em 1em 1em 30px;
border:1px solid #ccc; /* 枠線 */
color:#636563; /* 文字色 */
background:#f7f7f7 url(/content/img/skin/dquot.gif) no-repeat 10px 5px; /* 背景色+背景画像 */
line-height:1.5;
}
</style>
<blockquote class="sample3">
<p>
このブロックに記述されている内容は、引用です。
このブロックに記述されている内容は、引用です。
このブロックに記述されている内容は、引用です。
このブロックに記述されている内容は、引用です。
このブロックに記述されている内容は、引用です。
このブロックに記述されている内容は、引用です。
</p>
</blockquote>
このブロックに記述されている内容は、引用です。 このブロックに記述されている内容は、引用です。 このブロックに記述されている内容は、引用です。 このブロックに記述されている内容は、引用です。 このブロックに記述されている内容は、引用です。 このブロックに記述されている内容は、引用です。