モチベーション

例えばこのブログでもそうなのだが、コードの断片を貼り付けているページがいくつかある。そういった個所は得てして横長になりがち。

単なるコードであれば横幅を短く書けばいいじゃないか、ということもあるが、そのまま描いた方が都合がよい場合も多くある。また、コマンドライン上で実行するワンライナーなんかは都合上1行で書いてやりたい気持ちもある。

そういった横長なコンテンツに対してスクロールバーを表示したいという話です。

方法

例えば <code> という要素に対してこれを実施したい場合。

code {
  overflow: auto;
}

これにより、要素の横幅を超えてしまうような場合にのみスクロールバーが表示される。ちょうどこのサイトのように。

This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.

例えば <code> という要素に対してこれを実施したい場合。あんまり常に表示したいということはなさそうですが、デザインをそろえたいなどで利用されることがあるかもしれません。

code {
  overflow: scroll;
}

overflow ではなく、 overflow-x を指定すれば横方向のみ、overflow-y を指定すれば縦方向のみについてスクロールバー表示を設定できます。

overflow-x / overflow-y の後に指定する内容は overflow の時と同じです。

code {
  /* 横方向のみ */
  overflow-x: scroll;
}