
はぁーまた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; } } }
最後に
以上です。最後までありがとうございました。
この記事があなたの参考や助けになっていれば幸いです。
余談ですが、技術関連の書籍はよく買ったりするのですが、今コレほしいんですよね。
知っていますか?中古でやすいのでいつか読んでみたい隠れた名著。
