このブログではサンプルコードを載せることが多いので、整形済みテキストのためのPREタグを結構使う。PREタグは、括られた部分を整形済みテキストとして扱い、改行や空白がソースのまま出力されるので、プログラムやCSSのサンプルソースを載せるのには便利なのだが、ブラウザの幅を狭めている人やちょっと大き目の文字を使っている人は、整形済みテキストが記事エリアをはみ出してしまうことがある。
仕方がないので、CSS: 「折り返す」pre や pre 要素による整形済文字列をどう扱う ? の記事を参考にCSSでPREタグのスタイル（見栄え）をちょっと変えることにしてみた。CSSの変更（追加）箇所は、以下の通りです。
| 折り返すPREのCSS【追加分】 |
|---|
/* エントリ内：整形済みテキスト */
.etBody PRE {
/* 折り返し有効 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* IE 5.5+ */
} |
| スクロールバーが出てくるPREのCSS【追加分】 |
|---|
/* エントリ内：整形済みテキスト */
.etBody PRE {
/* はみ出したらスクロールバーを表示（除くMacIE） */
width: 100%; /* IEのバグ対応 */
/*\*/ overflow: auto; /* */
/* MacIEはoverflowプロパティにバグがあって使い物にならない */
} |
どちらも「整形済みテキスト」のためのPREタグとしてあるべきスタイルではないかも知れないが、テキストが記事エリアからはみ出しちゃうのもナンなので、今回はスクロールバーの方を採用じゃなくてミックスして使うことにしてみました。
とはいえ、ブログのCSSが反映される環境なんてたかが知れているので、幅を狭めてもそこそこ見えるような整形であったり、そもそもPREタグを使わない方が無難なことに変わりはないんだけどね。
pre 要素による整形済文字列をどう扱う ? - hxxk.jp 2005年12月15日21:50
CSS: 「折り返す」pre - ただのにっき 2005年09月22日
PREの範囲が1行だけで長い場合は、Windows Internet Explorerではまともに表示されないので、ちょっと変更しました。
＃ 1行分の高さに文字の行と横スクロールバーの両方が表示されるので、文字が見えない…
| スクロールバーが出る＋折り返すPREのCSS【追加分】 |
|---|
/* エントリ内：整形済みテキスト */
.etBody PRE {
/* はみ出したらスクロールバーを表示（除くIE） */
/*\*/ overflow: auto; /* */
/* MacIEはoverflowプロパティにバグがあって使い物にならない */
/* WinIEは1行で横スクロールバーを出すと使い物にならない */
word-wrap: break-word; /* WinIEバグ対策：単語の途中でも折り返す */
} |
まったく、Internet Explorerは使い物にならないなぁ。