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

投稿日 6月 10, 2023
著者しんぺー
カテゴリー CSS
カテゴリー HTML

はぁーまた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;
    }
  }
}