We Ain't Seen Nothin' Yet. : マウスを乗せると広がるpreタグの作り方

マウスを乗せると広がるpreタグの作り方

書いた人: noriaki 2007,06月30日(土) 19:44

このブログは技術系の内容も多く，ソースコードがよく出てきます．そのソースコードを見やすくするために，syntaxhighlighterを導入して，結構見やすくなったのではないかと思っています．

単純にpreタグで囲んで表示すると，CSSでの装飾にもよりますが右側がスクロールバーを動かさないと見えなかったり，はみ出してデザインにあわなくなったりすることがよくあります．

しかし，数行のコードのためにJavascriptライブラリを使うなんて大げさだ，なんてことも思ったりします．また，デザインや見やすさで考えると以下のようなことも考えられます．

エントリの幅を超えてはみ出すのはダサい
でも左右のスクロールバーもダサい
そもそもスクロールバーは動かさないと全体が見えないからめんどくさい

なので，デザインと見易さのバランスをうまくとるために，マウスオーバー時のみ全体を表示して，それ以外のときはエントリの幅で収まっているpreタグを使うことにしました．

こんな風にとても長いpreタグの内容があってもマウスを上に乗せるとぐわっと広がって全体が見えます．

実現方法は簡単で，以下のように単純なJavascriptでCSSのclass名を変えてあげてるだけです．

<pre onmouseover="this.className='moused'" onmouseout="this.className='unmoused'" class="unmoused">
こんな風にとても長いpreタグの内容があってもマウスを上に乗せるとぐわっと広がって全体が見えます．
</pre>

あとは，デザインに合わせてmousedクラスとunmousedクラスに適切なCSSを適用してあげれば，スクロールバーの野暮ったい感じや見づらさが軽減されると思います．

私が適用しているCSSプロパティは以下のような感じです．

pre.unmoused {
  background: #373737 none repeat scroll 0% 50%;
  padding: 0.2em 0.4em;
  border-color: #ff924a;
  border-width: 1px;
  border-style: solid dashed solid solid;
  color: #e0e0e0;
  overflow: hidden;
  position: relative;
  width: 481px;
  z-index: 1;
}

pre.moused {
  border: 1px solid #ff924a;
  width: 690px;
  z-index: 3;
}

この中で最低限指定しておかなければならないCSSプロパティはこんな感じでしょうか．