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()関数を用いて独自の引用符を実装します。
programming-cafe.com
デフォルトの引用符を消す
ブラウザやWordpressの設定などにより、「」や”がデフォルトで表示されます。以下のCSSで引用符を削除することができます。
q:before,q:after {
content: none;
}