pre記法にスクロールバーを表示させました

先日書いたとある記事にあるはてなダイアリーのブログからトラックバックがあったので拝見したところ、私が書いた記事に対してとても興味深い示唆を頂いたのですが、それとは別のところで感心したことがありました。それはpre記法(またはスーパーpre記法)で書いた部分にスクロールバーがある事です。

何の事か意味がわからないと思うので具体的に書くと、

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

というように、

枠に囲まれた部分があると、ある幅と高さまでは表示し、それ以上はスクロールしたら見えるようにする

というものです。今までは長いものでもそのまま表示するようにしていたので見栄えはよろしくありませんでした。

やり方としては、はてなダイアリーの管理画面にアクセスし、「デザイン編集」の「スタイルシート」欄に

pre {
	max-width: 80em;
	overflow: auto;
	max-height: 25em;
}

と設定すれば良いようです。これで
「幅80文字、高さ25文字を超えるとスクロールバーを表示させる」*1
という動作となります。

こちらのブログのソースからCSS情報を参考に(というかもろパクリ)させていただきました・・・。

ではー。

*1:厳密には「文字の高さを基準とした1文字分の長さ（emは文字Mの大きさに由来）」だそうです