<pre>要素を伸縮自在にする

ブログにソースコードを掲載する場合には、一般的に<pre>タグでソースコードを囲みます。 ここでは、3カラムのレイアウトを採用しているサイトのために、 次のような条件下でソースコードを掲載することを考えてみます。

• ブラウザは、ソースコードが画面内に収まらない場合でも、水平スクロールバーを表示してはいけない。
• その代わりに、<pre>要素には水平スクロールバーを表示しても良い。
• しかし、<pre>要素の幅を固定してはいけない（ブラウザのサイズに合わせて伸縮自在にする）。

Firefox と Opera の場合は、<pre>タグのスタイルに「overflow: auto」を指定することで、 この条件を簡単にクリアすることができます。 しかし、Internet Explorer (IE) ではひと工夫必要になります。

検討

第1段階

IE の <pre>タグが、親要素のレイアウトを破壊して押し広げるという問題に対処します。 それには、<pre>タグを <table>タグで囲みます。 このとき、<table>タグのスタイルには「table-layout: fixed」と「width: 100%」を指定します。 「table-layout: fixed」を指定すると、固定レイアウトアルゴリズムが適用されるため、 レイアウトの破壊を防ぐことができます。

第2段階

IE6 特有の問題として、<pre>要素の右側が欠ける問題に対処します（IE7 では直っています）。 それには、<pre>タグのスタイルに「_width: 90%」を指定します。 プロパティの頭にアンダースコア付加することにより、 このプロパティが IE4 - IE6 のみに適用されるように制限します（アンダースコアハック）。 これにより、IE4 - IE6 では仕方ないとしても、他のブラウザでは 100% の幅で表示することができます。

第3段階

IE の <pre>要素には余計な垂直スクロールバーが表示されるのでこれを消します。 それには、<pre>タグのスタイルに「overflow-y: hidden」を指定します。

第4段階

IE7 でも直っていない問題として、水平スクロールバーがコンテンツの上に覆い被さる問題に対処します。 それには、<pre>タグのスタイルに「*padding-bottom: 25px」を指定して、 水平スクロールバーの表示領域を確保します。 プロパティの頭にアスタリスクを付加することにより、 このプロパティが IE のみに適用されるように制限します （これは CSS Hack の一種で、IE が不正な文字を無視してプロパティを有効にする動作を利用します）。

まとめ

スタイル

検討結果をまとめると、<table>タグと <pre>タグのスタイルは次のようになります。 都合により、この記事（node番号=90）のサンプルにだけ適用するように作成してありますが、 通常はサイト全体に適用されるようにします。

#node-090 table.code {
    margin: 0px;
    padding: 0px;
    width: 100%;
    table-layout: fixed;
}

#node-090 table.code pre.code {
    margin: 0px;
    padding: 10px;
    border: 1px dotted orange;
    background-color: whitesmoke;
    font-size: 0.9em;
    line-height: 1.4em;
    overflow: auto;
    overflow-y: hidden;
    _width: 90%;                /* for IE4 - IE6 */
    *padding-bottom: 25px;      /* for IE? - IE7 */
}

使い方

<div id="node-090">
<table class="code">
<tr>
<td>
<pre class="code">
……… 掲載するソースコード ………
</pre>
</td>
</tr>
</table>
</div>

サンプル

実際に上記のスタイルを使用した場合のサンプルは次の通りです。

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
うううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう