ソフトエンジニアのブログ、制作ノウハウ等を配信

引用タグをデザインする

他から文章を引用した場合は、
blockquoteタグを使用しますが、
現在、何もスタイルを指定していないので、
blockquoteタグで引用文を追加しても何も装飾がありません。

そこで、今日は引用タグのスタイルを変更してみようと思います。

スポンサーリンク

style.cssにblockquoteのスタイルを追加

blocquoteタグのスタイルをstyle.cssに追加します。
私は、 before擬似要素、after擬似要素を使って、
引用符のマークをつけました。

・before擬似要素・・・要素の直前に内容を挿入
・after擬似要素・・・要素の直後に内容を挿入

あとは、背景色や配置などを自分の好みにあったデザインに調整してあげれば
完成です。
(以下、私が追加したスタイル)

以下が完成した引用タグのデザインです。

テスト、テスト、テスト、テスト

まとめ

以上、引用タグのデザイン方法でした。
参考になれば幸いです。

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で
関連記事(一部広告含む)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン