「その言葉、どこから来たの？」を伝える魔法のタグ：`cite`要素の正しい使い方
Webサイトを作っていると、「この情報はどこから持ってきたんだろう？」とふと立ち止まる瞬間はありませんか？
例えば、お気に入りの本のフレーズを紹介したり、誰かの言葉を引用したりする場面。ただ文字を並べるだけでは、読者は「えっ、これって筆者の言葉なの？ それとも誰かの受け売り？」と少し迷ってしまうかもしれません。
そこで登場するのが、今回ご紹介する``要素です。
一見地味なタグですが、実は検索エンジンやブラウザに対して「これは作品のタイトルや引用元ですよ！」と教えてあげる、とても大切な役割を持っています。今日は、この``要素の「正しい使い道」と、ちょっとだけクセのある「見た目の調整方法」について、一緒に紐解いていきましょう。
—
``要素って、どんな時に使うの？
一言で言うと、「作品のタイトル（書名、映画名、曲名、絵画のタイトルなど）」を示す時に使います。
身近な例えで言えば、本屋さんでお目当ての本を探す時、表紙に大きくタイトルが書かれていますよね。Webサイトの中で「これは誰かの著作物ですよ」というラベルをペタッと貼るようなイメージです。
よく「引用そのものを囲むタグ（`
`）」と混同されがちですが、役割は違います。
- `
: 引用した文章そのものを囲む（「お料理のレシピ」本体）`
- ``: その引用元や作品名を指す（「レシピ本のタイトル」）
「引用元を名乗るための名札」だと覚えておくと、ぐっと分かりやすくなりますよ！
—
書いてみよう！基本的な書き方
まずは、シンプルな例を見てみましょう。
「人生とは、自分を見つけることではない。自分を創ることである。」
という言葉は、
ジョージ・バーナード・ショーの『人々と超人』
という戯曲から引用しました。どうでしょう？ ブラウザで見ると、多くの環境では文字が「斜体（イタリック）」で表示されるはずです。これは、「これは引用元ですよ」と視覚的にも強調してくれている証拠です。
—
「勝手に斜めになるのが困る！」という時の対処法
さて、ここで多くの初心者さんがつまずくポイントがあります。「斜体になるとデザインと合わないから、普通の文字に戻したい！」という悩みです。
「CSSでデザインをいじるなんて難しそう…」と思う必要はありません。大丈夫です、とても簡単ですよ。`font-style`というプロパティを使えば、スッと元の真っ直ぐな文字に戻せます。
CSSでスタイリングする例
/ cite要素の斜体を解除して、いつものフォントに戻す設定 /
cite {
font-style: normal; / 斜体を解除 /
color: #555; / 少しグレーにして、引用元っぽさを出すのもオシャレ /
}このように、CSSで「斜体じゃないよ（`normal`）」と指示してあげれば、デザインの自由度は一気に広がります。
—
注意：人名には使わないのがルール
ここで一つだけ、大切な約束事があります。
``要素はあくまで「作品のタイトル」を示すためのものです。ですので、著者の名前そのものに使うのはちょっと間違い。
- × 誤った使い方: `夏目漱石` （ただの人名です）
- ○ 正しい使い方: `こころ` （作品名なのでOK！）
「著者の名前を伝えたい！」という時は、無理に``を使わず、普通の``タグや、場合によっては人名に特化したマークアップを使うのがベターです。難しく考えすぎず、「これは作品名かな？」と自問自答してみてくださいね。
—
まとめ：あなたのサイトに「信頼の証」を
Webの世界では、情報の出どころを明確にすることは、書き手としての「誠実さ」に繋がります。
``要素を使うことは、読者に対して「私はこの記事を書くにあたって、しっかりとした文献を参考にしていますよ」というメッセージを伝えることと同じです。
最初は難しく感じるかもしれませんが、まずは「これは本のタイトルだな」と思った時に、そっと``で囲んでみる。それだけで、あなたのWebサイトは一歩プロの仕事に近づきます。
HTMLは、ただの記号の羅列ではありません。あなたの言葉や情報を、より正確に、より優しく世界へ届けるための「道しるべ」です。ぜひ、今日からあなたのコードでも使ってみてくださいね！
コメント