quotesプロパティは、引用要素（<blockquote>や<q>）の前後に表示される引用符のスタイルを指定するために使用されます。これにより、テキストの引用部分にカスタムの引用符を設定することができます。
INDEX
quotesプロパティの値とその効果の一覧
quotes: auto;– デフォルトでブラウザに依存した引用符が自動的に設定されます。quotes: none;– 引用符を表示しません。quotes: "start-quote" "end-quote";– カスタムの引用符を設定します。
注意点や関連情報
quotesプロパティは主に<blockquote>や<q>タグに対して適用されます。
ブラウザのデフォルトスタイルを変更したい場合や、独自の引用符スタイルを作成したいときに使用されます。
quotesが効かない時の原因と対策
contentプロパティを使用していない
quotesプロパティは、通常contentプロパティと組み合わせて使用します。単独では引用符を表示できません。もしcontentプロパティが設定されていない場合、引用符は表示されません。
対策: 引用符を表示したい要素に対して、contentプロパティを使用して引用符を生成します。例えば、content: open-quote "引用内容" close-quote;と設定して、quotesプロパティを活用します。
共通するCSSコード
.css-sample-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 80%;
margin: 20px auto;
padding: 20px;
border: 2px solid #333;
background-color: #f9f9f9;
}
.css-sample-box {
width: 100%;
padding: 10px;
background-color: #eef2f3;
color: #333;
font-size: 18px;
margin: 10px 0;
border: 1px solid #ccc;
}
q {
margin: 20px;
padding-left: 20px;
border-left: 4px solid #333;
}
quotes: auto;
デフォルトの引用符スタイルが自動的に適用されます。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-quotes-auto">
<q>デフォルトの引用符が自動的に適用されます。</q>
</div>
</div>
CSSコード
.css-sample-quotes-auto q {
quotes: auto;
}
表示結果
デフォルトの引用符が自動的に適用されます。
quotes: none;
引用符を表示しません。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-quotes-none">
<q>引用符が表示されません。</q>
</div>
</div>
CSSコード
.css-sample-quotes-none q {
quotes: none;
}
表示結果
引用符が表示されません。
quotes: "«" "»";
カスタムの引用符を設定します。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-quotes-custom">
<q>カスタムの引用符が適用されます。</q>
</div>
</div>
CSSコード
.css-sample-quotes-custom q {
quotes: "«" "»";
}
表示結果
カスタムの引用符が適用されます。
まとめ
quotes: auto;では、ブラウザに依存したデフォルトの引用符が使用されます。quotes: none;では、引用符が表示されなくなります。quotes: "start-quote" "end-quote";で、カスタムの引用符を設定できます。