【CSS Modules】quotesプロパティの使い方
quotesプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
quotesプロパティは、ウェブページ上で引用文を表示する際に使用される引用符の種類と、ネストされた引用文のスタイルを保持するプロパティです。このプロパティは、CSSのcontentプロパティと組み合わせて利用され、例えばHTMLの<q>要素などに自動的に挿入される引用符のセットを定義します。これにより、引用文がページのどこに表示されても、一貫した視覚表現を保つことができます。
quotesプロパティには、none、initialといったキーワードのほか、実際の引用符の文字列ペアを値として設定できます。noneを指定すると、引用符は一切表示されません。一方、"開始引用符" "終了引用符"のように文字列ペアを指定することで、特定の引用符を使用するようブラウザに指示します。さらに、"「" "」" "『" "』"のように複数のペアを記述することで、引用文が入れ子になった際に、内側の引用文に異なる引用符を適用することが可能です。
このプロパティを活用することで、開発者は引用符のスタイルを柔軟に制御し、言語の慣習やデザインガイドラインに合わせて引用文を美しく表示できます。特に、国際的なウェブサイトを開発する場合や、複雑な引用構造を持つコンテンツを扱う際に、非常に役立つ機能です。
公式リファレンス: quotes
構文(syntax)
1quotes: "«" "»" "‹" "›";
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません