css: 横長なコンテンツにスクロールバーを表示したい
モチベーション 方法 overflow: auto で横長なコンテンツにスクロールバーを表示する overflow: scroll で常にスクロールバーを表示する 横方向か縦方向どちらかにのみスクロールバーを表示したい モチベーション 例えばこのブログでもそうなのだが、コードの断片を貼り付けているページがいくつかある。そういった個所は得てして横長になりがち。 単なるコードであれば横幅を短く書けばいいじゃないか、ということもあるが、そのまま描いた方が都合がよい場合も多くある。また、コマンドライン上で実行する ワンライナー なんかは都合上1行で書いてやりたい気持ちもある。 そういった横長なコンテンツに対してスクロールバーを表示したいという話です。 方法 overflow: auto で横長なコンテンツにスクロールバーを表示する 例えば <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. overflow: scroll で常にスクロールバーを表示する 例えば <code> という要素に対してこれを実施したい場合。あんまり常に表示したいということはなさそうですが、デザインをそろえたいなどで利用されることがあるかもしれません。 code { overflow : scroll ; } 横方向か縦方向どちらかにのみスクロールバーを表示したい overflow ではなく、 overflow-x を指定すれば横方向のみ、 overflow-y を指定すれば縦方向のみについてスクロールバー表示を設定できます。 overflow-x / overflow-y の後に指定する内容は overflow の時と同じです。 code { /* 横方向のみ *...