作成日:2017-12-05, 更新日:2017-12-05
基本
▼引用(blockquote)のサンプル
引用文
参照元:引用元サイト
ソース
リンク元を表示させたいので下記のような感じにしている。
<blockquote cite="引用元サイトのURL"> <p>引用文</p> <cite><a href="引用元サイトのURL">引用元サイト</a></cite> </blockquote>
引用元サイトのリンクを見せる気がないなら下記のような感じ。
<blockquote cite="引用元サイトのURL"> <p>引用文</p> </blockquote>
▼ちなみに上記のCSSはこんな感じ。
@font-face { font-family: 'FontAwesome'; src: url("〇〇〇/fontawesome-webfont.eot?v=4.5.0"); font-weight: normal; font-style: normal; } blockquote { position: relative; padding: 1rem; box-sizing: border-box; color: #464646; border-left: solid 40px #96a0aa; background: #ebedee; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.19); font-style: normal; } blockquote:before { display: inline-block; position: absolute; top: 50%; left: -32px; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); vertical-align: middle; color: #FFF; font-size: 1.5rem; line-height: 1; font-family: 'FontAwesome'; content: "\f10e"; } blockquote cite { font-style: normal; display: block; text-align: right; color: #888888; font-size: 0.9rem; }
文章の一部だけ引用
「<q>〜</q>」でくくる。
<q cite="引用元サイトのURL">~引用文~</q>