HTML・Wordpressなどの覚え書きブログ

preタグはプログラムソースなどを公開するときに便利ですが、スタイルを指定しないとpreタグ内の記述がページ幅を超えてしまいます。

これを解決するひとつの手段として、スクロールバーを表示させることでページ幅に合わせた表示が可能となります。

▼サンプル

pre{
background-color : #f4f5f7; padding : 5px 5px 5px 5px; border-top-width : 1px; border-top-style : dashed; border-top-color : #cccccc;
border-left-width : 1px; border-left-style : dashed; border-left-color : #cccccc; font-size : 12px; color : #666666; overflow: auto;
}

上記のソースようにスタイルシートで指定すると、上のように表示されます。

関連する投稿
Tag : 
Category:HTMLNo Comments
Comment and Pinging is not permitted.

Copyright ホームページ覚書 All Rights Reserved.
Template by ホームページ覚書.