CSS - 引用符: テキストに個性を加える

こんにちは、Webデザイン志望者の皆さん！今日は、楽しくてよく見落とされるCSSプロパティについてお話しします：引用符です。あなたの親切な近所のコンピュータ教師として、この小さな宝を共有することを楽しみにしています。信じてください、このチュートリアルが終わるまでには、プロのように引用符を使えるようになるでしょう！

CSS - Quotes

CSSの引用符とは？

まず、CSSでの引用符とは何かを理解しましょう。引用符は、話し言葉を強調したり引用元を示すだけでなく、CSSではコンテンツに引用符を自動的に追加する強力なツールです。テキストの周りを回って、あなたが指示した場所に小さなカギ括弧を追加する小さなロボットのようなものです！

使用可能な値

quotesプロパティで使用できる異なる値から始めましょう。以下の表で要約します：

値	説明
none	引用符を使用しない
`<string>`	使用する引用符を指定
initial	デフォルト値に設定
inherit	親要素から継承
auto	ブラウザが言語に基づいて決定

これらを一つずつ見ていきましょう。

対象

深く掘り下げる前に、quotesプロパティはすべての要素に適用されることに注意しましょう。しかし、最もよく使用されるのは<q>と<blockquote>要素です。これを万能の調味料として考えれば、どんな要素にも追加できますが、特定の料理には最も美味しいです！

文法

引用符を使用する基本的な文法は簡単です：

セレクタ {
quotes: 値;
}

シンプルですね？では、それぞれの値を詳しく見ていきましょう。

CSS引用符 - none値

quotes: noneを設定すると、CSSに「引用符は不要」と言っているのと同じです。デフォルトの引用符をオーバーライドしたいときに便利です。例を見てみましょう：

q {
quotes: none;
}

<p>彼女は言いました <q>Hello, world!</q></p>

この場合、<q>タグ内のテキストには引用符が表示されません。声を下げずに囁くようなものです！

CSS引用符 - `<string>`値

ここからが楽しみの始まりです！あなたが望む文字を使用して引用符を指定できます。文法は以下のようになります：

セレクタ {
quotes: "開始引用符1" "終了引用符1" "開始引用符2" "終了引用符2";
}

例を試してみましょう：

q {
quotes: "<<" ">>" "(" ")";
}

<p>彼女は叫びました <q>What a <q>wonderful</q> day!</q></p>

これが表示されるのは：She exclaimed <<What a (wonderful) day!>>

素晴らしいですね？テキストにメイクオーバーするようなものです！

CSS引用符 - initial値

initial値は、プロパティをデフォルト値に設定します。引用符のリセットボタンを押すようなものです。大部分のブラウザでは、これは以下と同等です：

q {
quotes: '"' '"' "'" "'";
}

これにより、標準的な英語の引用符が得られます：外側は二重引用符、内側は単引用符です。

CSS引用符 - auto値

auto値は引用符のスマートアシスタントのようなものです。ドキュメントの言語に基づいて適切な引用符を選択します。例えば：

:root {
quotes: auto;
}

HTMLがlang="fr"の場合、「guillemets」がフランス語のテキストに使用されるかもしれません。多言語の引用符の専門家がチームにいるようなものです！

CSS引用符 - :lang pseudo-classの使用

ここでさらに凝ったことを行います。:lang pseudo-classを使うと、異なる言語に対して異なる引用符を指定できます。見てみましょう：

:root { quotes: auto; }
:lang(en) q { quotes: '"' '"' "'" "'"; }
:lang(fr) q { quotes: "«" "»" "‹" "›"; }
:lang(de) q { quotes: "„" """ "‚" "'"; }

これは英語、フランス語、ドイツ語に対して異なる引用符スタイルを設定します。ウェブサイトに多言語を教えるようなものです！

すべてを合わせる

より複雑な例を作成して、これらがどのように一緒に働くかを見てみましょう：

<p lang="en">She said, <q>I love <q>CSS</q>!</q></p>
<p lang="fr">Elle a dit, <q>J'adore <q>CSS</q> !</q></p>
<p lang="de">Sie sagte, <q>Ich liebe <q>CSS</q>!</q></p>

:root { quotes: auto; }
:lang(en) q { quotes: '"' '"' "'" "'"; }
:lang(fr) q { quotes: "«" "»" "‹" "›"; }
:lang(de) q { quotes: "„" """ "‚" "'"; }

q::before { content: open-quote; }
q::after { content: close-quote; }

これにより、各文は言語に適した引用符で表示されます。多言語のタイポグラファがあなたのウェブサイトで働いているようなものです！