【HTML】引用であることを明示する《BLOCKQUOTE》
<blockquote>～</blockquote> で囲まれた文章が、引用文であることを表しています。比較的長めの文章を引用する際に使用します。通常インデント(字下げ)を伴っていますが、<cite> 属性で引用元のURLを表示できます。ウェブブラウザでは非表示になります。
<blockquote>インデント用のタグではないので、字下げの調整には「margin」や「padding」プロパティなどの使用がおすすめです。
スポンサーリンク
スタイルシートを使って左ダブルクォーテーション（左二重引用符）を入れればもっと引用文を格好良く見せられます。
CSS：blockquote -1-
<html>
<style>
blockquote {
background: #f5e8a9;
border-left: 10px solid #513a0e;
border-radius:5px;
margin-left:10px;
margin-bottom:10px;
padding: 1em 10px;
quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
color: #ccc;
content: open-quote;
font-family:"ＭＳ Ｐゴシック","Hiragino Kaku Gothic Pro",sans-serif;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote p {
display: block;
}
</style>
<body>
<blockquote> 通常インデント(字下げ)を伴っていますが、<cite>属性で引用元のURLを表示できます。</blockquote>
<blockquote>Somewhere ... Broadway.. <from BBC NEWS></blockquote>
</body>
</html>
通常インデント(字下げ)を伴っていますが、<cite>属性で引用元のURLを表示できます。
Somewhere near Lexington Avenue I snapped. I'd spent three days with a BBC colleague given to uttering sweeping generalisations as breathtaking as a cold winter gust bursting down Broadway.. <from BBC NEWS>
CSS：blockquote -2-
<style>
blockquote{
padding:1em;
position:relative;
background-color: #eee;
border: 1px solid #b9b9b9;
border-radius:5px;
}
blockquote:before{
content:"“";
font-size:4em;
line-height:0em;
font-family:"ＭＳ Ｐゴシック","Hiragino Kaku Gothic Pro",sans-serif;
color:#999;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote:after{
content:"”";
font-size:4em;
line-height:0em;
font-family:"ＭＳ Ｐゴシック","Hiragino Kaku Gothic Pro",sans-serif;
color:#999;
position:absolute;
right:0;
bottom:0;
}
</style>
<body>
<blockquote>Somewhere ... Broadway.. <from BBC NEWS></blockquote>
</body>
</html>
Somewhere near Lexington Avenue I snapped. I'd spent three days with a BBC colleague given to uttering sweeping generalisations as breathtaking as a cold winter gust bursting down Broadway.. <from BBC NEWS>
画像を使った引用符の作成も面白いので、試してみてください。
スポンサーリンク
CSS：blockquote -3-
<style>
blockquote {
background: url("images/blockquote.gif") no-repeat scroll 5px 5px #fff;
border: 1px dashed #e80585;
clear: both;
font-style: italic;
margin: 5px 0;
padding: 10px 5px 5px 45px;
border-radius:5px;
margin-bottom:10px;
margin-left:10px;
}
</style>
<body>
<blockquote>Somewhere... Broadway.. <from BBC NEWS></blockquote>
</body>
</html>
Somewhere near Lexington Avenue I snapped. I'd spent three days with a BBC colleague given to uttering sweeping generalisations as breathtaking as a cold winter gust bursting down Broadway.. <from BBC NEWS>
CSS：blockquote -4-
<style>
blockquote {
background: url("images/bg-blockquote.gif") no-repeat scroll 5px 5px #fff;
border-left: 10px solid #513a0e;
border-top: 1px solid #b9b9b9;
border-right: 1px solid #b9b9b9;
border-bottom: 1px solid #b9b9b9;
clear: both;
font-style: italic;
margin: 5px 0;
padding: 10px 5px 5px 45px;
border-radius:5px;
margin-bottom:10px;
margin-left:10px;
}
</style>
<body>
<blockquote>Somewhere ... Broadway.. <from BBC NEWS></blockquote>
</body>
</html>
Somewhere near Lexington Avenue I snapped. I'd spent three days with a BBC colleague given to uttering sweeping generalisations as breathtaking as a cold winter gust bursting down Broadway.. <from BBC NEWS>