【コピペOK】blockquote要素の作り方HTML&CSS|引用文

はぁーまたqlockquoteか〜ちょっと面倒なんだよなぁ
どうやってつくるんだっけ?

よくある感じのHTMLとCSSのテンプレ置いときますね〜

完成形のイメージ

See the Pen Untitled by shimpei (@shimpei) on CodePen.

HTML

<blockquote>
  <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
  <cite>引用元:〇〇〇〇</cite>
</blockquote>

SCSS

FontAwesomeのiconを使用する時

blockquote {
  padding: 20px 25px;
  position: relative;
  color: #707070;
  font-size: 16px;
  margin: 0;
  &::before,
  &::after {
    content: "\f10d";
    position: absolute;
    font: {
      family: "Font Awesome 6 Free";
      weight: 900;
      size: 28px;
    }
  }

  &::before {
    top: 0;
    left: 0;
  }

  &::after {
    bottom: 0;
    right: 0;
    transform: scale(-1, 1);
  }
  cite {
    display: block;
    text-align: right;
    color: #888;
    font-size: 0.9em;
  }
}

iconを画像で表現する時

blockquote {
  padding: 20px 45px;
  position: relative;
  color: #707070;
  font-size: 16px;
  margin: 0;
  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 22px;
  }

  &::before {
    background: url(../icon_quote.png) 0 0 no-repeat;
    background-size: contain;
    top: 0;
    left: 0;
  }

  &::after {
    background: url(../icon_quote.png) 0 0 no-repeat;
    background-size: contain;
    bottom: 0;
    right: 0;
    transform: scale(-1, 1);
  }

  cite {
    display: block;
    text-align: right;
    color: #888;
    font-size: 0.9em;
  }

  @media only screen and (max-width: 768px) {
    border-width: 6px;
    font-size: 14px;
    padding: 10px 20px;
    &::before {
      width: 16px;
      height: 15px;
    }
  }
}

最後に

以上です。最後までありがとうございました。

この記事があなたの参考や助けになっていれば幸いです。

余談ですが、技術関連の書籍はよく買ったりするのですが、今コレほしいんですよね。
知っていますか?中古でやすいのでいつか読んでみたい隠れた名著。

この記事を書いた人

アバター

しんぺー

Web制作会社のフロントエンドエンジニア。
2019年9月よりWeb制作を独学、2021年3月ジョブチェンジでエンジニアに。

プログラミングを始めたい方や、学習中の方、副業・転職したい方に向けて発信していますが、業務で覚えた技術がメインになってます。

趣味は音楽です。下の「ウェブサイト」に趣味で作ったサイトをリンクしていますので、興味ある方はどうぞ。