<blockquote>要素で横スクロールバーを出す方法

CSS

スタイルシートに、以下のように blockquote.code クラスセレクタを追加します。

blockquote.code {
    width: 400px;   /* for IE */
    overflow: auto;
    white-space: pre;
}

※「width: 400px;」の部分はご自分の環境に合わせた値を設定してください。別途 blockquote 要素セレクタで width プロパティが数値指定されている場合は指定不要です。

HTMLの引用部分

実際のHTMLでは、以下のように<blockquote>タグに「class="code"」属性指定を記述します。

<blockquote class="code"><pre>
if(typeof(MovableTypeJsonFeed) == 'undefined') MovableTypeJsonFeed = new Array();
 :（↑このような長い行も折り返されずに表示され、
 :　↓横スクロールバーでスクロールできます。）
</pre></blockquote>

表示結果例

上の例でも充分結果例になっていますが、一応上記のHTMLを表示した結果例を下に示しておきます。

if(typeof(MovableTypeJsonFeed) == 'undefined') MovableTypeJsonFeed = new Array();
 :（↑このような長い行も折り返されずに表示され、
 :　↓横スクロールバーでスクロールできます。）

技術情報

<blockquote> に class="code> を指定せずに（正確にはスタイルとして overflow: auto を指定せずに）内容に <pre> を指定した場合、以下の現象が起きます：

• [MSIEの場合] blockquote 要素の幅が pre 要素内の一番長い行の幅に合わせて拡大してしまう
  →表示が崩れる
• [MSIE以外のほとんどのブラウザの場合] blockquote 要素の幅より長い pre 要素の行が blockquote の枠からはみ出す

これを回避し、横スクロールバーを表示する方法として、上記のスタイル指定以外に、pre 要素に対してスタイルを適用するという方法もあります。

blockquote pre {
    overflow: auto;
}

この場合、blockquote 要素にスタイルシートで padding を指定していると、スクロールバーが blockquote のブロックの少し内側に表示されてしまいます。
blockquote のブロックにボーダーを表示している場合、ちょっとかっこわるくなります。

また例では <blockquote> に <pre> を入れ子にしていますが、blockauote.code クラスセレクタで「white-space: pre;」を指定しているので、表示結果だけを求めるならば <pre> は省略できます。

<blockquote class="code">
if(typeof(MovableTypeJsonFeed) == 'undefined') MovableTypeJsonFeed = new Array();
 :（↑このような長い行も折り返されずに表示され、
 :　↓横スクロールバーでスクロールできます。）
</blockquote>

ただし、 HTML 4.01 Strict, XHTML 1.0 Strict, XHTML 1.1 では、blockquote 要素の内容として直接インライン要素を記述することは禁止されているので、標準準拠に拘るなら、適切なブロック要素を入れ子にすることをオススメします。