「それ、ただの文字じゃないよ」――``タグでコードを「コードらしく」輝かせる魔法
Webサイトを作っていると、ブログや技術メモで「このJavaScriptの書き方はこうだよ！」と、プログラムのコードを紹介したくなる場面ってありますよね。
そんなとき、あなたは文章の中にコードをどうやって書き込んでいますか？ もし、ただの文章としてベタ打ちしているなら、ちょっともったいないかもしれません。
今回は、プログラムの「断片」を、ブラウザに「これはプログラムだよ！」と正しく伝えるための魔法のタグ、``タグの世界を覗いてみましょう。
---
``タグは「専門用語のタグ」なんです
HTMLにはたくさんのタグがありますが、``タグはまさに「コンピュータ言語の破片」を包むための専用ケースです。
例えば、お友達にメッセージを送るときに「`alert('こんにちは！');`」と書いたとします。これを普通の文字で書くと、他の文章に紛れて読みづらいですよね。でも、``タグで囲むと、ブラウザは「お、ここは特別な意味を持つコードだな」と認識して、多くの環境で「等幅フォント（文字の幅が一定のフォント）」で表示してくれます。
これだけで、一気に「技術ブログっぽい！」雰囲気が出るんです。
どうやって使うの？
使い方はとってもシンプル。強調したいコードを `` と `` で挟むだけです。
JavaScriptで画面に挨拶を表示するには、alert('Hello!');を使います。
これだけで、ブラウザは「`alert('Hello!');`」の部分を、周囲の文章とは少し違う、カチッとした見た目で表示してくれます。まるで、普通の会話の中に専門用語がポツンと置かれているような、そんな心地よいリズムが生まれますね。
---
長いコードには `pre` タグという「相棒」を
さて、``タグだけでコードを囲めば万事解決……と言いたいところなのですが、実は一つだけ「注意点」があります。
``タグは、あくまで「インライン要素（行の一部）」です。そのため、長いコードを書いても、勝手に改行してくれたり、スペースを綺麗に保ってくれたりする機能はありません。
そこで登場するのが、`pre`タグという「相棒」です。
- `
`タグ：単語や短い一行のコード用（例：関数名や変数名） - `
`タグ
：まとまったブロックのコード用（改行やスペースをそのまま表示）
実践：`pre`と`code`の黄金コンビ
// これはJavaScriptのサンプルです
function greeting() {
console.log("こんにちは！");
}
`pre`タグを使うと、コード内の改行や空白がそのままブラウザに反映されます。これで、インデント（コードの字下げ）も崩れることなく、誰が見ても読みやすいコードが完成するわけです。
---
現場のちょっとしたコツ：見た目を整えるCSS
``タグを使うと、多くの場合、少し色が薄くなったり、背景がグレーになったりします。「もう少し自分好みの見た目にしたいな」と思ったら、CSSで少しだけお化粧をしてあげましょう。
/ 背景色を薄いグレーにして、角を少し丸くするだけでグッとおしゃれに /
code {
background-color: #f4f4f4;
padding: 2px 4px;
border-radius: 4px;
font-family: monospace; / 確実に等幅フォントにする指定 /
}
たったこれだけで、あなたの書いたコードが、まるでプロの技術者が書いたような「信頼感のある見た目」に変わります。
---
最後に：小さなマークアップが、読み手の助けになる
「たかがタグ一つで、何が変わるの？」と思うかもしれません。でも、Webの世界では、こうした小さな気遣いの積み重ねが、読みやすさに直結します。
コードをコードとして正しくマークアップしてあげることは、「ここが重要なプログラムだよ」という道しるべを読者に示してあげることと同じです。
最初は難しく感じるかもしれませんが、まずは一行のコードを `` で囲むところから始めてみてください。あなたの書いたWebサイトが、また一歩、誰かの役に立つ「プロフェッショナルな場所」に近づくはずですよ。
もし分からないことがあっても、大丈夫。一つずつ試しながら、一緒に学んでいきましょう！
コメント