2008-09-05

Pre 要素に横スクロール・バーを付けた

当方のブログ、今まで pre 要素で横に長〜いテキストを書くと右端がサイドバーに隠れて見えなくっていた。例えば、ソース・コードをそのままコピペした時とか、長いワンライナーを書いた時にそんなことが起きていた。

今日、改善策を入れた。

CSS で一行だけ。

div.quote, pre.sample {
  margin: 0 0 1em 20px;
  padding: 5px 0 5px 10px;
  overflow: auto;
}

overflow というのがそれ。行をはみ出す (overflow する) 時に、自動で横スクロール・バーを出してくれる。

これで、少しはブログを見易くなったんじゃないかと思う。今まで、ご不便かけててごめんなさい。

4 comments:

  1. これいいですね。

    機会があったら使ってみます。

    ReplyDelete
  2. どぞ、お使い下さい。

    たった一行なんですけど、いざ必要な時に思い出せなくなるんですよね :p

    ReplyDelete
  3. 参考にさせて頂きました。有難うございます。
    # でも自分はまだ長いコードを載せていないので
    # 成功しているか確認できていないですが。

    ReplyDelete
  4. chuta さん、はじめまして。記事が参考になったようで、良かったです。

    長いコードがブログにのるようになるといいですね :)

    ReplyDelete