引用のblockquote、qタグとCSS

基本

▼引用（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>