ブログ記事を書く際に、ソースコードを読みやすく表示するにはどうすれば良いでしょうか？

本記事では、HTMLの<pre>タグと<code>タグを活用し、簡単なCSSカスタマイズでコードブロックの見栄えを改善する方法をご紹介します。

地味なポイントに思えますが、コードの表示は読者の利便性に大きく影響します。同じように技術ブログを書いている方の参考になれば幸いです。

preタグとcodeタグとは？

ログにプログラムのソースコードやコマンドを掲載する際には、基本的に<pre>タグと<code>タグを組み合わせて使用します。具体的には以下のように、<pre>要素の中に<code>要素を入れてコードを書きます。

    

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

このようにタグを使うだけでもコードをそのまま表示できますが、何もスタイルを当てないと文字が小さかったり背景が本文と同じだったりして少し見づらいですよね。そこで次に、CSSを使ってコードブロックを見やすくカスタマイズする方法を紹介します。

コード表示を見やすくする2つのスタイル（CSS設定）

私はブログ上でコードを掲載するとき、用途に応じて「コンソール風」と「エディタ風」の2種類のスタイルを使い分けています。以下のCSSをあらかじめブログのカスタムCSSに追加し、<pre><code>タグにクラスを指定することで、見た目を切り替えられます。

🎨 コンソール風スタイル（黒背景・白文字）

黒い背景に白文字で、ターミナルやコンソールの出力画面のように見えるスタイルです。主にコマンド実行結果やログの出力などに適しています。

    

.pre-main {
    background-color: #000; /* 背景色：黒               */
    color: #FFF;            /* 文字色：白               */
    white-space: pre-wrap;  /* 折り返し設定（後述）     */
    padding: 10px 5px;      /* 余白（上下10px 左右5px） */
    width: 100%;            /* 横幅いっぱいに広げる     */
    overflow: auto;         /* はみ出した場合スクロール */
}
}
code {
    white-space: pre;       /* 空白や改行をそのまま表示（折り返さない） */
    font-size: small;       /* フォントサイズ小さめ     */
}
    
  

🖋 エディタ風スタイル（淡色背景・黒文字）

エディタ上でコードを読んでいるような印象にするスタイルです。背景色を淡いクリーム色（薄い黄色）に、文字色を黒に変更します。ソースコードそのものを掲載する場合に、強調表示して見せたいときに使います。

    

.cy30 {
    background-color: #FFB;   /* 背景色：淡い黄色       */
}
.fcb {
    color: #000;               /* 文字色：黒            */
}
    
  

コンソール風コードブロックの例

上記で定義したCSSクラスを使い、実際にHTML記事内でどのようにコードブロックを記述するかを例示します。

🎨 コンソール風（黒背景）

コンソール風表示にしたい場合、<pre>タグに.pre-mainクラスを付け、内部の<code>タグでコードを囲みます。以下は黒背景のコンソール出力例です。

    

<pre class="pre-main">
  <code>
コンソール用の出力例
  </code>
</pre>
    
  

🖋 エディタ風コードブロックの例

エディタ風表示にする場合は、<pre>タグに.pre-main cy30 fcbのように複数のクラスを指定します。こうすることで、先ほどの淡色背景・黒文字スタイルが適用されます。以下は強調表示されたコード例です。

    

<pre class="pre-main cy30 fcb">
  <code>
エディタ用のコード例
  </code>
</pre>
    
  

最初はコンソール風のスタイルしか使っていませんでしたが、途中からコードの種類に応じて背景色・文字色を変えるようにし、読みやすさを工夫しました。用途に応じてスタイルを選べるので、読者にとってもコードが見やすくなるはずです。

📱 モバイルでの表示対策（横スクロール対応）

コードの行数が多かったり1行が長かったりすると、スマホ画面ではコードが折り返されてしまい非常に読みにくくなります。これを防ぐため、以下のスタイル設定によって横スクロールで表示できるようにしています。

この設定により、横に長いコード行も画面からはみ出すことなく、左右にスクロールして読むことができます。スマホでもストレスなくコード閲覧できるので、ユーザビリティが向上します。

✍️ おわりに：プラグインを使った高度なコードハイライト

今回は<pre><code>タグと簡単なCSSによるコード表示の工夫について紹介しました。シンプルな方法ですが、コードの見せ方ひとつで読みやすさは大きく変わります。

さらに見栄えを良くしたい場合は、シンタックスハイライト（構文ごとに色分けする表示）に対応した外部プラグインの導入も効果的です。実は当ブログでも最近テンプレートをカスタマイズし、JavaScript製のハイライト用プラグイン「Prism.js」を導入してみました。以前はGoogle提供の古いハイライトライブラリ「Prettify」を使っていましたが、こちらは2020年に公式サポートが終了しており、よりモダンなPrism.jsへ乗り換えています。

Prism.jsに切り替えた理由の一例は以下の通りです。

実際にPrism.jsを導入すると、例えばコード内のキーワードに色が付くなどグッと見やすくなります。プラグインの設定には多少手間がかかりますが、技術ブログを長く続けるなら検討する価値は十分あるでしょう。 以上、小ネタ的な内容ではありましたが、コードの見せ方には意外と奥深いものがあります。過去の記事も少しずつ見直し、必要に応じてレイアウトやタイトルを改善しながら、これからも読みやすい記事作りを心がけたいと思います。