HTMLのcodeタグの使い方まとめ！コードを表示する

html

HTMLのcodeタグについて書いています。

codeタグは、コンピューターコードの断片をマークアップするために使用されます。
これには、HTML、CSS、JavaScript、PHP、その他のプログラミング言語のコードが含まれます。

codeタグで囲まれたテキストは、ブラウザのデフォルトスタイルによって等幅フォントで表示され、コードであることを視覚的に示します。

codeタグの基本的な使い方

codeタグは、インラインで短いコードの断片をマークアップするのに適しています。

<p>HTMLで段落を作成するには、<code>
</code> タグを使用します。</p>
<p>CSSで文字の色を赤にするには、<code>color: red;</code> と記述します。</p>
<p>JavaScriptでアラートを表示するには、<code>alert('Hello!');</code> を実行します。</p>

上記のHTMLは、ブラウザで以下のように表示されます。(chromeのデフォルト表示)
コードの部分が等幅フォントで表示されていることに注目してください。

HTMLのcodeタグの表示確認

codeタグの意味合い

codeタグは、囲まれたテキストがコンピューターコードであることを示す意味合い（セマンティクス）を持っています。
これにより、検索エンジンやスクリーンリーダーなどの支援技術は、そのテキストをコードとして認識し、適切に処理することができます。

codeタグにスタイルを適用する

codeタグのデフォルトのスタイル（等幅フォント）は、CSS で上書きしたり、さらに他のスタイルを追加したりすることができます。

.highlight {
  font-family: "Courier New", Courier, monospace; /* より明示的に等幅フォントを指定 */
  background-color: #f4f4f4; /* 薄い背景色 */
  padding: 2px 5px; /* 少し内側の余白 */
  border-radius: 3px; /* 角を少し丸くする */
  color: #333; /* 文字色 */
}

<p>この<code>const myVariable = 10;</code> はJavaScriptの変数を宣言するコードです。</p>

上記の例では、codeタグに highlightクラスを適用し、CSSで背景色や文字色などを変更しています。
実際にブラウザで表示すると、下記のようになりました。
codeタグにスタイルを適用する

codeタグの使用例

codeタグは、以下のような場面で活用できます。

  • プログラミングのチュートリアルやドキュメント: コードの断片を説明文中に埋め込む。
  • 技術的な記事やブログ: 特定のコード構文やコマンドを示す。
  • オンライン教材: 学習コンテンツ内でコード例を提示する。
<p>PHPで配列を定義するには、<code>$myArray = [1, 2, 3];</code> のように記述します。</p>
<p>ターミナルでディレクトリを変更するには、<code>cd /path/to/directory</code> コマンドを実行します。</p>

codeタグとpreタグの違いと組み合わせ

codeタグは通常、短いインラインのコード断片に使用されます。
複数行にわたるコードブロックや、空白文字（スペース、タブ、改行）をそのまま表示したい場合には、pre(preformatted text) タグと組み合わせて使用します。

preタグは、囲まれたテキストの空白文字や改行を保持したまま表示します。
その中にcodeタグを配置することで、コードブロックであることを意味的に示し、等幅フォントで表示させることができます。

<pre><code>
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('World');
</code></pre>

<pre><code class="language-css">
body {
  font-family: sans-serif;
  margin: 0;
}
</code></pre>

上記の例では、JavaScriptとCSSのコードブロックがpreタグとcodeタグで囲まれています。
preタグによってコードのレイアウト（インデントや改行）が保持され、codeタグによってそれがコンピューターコードであることが示されます。

実際にブラウザで確認すると、下記のように表示されました。
codeタグとpreタグを組み合わせることで、複数行のコード表示をすることができました。preタグがない場合には1行になってしまいます。
preタグとcodeタグを組み合わせて使う

また、language-cssのようなクラスをcodeタグに付与して、JavaScriptのライブラリ（Highlight.jsやPrism.jsなど）を使ってシンタックスハイライトを適用することもあります。

codeタグを使用する際の注意点

  • HTMLエンティティ: < や > などのHTMLで特別な意味を持つ文字をコード内で使用する場合は、HTMLエンティティ（&lt;, &gt; など）に置換する必要があります。preタグと組み合わせる場合でも同様です。
  • 長いコードブロック: 長いコードブロックはpreタグとcodeタグで囲み、必要に応じてスクロールバーを表示するなどの工夫をCSSで行うと、可読性が向上します。
  • 意味的なマークアップ: コードの種類（HTML, CSS, JavaScriptなど）に応じて、class属性などを利用して意味的な情報を付加することで、CSSやJavaScriptによる処理をより柔軟に行うことができます（例: <code class="language-javascript">).

まとめ

codeタグは、HTMLドキュメント内でコンピューターコードを正確かつ意味的にマークアップするための重要な要素です。
短いインラインのコード断片から、preタグとの組み合わせによる複数行のコードブロックまで、幅広く対応できます。

CSSと連携して視覚的なスタイルを調整したり、JavaScriptライブラリと組み合わせてシンタックスハイライトを適用したりすることで、コードの可読性を高め、技術的な情報を効果的に伝えることができます。
コードをWebページに表示する際には、preタグとcodeタグを使っていきましょう。

HTML
yasuaki

コメント