こんにちは！フロントエンドの世界へようこそ。
HTMLを学び始めたばかりの時期って、タグの種類が多すぎて「結局どれを使えばいいの？」と迷子になってしまうこと、ありますよね。
今日は、そんな数あるタグの中でも、少し「お節介で頼もしい相棒」のような存在、``タグについてお話しします。
—
「引用」をマークアップするということ
Webサイトを作っていると、「誰かの言葉をちょっとだけ紹介したいな」というシーンに出くわします。例えば、敬愛する作家の言葉や、インタビュー記事の中の短い発言などですね。
そんな時、ただ文字を並べるだけでなく「これは引用ですよ」とブラウザに教えてあげるのが、HTMLの大切な役割です。そのために用意されているのが``タグ（Quoteの略）です。
なぜわざわざタグを使うの？
「``や`
「これは引用である」とタグで明示しておくことで、検索エンジン（Googleさんなど）が「あ、ここは誰かの言葉なんだね」と正しく理解できるようになります。これがSEO（検索順位を上げること）の第一歩でもあるんですよ。
—
ブラウザの「自動おせっかい」機能を知ろう
``タグを使うと、面白いことが起こります。
実は、``タグで囲った文字は、ブラウザが自動的に「” ”（ダブルクォーテーション）」で囲んで表示してくれるんです。
これが、初心者が最初に「あれ？CSSで何も書いてないのに、勝手に記号がついたぞ！」と驚くポイントです。
あの有名な言葉に、こんな一節があります。
人生はチョコレートの箱のようなもの。開けてみるまで中身はわからない。
まさにその通りですよね。
このコードを書くと、ブラウザ上では自動的に「”人生はチョコレートの箱のようなもの…”」と表示されます。自分で記号を入力しなくても、ブラウザが気を利かせてくれるなんて、ちょっと便利だと思いませんか？
—
ここが落とし穴！「自動付与」の注意点
でも、この機能には一つだけ注意が必要です。
ブラウザの「自動おせっかい」は、万能ではありません。
- 言語による違い: 日本語では「」を使いたいのに、ブラウザの設定によってはダブルクォーテーション（””）になってしまうことがあります。
- デザインの一貫性: サイト全体のデザインルールで「引用符は使わない」「青い線を引きたい」といった決まりがある場合、勝手についてくる記号が邪魔になることがあります。
そんなときは、CSSでリセットしてしまいましょう。大丈夫、決して難しいことではありませんよ。
/ CSSで自動付与された引用符を消す魔法のコード /
q::before, q::after {
content: “”; / 何も表示しないように指定します /
}
/ その代わり、自分で好きなように装飾してみる /
q {
font-style: italic; / 斜体にするだけでも引用っぽくなります /
color: #555; / 少しグレーにすると上品ですね /
}
こうすれば、「ブラウザの便利機能」に頼りすぎず、自分の思い通りのデザインをコントロールできるようになります。
—
最後に：HTMLは「手紙」を書くことに似ている
HTMLを書くことは、誰かに手紙を書くことに少し似ています。
「ここは大事だから強調（``）しよう」「ここは引用（``）だから少し丁寧に伝えよう」というように、読み手への配慮をタグに込める。
そんな温かいコードを書けるエンジニアは、現場でもすごく重宝されます。「機械的な作業」にするのではなく、「言葉の意味を伝える作業」として楽しんでみてくださいね。
もし分からないことがあっても大丈夫。最初から全部完璧に使いこなせる人なんていません。まずは``タグを使って、誰かの素敵な言葉をあなたのページに飾ってみることから始めてみませんか？
それでは、また次回の記事でお会いしましょう！Happy Coding!
コメント