CSSだけでソースコードを
見やすく装飾する方法
ウェブページでソースコードを掲載するとき、「pre」や「code」タグでマークアップして「整形ずみテキスト」として表示、等倍フォントで区別、まではいいけれど、これだけだど、なんだかそっけないですよね。
ここでは、jsなどの外部ライブラリを使わず、CSSだけでソースコードを手軽に見やすく装飾する方法をざっくりまとめています。
フォントを変える、行間を変える、背景色を変える、といった基本的なアレンジで、より「見やすく」装飾してみましょう。
ソースコードの装飾①
フォントを変える
ソースコードは、フォントの種類を変えるだけで、だいぶ綺麗な見た目になります。
コーディング用のフォントを指定すると、数字の「0」と大文字の「O」や、数字の「1」と大文字の「I」、小文字の「l」などの 間違いやすい文字もしっかり区別されていて読みやすくなります。
フォントの種類を変えるには「font-family」で指定します。
code{
font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}
端末によって入っているフォントも違うので、複数のフォントを指定しておきましょう。
どんなフォントかは、こちらのサイト様方がわかりやすかったです。
プログラミングが捗りすぎる！コーディングに最適なフォント12選 – paiza開発日誌 プログラミング用フォントをまとめてみました（Source Code Pro/Ricty/Consolasなどなど） | memobits
ソースコードの装飾②
行間を変える
さらに、行間や文字サイズを調整すると読みやすくなります。
code{
font-size: 14px;
line-height: 1.4;
}
文字サイズは「font-size」で指定します。
あまり大きいと返って見づらい事もあるので、私は14px～16pxくらいにしています。
行間は「line-height」で指定します。
個人的には、少し多めに行間をとっておくと読みやすい気がします。
「line-height」は、数値や単位、％で行間を指定します。
数値で指定する場合は、フォントサイズを1として、数値にフォントサイズを掛けた高さになります。
1.5は150%と、2.0なら200%と同じ効果です。
単位で指定する場合は、
「px」は1ピクセルを1とする単位で、画面解像度によって表示される大きさは変わります。
「em」はフォントの高さを1とする単位。1.5emなら150%と同じです。
「ex」は小文字の「x」の高さを1とする単位です。
比率で指定する場合は、フォントサイズ＝100%なので、200％でフォントサイズの2倍の行間になります。
ソースコードの装飾③
背景色をつける
コードソースの一部を強調したい時は、背景色を指定すると伝わりやすくなります。
色をつけたい部分を強調タグである「em」要素や、汎用的に使える「span」要素で囲んで装飾をつけて区別します。
「display: inline」とすると文字部分に、
「display: block」とすると行単位に色をつけることができます。
<pre><code>
em{
background-color: #eee;
<span class="s1">display: inline;</span>
<span class="s2">display: block;</span>
}
</code></pre>
em{
background-color: #eee;
display: inline;
display: block;
}
