CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのquotes（引用符）プロパティの使い方と実装例

CSSのquotesプロパティを使うと、<q>タグなどで囲まれた引用部分に表示される引用符（クォーテーションマーク）を自由にカスタマイズできます。デフォルトではブラウザが自動的に「" "」などの記号を挿入しますが、このプロパティを指定することで、好みの記号や言語に合わせた引用符に変更できます。

quotesプロパティの基本構文

selector {
  quotes: "開き引用符" "閉じ引用符";
}

値には任意の文字列を指定でき、ネストした引用に対して複数組の引用符を順番に設定することも可能です。また、noneを指定すると引用符を非表示にできます。

使用例

以下のコードでは、idが「demo」の要素に対してシングルクォート（' '）を引用符として設定しています。コードを実行して、実際の表示を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo {
            quotes: "'" "'";
         }
      </style>
   </head>
   <body>
      <p>
         <q id = "demo">
            これは引用符で囲まれたサンプルテキストです。
         </q>
      </p>
   </body>
</html>

主な値の一覧

  • none：引用符を表示しません（contentプロパティによるopen-quote / close-quoteも無効になります）。
  • 文字列のペア：「"開き" "閉じ"」の形式で1組以上の引用符を指定します。複数組を指定すると、入れ子の深さに応じて使い分けられます。
  • initial：初期値に戻します。
  • inherit：親要素の設定を継承します。

なお、quotesプロパティで設定した引用符を実際に表示するには、::beforeや::after疑似要素と組み合わせてcontent: open-quote;およびcontent: close-quote;を指定する方法もあります。<q>タグの場合はブラウザが自動的に適用されるため、特別な設定なしで反映されます。

  1. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し

  2. CSSのpointer-eventsプロパティとは？使い方をコード例で解説

    pointer-eventsプロパティとは CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。 このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。 auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。 none：要素がポインターイベントに反応しなくなります