【ソースコードを載せるためのHTMLタグ】codeタグで綺麗なコードを表示しよう

ブログのカスタマイズコードを記事にしたいな。

コード部分を、それっぽく見せるにはどうしたら良いんだろう？

よく、ソースコード部分は背景が付いていたり、文字に色がついていたりするけど、具体的なやり方を解説してほしい。

こんな疑問を解決する記事です。

本記事では、ソースコードをソースコードとして表示するためのHTMLタグ（<code>）を解説します。

「ブログやWebサイトのカスタマイズ方法を読者とシェアしたい」という人は、<code>を使って、綺麗なソースコード表示をしましょう。

また、<code>を使うことは、検索エンジンからのページ理解にも役立ちます。SEOの一部としても有効なので参考にどうぞ。

【無料】授業料0円のプログラミング教室まとめはこちら

2022年8月23日無料でプログラミングを学ぶ方法【初心者向け】※授業料0円スクールあり

»無料でプログラミングを学ぶ方法【初心者向け】※授業料0円スクールあり

スポンサードサーチ

本記事のもくじ

【codeタグとは】基本情報と使い方

<code>は、ブログやウェブサイトの文章の中で、プログラミングコードを紹介するときに使うHTMLタグです。

HTML、CSS、JavaScript、Python、PHP、Ruby…等々、とりあえずプログラミング言語なら、<code>で囲んで問題ありません。

<code>内に書かれた要素はインラインで表示されるので、前後の文章とつなげて使うことができます。

codeタグの書き方

<code>ここにコードソースを書く</code>

書き方はたったこれだけ。シンプルですね。

codeタグを使うメリット

<code>を使うメリットは大まかに次の通り。

読者にとって「どの部分がコードなのか」が一目瞭然
検索エンジンにとって「どの部分がコードなのか」が一目瞭然

読者にも検索エンジンにも「ここがコードの内容ですよ」というのを伝えるための役割を果たします。

それ以外に目的はありません。

複数行のソースコードを書きたい場合【preタグの使い方】

複数行にわたってソースコードを書く場合、<code>をさらに<pre>で囲む必要があります。

preタグとは

<pre>とは、整形済みテキストを表すためのタグでして、空白や改行などのスペースをそのまま表示してくれます。

<code>で囲っただけのソースコードは、ブラウザ表示の際に空白が詰められた状態で表示されてしまうので、必ず<pre>で囲みましょう。

» 参考記事：【preタグとは】整形済みのテキストを表すタグって？いつ使うの？（←これに答えます）

preタグの使い方

<pre>
  <code>
    ここにソースコードを書く
  </code>
</pre>

preタグを使わない場合

<pre><code>ここにソースコードを書く</code><pre>

このように、改行や空白が無視された状態で表示されてしまう…。

preタグを使った場合

<pre>
  <code>
    ここにソースコードを書く
  </code>
</pre>

このように、改行や空白がちゃんと入って表示される。

記号はエスケープ処理しよう

<code>で囲っただけでは、記号など一部の文字がうまく表示されません。

そのため、対象となる文字はエスケープ処理をする必要があります。

エスケープ処理をしないと…

エスケープ処理をしないと…ソースコード

エスケープ処理をしないと…ブラウザ

<code>で囲った部分も、ブラウザは通常のHTMLコードとして認識してしまうので、タグが効いた状態で表示されてしまいます。

ところが、エスケープ処理をすると…

ところが、エスケープ処理をすると…ソースコード

ところが、エスケープ処理をすると…ブラウザ

このように、タグに使われている記号（< >など）が、そのまま文字として表示されます。

WordPressなどでブログを書いている場合、ビジュアルエディタなら影響はないのですが、テキストエディタにソースコードを書くと、それ自体がコードだと勘違いされてしまいます。

その場合に、「これはソースコードではなく、ただの文字列です」という意味を与えるのがエスケープされた文字です。

エスケープ処理が必要な文字・記号

エスケープ処理が必要な文字と記号は下記の通り。

「<」→「<」

「>」→「>」

「&」→「&」

「”」→「"」

とはいえ、ソースコードを書くたびに、いちいち自分でエスケープ処理するのは面倒なので、エスケープツールを使用して時短しましょう。

下記のサイトは無料で使えて、<code> <pre>で囲む・囲まないもチェックボックスひとつで設定できるのでおすすめです。

» Web制作小物ツール – HTMLエスケープツール

スポンサードサーチ

ソースコードの表示をカスタマイズする

<code>で囲んだだけでは、ブラウザ表示の際の見た目は整いません。

「ここがコードだよ」というのをわかりやすくするためには、<code>をCSSでカスタマイズしつつ、コードボックスっぽい見た目にデザインしたほうが良いと思います。

ここからは、CSSによるカスタマイズと、シンタックスハイライトというコードの文字に色付けする方法を解説します。

CSSでcodeタグをデザインする

<code>で囲った部分をそれっぽくカスタマイズするためのCSSを用意しました。（当ブログではテーマに搭載されているCSSをそのまま利用しています）

codeタグ装飾：CSS

code {
　padding: 0.2em 0.3em;　/* 内側の余白 */
　margin: 0 0.2em;　/* 外側の余白 */
　border-radius: 5px;　/* 角の丸み */
　background: #f1f2f3;　/* 背景色 */
　color: #404040;　/* 文字色 */
　font-size: 0.9em;　/* 文字サイズ */
}

preタグを使ったコードボックスを作りたい

<pre>を使ったコードボックスの見た目を整えるCSSは次の通りです。

pre & codeタグ装飾：CSS

pre {
　padding: 1em;　/* 内側の余白 */
　margin: 0 0 1.5em;　/* 外側の余白 */
　border: solid 1px #eaedf2;　/* 枠線 */
　background: #f3f6fc;　/* 背景色 */
　color: #54687c;　/* 文字色 */
}

背景を黒く、文字を白にしたい

当ブログでは設定していませんが、よく見かけるコードボックスには、背景が黒く、中のテキストが白で表示されているものもありますよね。

そんなデザインにしたいときは、下記CSSを参考にどうぞ。

背景黒っぽいコードボックス：CSS

pre {
　padding: 1em;　/* 内側の余白 */
　margin: 0 0 1.5em;　/* 外側の余白 */
　border: solid 1px #4d4d4d;　/* 枠線（枠線を濃い黒に） */
　background: #25292f;　/* 背景色（背景を黒に） */
　color: #fff;　/* 文字色（文字を白に） */
}