CSSシークレット ―47のテクニックでCSSを自在に操る

課題

ドキュメントやチュートリアルなどのようにソースコードが多く表示さ

れる Webページ に は 、 ス タ イ ル 設 定 に 関 す る 固 有 の 問 題 が あ り ま

す。コードを表示させるための<pre>要素や<code>要素には、下のよう

なデフォルトのスタイルが適用されます。

しかし、このようなスタイルがすべてのコードに適しているわけではあ

りません。例えば、タブはコードのインデントには適していますが、

Webではあまり使われません。ブラウザ上では、タブは空白 8 文字分とし

て表示されるためです。このような広すぎるインデントは、図 5.12 のよ

うにひどい表示をもたらします。ボックスに収まらなくなってしまうこと

も多いでしょう。

タブのインデント幅の

調整

23

pre,code{

 font‐family:monospace;

}

pre{

 display:block;

 margin:1em0;

 white‐space:pre;

}

214

5章：タイポグラフィー

while(true){

 vard=newDate();

 if(d.getDate()==1&&

 d.getMonth()==3){

  alert("TROLOLOL");

 }

}

図5.12

デフォルトの8文字分の幅で表示され

たタブ

インデントのためにタブを使うことに

ついて嫌悪感を持っている読者もいる

かもしれません。詳細についてはここ

では述べませんが、筆者はタブを利用 ...