CSSのquotesプロパティ、q要素、open-quoteとclose-quoteの仕組みを、その場で切り替えられる言語のデモ、入れ子の引用符の階層、blockquoteの装飾パターンとともに解説します。
CSSのquotesプロパティは、q要素とcontent: open-quote、close-quoteでブラウザーが描く引用符を決めます。quotes: autoはlang属性に合った引用符を選び、文字列のペアのリストを指定すると入れ子の階層ごとに独自の引用符を設定でき、quotes: noneで引用符を消せます。blockquoteには、自分で追加しない限り引用符は付きません。
quotesの値
引用符は、多くのサイトが間違えている文字組みの細部です。テンプレートに打ち込まれたストレートクォート、フランス語やドイツ語に合わない引用符、スクリーンリーダーが読み上げてしまう装飾的なblockquoteの引用符などです。ここでは、quotesプロパティの動きをいくつかの言語でその場で確認でき、プルクオートやお客様の声のためのすっきりしたパターンも紹介します。
q { quotes: none; }を設定します。引用符は、ブラウザーのデフォルトの::beforeと::afterのcontentであるopen-quoteとclose-quoteから来ており、noneにすると要素の意味はそのままで、それらが何も描かなくなります。
ブラウザーが自動で引用符を付けるのはqだけです。blockquoteはデフォルトでインデントされますが、引用符は付きません。デザイン上必要なら、blockquote::before { content: open-quote; }と対応する::after、または装飾的な引用符を追加しましょう。
UTF-8のスタイルシートに文字を直接書く（quotes: "“" "”" "‘" "’";）か、"\201C"や"\201D"のようなエスケープを使います。エディターやビルド処理がASCII以外の文字を壊してしまう場合は、エスケープが便利です。
生成コンテンツは支援技術に読み上げられることがあるので、引用符はテキストとして扱いましょう。大きな装飾用の引用符は、背景画像、aria-hidden付きのSVG、または空の代替テキストを持つcontent（content: "“" / "";）で描くほうが適しています。
よく使う引用符とUnicodeのコードポイント
外側のqは二重引用符を、その中のqは一重引用符を使います。エスケープでカーリークォートが出力されます。
大きな引用符は代替テキストを空にしているので、読み上げられません。figureとfigcaptionで引用と出典を結び付けます。代替テキストの構文に対応していないブラウザーはそのルールを飛ばし、引用符を描きません。
open-quoteとclose-quoteは入れ子の計算に加わるので、このblockquote内のqには内側の引用符が付きます。
言語ごとの引用符
サンプルの言語
quotes: auto
カスタムの引用符
引用符のモード
外側の開き引用符
外側の閉じ引用符
内側の開き引用符
内側の閉じ引用符
ガイドはこう言った
橋のところで左に曲がって
そして私たちはそうした。
CSSをコピー
無料で始める · クレジットカード不要