いきなり瑣末な設定になるが、スタイルシートの記述部分が本文の説明と同じスタイルで並んでゐるとどうも見づらいので、ここを本文と分けて表示する様にしたい。この部分は"source"といふクラス名のpre要素でマークアップしてゐるので、次の記述を追加。
pre.source { border:1px #999 dashed ; /* 枠線の設定 */ padding:2em ; /* 枠の内側の余白設定 */ line-height:1.2em ; /* 行の高さの設定 */ font-size:80% ; /*フォントの大きさの設定*/ overflow:scroll ; /* はみ出したらスクロール */ }
pre要素内のコンテンツは枠をはみ出す長さになつてもお構ひなしにぶつちぎってくれるので*1、はみ出し対策にスクロールバーを出してみた。‥‥ところが、InternetExplorerの表示を見てビックリ。そ・れ・は・意味が違ふだろ! こんなローカルなブラウザはさつさと捨ててしまへ。
*1:pre要素は「整形済テキスト」といふ意味だからさうしてくれないと困る