「コードを載せるだけ」で終わらせない！``と`
`を正しく使い分ける魔法のルール
Webサイトを作っていると、自分の書いたコードや、誰かに教えたいコマンドを画面上に表示したくなること、ありますよね。
そんなとき、HTMLには``タグや``タグという専用の道具が用意されています。でも、いざ使おうとすると「あれ？どっちを使えばいいの？」「どうやって組み合わせるのが正解？」と迷ってしまうことはありませんか？
安心してください。この仕組み、実は私たちの身の回りにある「整理整頓」と全く同じ考え方なんです。今日は、この2つのタグを仲良く使うためのコツを、一緒に紐解いていきましょう！
---
1. そもそも、この子たちは何者？
まずは、それぞれの「役割」をイメージしてみましょう。
``タグ：これぞ「コードの断片」
``タグは、その名の通り「これはプログラムのコードですよ」と教えてあげるためのタグです。
例えるなら、「大切な宝石をそっと包むベルベットの布」のようなもの。文中にサラッと「`const name = 'Taro';`」と書きたいとき、このタグで囲むことで、ブラウザに「これはただの文章じゃなくて、コードの一部なんだよ」と伝えます。
``タグ：崩れ知らずの「整形済みテキスト」
一方で``タグは「Preformatted（整形済み）」の略。
こちらは「頑丈なアクリルケース」です。普通、HTMLに半角スペースや改行をたくさん書いても、ブラウザは「余計な空白は無視してまとめちゃえ！」とスッキリ整えて表示してしまいますよね。でも、``で囲むと、「書いた通りにそのまま表示して！」とブラウザに命令できるんです。
---
2. 最強のタッグ！ `pre`の中に`code`を入れる理由
さて、ここからが本題です。よく見かけるのが、以下のようなネスト（入れ子）構造ですね。
// このように書くと、改行もスペースもそのまま表示されます！
function sayHello() {
console.log("こんにちは！");
}
なぜわざわざ「`pre`の中に`code`を入れる」のでしょうか？
実はこれ、「プログラムの見た目を整えつつ（pre）、それがプログラムであると宣言する（code）」という、二重のメリットがあるからなんです。
- `pre`の役割： プログラミングで大事な「インデント（字下げ）」や「改行」をそのまま守ってくれます。これがないと、せっかくのコードが左端に寄ってしまって、何がなんだか分からなくなってしまいますよね。
- `code`の役割： 検索エンジンやスクリーンリーダー（視覚障害のある方のための読み上げソフト）に対して、「ここはコンピューター言語が書かれている場所ですよ」と正確に伝えることができます。
つまり、「見た目はきれいに整えつつ、中身はしっかりコードだと主張する」という、まさに理想的な形なんです。
---
3. 実践！こう書けば間違いなし
では、実際にエディタに書いて試してみましょう。まずはこの形をテンプレートとして覚えてみてください。
/ CSSの基本設定例 /
body {
background-color: #f4f4f4;
color: #333;
}
つまずきやすいポイント：HTMLの特殊文字
ここで一つだけ注意点です。HTMLには「`<`」や「`>`」などの記号をそのまま書くと、ブラウザが「あ！新しいタグが始まった！」と勘違いしてしまうというルールがあります。
もしコードの中にタグが含まれる場合は、以下のように書き換えてあげてください。
- `<` → `<`
- `>` → `>`
最初から完璧に覚える必要はありません。困ったときは「あ、そういえばHTMLのルールがあったな」と思い出してもらえれば大丈夫ですよ！
---
最後に：完璧じゃなくていい、伝わることが大切
いかがでしたか？「`pre`というケースの中に、`code`という宝石を飾る」。そうイメージすると、少し身近に感じられませんか？
Web制作を始めたばかりの頃は、タグの一つひとつに「これで合ってるかな？」と不安になることもあると思います。でも、こうして「なぜこのタグを使うのか」という理由を一つずつ理解していけば、いつの間にかあなたの書くコードは、誰が見ても分かりやすい、美しいものになっているはずです。
ぜひ今日のコードをエディタにコピーして、ご自身のサイトで試してみてくださいね。応援しています！
コメント