ソースコードを表示する方法

サイト運営をしていると、パソコン操作の説明などをする際に、HTMLやCSSなどのソースコードを表示させたい時があります。

しかし、ソースコードは、ただ貼り付けただけでは、なかなか、その通りには表示されません。

かと言って、画像を貼り付ければ、コードをコピーできないので、読み手には使い勝手はよくありません。

WordPress使用者であれば、ソースコードを綺麗に表示させる専用のプラグインがあります。
しかし、プラグインを多用すると重くなりますし、設定も必要です。

プラグインを使用すれば、行番号を入れたりして、デザインを凝ることもできます。
でも、「そこまで必要ない」といった方もいるのではないでしょうか。

行番号は、コードをコピーしたい時に、邪魔になりますしね。

初心者でも、プラグインに頼らず、簡単かつシンプルにソースコードを表示する方法をご紹介します。

プラグインを使用せず、簡単かつシンプルにソースコードを表示する方法をご紹介します。

code要素とpre要素を使用する方法です。

code要素は、要素内の文字列が、プログラムのソースコード、HTMLやXMLの要素名や属性名、ファイル名など、コンピューターが認識する文字列であることを表すために使用します。

この要素は文章の中でも使用することができます。
文字列が複数行になる場合には、通常、pre要素と併用します。

一般的なブラウザでは、等幅フォントで表示されます。
また、ブラウザによっては、文字が小さく表示されることもあります。

なお、コードでよく使用する「<」は「<」、「>」は「>」、「&」は「&」に変換する必要があります。

ソースコードなどのコンピュータが認識する文字列を記述する際に、半角スペース、タブ、改行などをそのまま表示したい時に使用します。

一般的なブラウザでは、等幅フォントで表示されます。
また、ブラウザによっては、文字が小さく表示されることもあります。

では、実際に、どのように使用すればよいか、ご紹介します。

サンプルコードをブラウザに表示させるには、以下のコードを記入します。

【表示したいコード①】

ソースコードを表示する

【上記を表示させるコード】

<code>ソースコードを表示する</code>

【表示したいコード②】

h1, h2, h3, h4, h5, h6{    
    margin: 15px 0 5px;
}

#site-header #site-logo img{    
    height: 45px;
}

【上記を表示させるコード】

<pre><code>
h1, h2, h3, h4, h5, h6{    
    margin: 15px 0 5px;
}

#site-header #site-logo img{    
    height: 45px;
}
</code></pre>

いかがでしょうか。
以上が、簡単かつシンプルにソースコードを表示する方法になります。

もしよかったら、ご活用ください。

ソースコードを表示する方法 – 簡単！シンプル！プラグイン不要