q 語句単位の引用 コピペで使えるHTML+CSS

スポンサーリンク
LINEで送る
Pocket

q要素の概要

語句単位の引用HTML
<q>~</q>
目的他から文書を引用する場合に用いる。blockquoteよりも狭い語句単位での引用。
類似<blockquote> <cite>
古典の名作である枕草子の書き出しは春はあけぼのです。
古典の名作である枕草子の書き出しは<q>春はあけぼの</q>です。

属性

q要素の属性

cite

引用元がweb上の文書であればurl、書籍であればISBNを指定する。urn:isbn:ISBN番号 で記述する。下からわかる通りcite属性は表示されません。表示するには<cite>を用いて表示します。※HTMLはマークアップ言語ですから全ての情報が必ずしも表示されるわけではないということです。

古典の名作である枕草子の書き出しは<q cite="urn:isbn:978-4-0030-0161-5">春はあけぼの</q>です。
古典の名作である枕草子の書き出しは春はあけぼのです。

CSSデザイン

引用符をデザインする

blockquote q 引用符をデザイン コピペで使えるHTML+CSS
引用する際に用いるblockquote要素とq要素について、CSSの::beforeセレクターと::afterセレクター及びtransformプロパティのrotate()関数を用いて独自の引用符を実装します。

デフォルトの引用符を消す

ブラウザやWordpressの設定などにより、「」や”がデフォルトで表示されます。以下のCSSで引用符を削除することができます。

q:before,q:after {
    content: none;
}

 

LINEで送る
Pocket

タイトルとURLをコピーしました