CSS でblockquote(引用)の装飾を作る

CSS

こんにちは。ましじめの田村です。

CSS でblockquote(引用)の装飾を作る方法です。 Google Fonts のMaterial iconsを使って左上右下にアイコンを置いています。

マテリアルアイコンの使い方はリンクを指定して使用するか、ダウンロードして使用するか
となります。詳しい使い方は公式サイトを確認ください。
Icon font for the web

//マテリアルアイコンリンク
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<blockquote class="e-blockquote">
 情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
</blockquote>
.e-blockquote {
  border: 1px solid #ccc;
  line-height: 1.7;
  position: relative;
  margin: 0;
  padding: 30px 60px 30px 60px;

  &::before,
  &::after {
    display: block;
    position: absolute;
    content: 'format_quote';
    width: 40px;
    height: 40px;
    font-family: 'Material Icons';
    font-size: 40px;
    white-space: nowrap;
    word-wrap: normal;
    color: #ccc;
  }

  &::before {
    top: 20px;
    left: 10px;
    transform: rotate(-180deg);
  }

  &::after {
    right: 10px;
    bottom: 20px;
  }

}

blockquote(引用)の装飾を作る場合に参考にしてみてください。

前の記事 次の記事

ましじめのスキルが必要ですか?

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、
あなたのウェブサイトの制作を強力にサポートすることができます。

ご連絡おまちしています!

10万円からホームページ作成サービス

フレームワークをベースに柔軟なカスタマイズ&低価格で作成します。

サービスを詳しく見たい方へ