ブログをリニューアル予定。過去記事は削除するかもです。

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

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

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

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

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

 

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

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

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

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

 

スポンサードサーチ

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

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

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

 

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

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

 

「<」→「&lt;

「>」→「&gt;

「&」→「&amp;

「”」→「&quot;

 

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

下記のサイトは無料で使えて、<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; /* 文字色(文字を白に) */
}

 

ソースコードに色付けして見やすくする

ソースコードが長いと、単純に読みづらいですよね。

そんなときに便利なのが、シンタックスハイライトと呼ばれるコードの色付けテクニックです。

 

シンタックスハイライトなし

シンタックスハイライトなし

シンタックスハイライトあり

シンタックスハイライトあり

 

シンタックスハイライトの実装方法

シンタックスハイライトはライブラリを使って外部ファイルを読み込むことで実装可能です。

下記記事にやり方をまとめました。WordPressならたった3行の追記コードをコピペするだけでOKなので5分で終了しますよ。

» 参考記事:【ソースコードを装飾】シンタックスハイライトとは(設定方法を解説)

 

スポンサードサーチ

まとめ:codeタグでソースコードを埋め込もう

まとめ

本記事は以上です。

おさらいですが、ブログやWebサイトでソースコードをソースコードとして載せたい場合は<code>を使えばOKです。

<code>はインライン要素なので、文章の途中でソースコードを表示することもできるし、さらに<pre>で囲めば、複数行に渡るコードも改行や空白を入れた状態で表示可能になります。

記号はエスケープ処理を行いつつ、シンタックスハイライトで読みやすいソースコード表示を目指しましょう。

おわり。