「それ、ただの文字じゃないんです」――``要素と`pre`要素でプログラムを正しく伝える魔法
こんにちは！フロントエンドの世界へようこそ。
Webサイトを作っていると、記事の中に「こんなコードを書くと動きますよ！」なんて、プログラムの断片を紹介したくなる場面が出てきますよね。
そんな時、あなたはどのように書いていますか？ もしかして、ただのテキストとしてベタ打ちしていませんか？
実は、Webブラウザに対して「これはただの文章じゃなくて、コンピュータのための『コード』なんだよ」と教えてあげるための、とても大切なタグがあるんです。それが今回ご紹介する `` 要素です。
今日は、初心者の方がつまずきやすい「コードの書き方」について、身近な例えを交えながら、温かく紐解いていきましょう。
---
1. `` 要素は「コンピュータの言葉」を示す名札
例えば、あなたが料理のレシピ本を書いていると想像してみてください。「砂糖を大さじ1杯入れてください」という文章の中に、特別な意味を持つ重要な単語があったら、そこだけ色を変えたり、太字にしたりしますよね。
Web制作でも同じです。文章の中にプログラムの命令文が混ざっているとき、`` 要素を使うと、ブラウザはそれを「これはプログラムのコードですよ！」と認識してくれます。
なぜわざわざタグで囲むの？
ただの文字として表示するだけなら、そのまま書いても見た目は変わりません。でも、`` を使うことには大きな理由が2つあります。
1. 検索エンジンへのヒント: Googleなどの検索エンジンが、「あ、ここはプログラミングの解説をしているページだな」と正しく理解してくれます。
2. アクセシビリティの向上: 画面読み上げソフトなどを使っている方に対して、「ここから先はコードが読み上げられるんだな」と伝えることができます。
これって、Webサイトを「誰にとっても親切な場所」にするための、最初の小さな思いやりなんです。
---
2. 改行やスペースが消えちゃう！そんな時の救世主 `pre` 要素
さて、ここで一つ、誰もが一度はぶつかる壁をご紹介します。
「コードをきれいに改行して書いたのに、ブラウザで見たら全部1行に繋がっちゃった！」という経験はありませんか？
HTMLは、実はソースコード上の「無駄な改行やスペース」を無視して表示するようにできているんです。これを解決するのが `
` 要素です。
- `
`: 「中身はコードですよ」という属性を示すもの。 - `
`
: 「中身の見た目（改行やスペース）をそのまま表示してね」という指示をするもの。
// JavaScriptのサンプルコード
function sayHello() {
console.log("こんにちは！");
}
// ここで改行しても、ちゃんと反映されます！
sayHello();
---
3. 使い分けのコツ：インラインとブロック
最後に、ちょっとだけ整理しましょう。
- 文章に混ぜるなら `
` だけ:
「`const` キーワードを使って変数を作ります」のように、文章の一部としてコードを埋め込む場合は、`` だけでOKです。これなら行の中に自然に溶け込みます。
- コードの塊を見せるなら `
` + `
:`
先ほどの例のように、複数行にわたるプログラムを表示する場合は、迷わずこの組み合わせを選びましょう。
覚えておくと安心なポイント
`` や `
` の中では、`<` や `>` といった記号をそのまま書くと、ブラウザが「HTMLタグの始まりかな？」と勘違いして崩れてしまうことがあります。そんな時は、`<` (小なり) や `>` (大なり) といった特別な書き方（HTMLエンティティ）を使うのがプロの流儀です。今はまだ難しく感じるかもしれませんが、「あれ？なんか表示が変だな？」と思ったらこのことを思い出してくださいね。
---
最後に：小さなタグに、大きな愛情を
Webサイト作りは、突き詰めれば「情報の整理整頓」です。
ただ見た目を整えるだけでなく、その中身が何であるかを正しくブラウザに伝えてあげること。それが、あなたが書いた素晴らしいコードを、世界中の人に正しく届けるための第一歩になります。「HTMLのタグなんて多すぎて覚えられない！」と焦る必要は全くありません。今日知った `
` と `` から、少しずつ自分のサイトに馴染ませていってみてください。もし、書いていて分からなくなったら、いつでもここに戻ってきてくださいね。あなたのWeb制作ライフが、より楽しく、より豊かになりますように！応援しています！
コメント