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

投稿日 6月 10, 2023
更新日 1月 13, 2024
著者しんぺー
カテゴリー 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;
      }
    }
  }