「引用符、手打ちしていませんか？」qタグとquotesプロパティでスマートに引用を扱う方法
Webサイトを作っていると、「ここは引用した言葉だな」と強調したい場面に出くわしますよね。そんな時、皆さんはどうしていますか？
キーボードで「“」や「”」を直接入力したり、あるいは装飾のためにわざわざ `` タグで囲んでスタイルを当てたりしていませんか？実はそれ、HTMLとCSSの「お作法」を知れば、もっと楽で、もっと賢く実装できるんです。
今回は、HTMLの隠れた実力者である `` タグと、魔法のようなCSSプロパティ `quotes` について、お話ししていきましょう。
—
なぜ `` タグを使うのか？
HTMLには、短い引用を表すための ``（Quotationの略）という専用のタグがあります。
「わざわざタグを使わなくても、文字を打てばいいじゃん」と思うかもしれません。でも、HTMLのタグにはそれぞれ「意味」が込められています。検索エンジンや、視覚に障害がある方が使う「スクリーンリーダー（読み上げソフト）」にとって、`` タグは「あ、ここは誰かの言葉の引用なんだな」と理解するための大切な目印になります。
この「意味を正しく伝える」ことこそが、Web制作の第一歩であり、一番の醍醐味なんですよ。
—
魔法の杖：`quotes` プロパティの出番
`` タグを使うと、ブラウザが自動的に引用符をつけてくれることがあります。でも、日本語の引用符と英語の引用符って形が違いますよね。それを制御するのがCSSの `quotes` プロパティです。
例えば、お買い物のときに「どの袋に入れますか？」と選ぶような感覚で、引用符のデザインをCSSで指定してあげましょう。
実践してみましょう！
まずは、以下のコードを皆さんのエディタにコピーしてみてください。
/ 引用符をCSSで定義します /
q {
/ 日本語の「 」と、入れ子になった時の「 」を指定 /
quotes: “「” “」” “『” “』”;
}
/ 実際にqタグの前後を飾るための設定 /
q::before {
content: open-quote; / 前側の引用符を表示 /
color: #ff6b6b; / ちょっと可愛く色をつけてみる /
}
q::after {
content: close-quote; / 後ろ側の引用符を表示 /
color: #ff6b6b;
}
あの偉人はこう言いました。
人生は、一度きりの冒険だ。
本当にその通りですよね。
ここがポイント！
- `quotes` プロパティ: ここで「外側はこれ、内側（入れ子）はこれ」というルールを決めています。
- `::before` と `::after`: これらは「擬似要素」といって、HTMLを汚さずにCSSだけで飾り付けを足すための便利な機能です。例えるなら、プレゼントの箱に後からリボンをかけるようなものですね。
—
つまずきやすいポイントをフォロー
「あれ、思った通りに表示されないな？」という時は、慌てずにこれを確認してみてください。
1. ブラウザのデフォルト設定: 実は、何もしなくてもブラウザが勝手に引用符をつけてくれる場合があります。その場合、CSSで上書きしてあげればOKです。「自分の意図通りにコントロールできている！」という実感が持てれば、こっちのものです。
2. 入れ子の引用: 引用の中にさらに引用がある場合（引用の引用）、`quotes` で指定した2つ目のペアが自動的に適用されます。ブラウザが自動で賢く使い分けてくれるので、安心してくださいね。
最後に：Web制作は「小さな気遣い」の積み重ね
「たかが引用符」と思うかもしれません。でも、こうしたタグの使い分けや、CSSによる細かい制御を丁寧に行うことは、将来的に大きなWebサイトを作るとき、あるいは誰かとチームで開発するときに、必ず「読みやすくて、メンテナンスしやすいコード」という形で自分に返ってきます。
最初は少し難しく感じるかもしれませんが、まずはこの `` タグを使ってみることから始めてみてください。皆さんの書くコードが、もっともっとWebの世界を豊かにしていくはずです。
もし分からないことがあれば、いつでも何度でも試して、またここに戻ってきてくださいね。応援しています！
コメント