overflowを使用し引用文(blockquote)をスクロールさせるCSS
引用文が長い場合、本文を遠く下まで押し出してしまい、見栄えが悪くなるのを解決するCSSを紹介します。
当サイトではまだ導入していませんが、次回アップデート時に導入を検討中です。
詳細は以下のとおり。
普通に長文をblockquoteで囲むと、
当然のことながら原文よりも引用記事が長くなり、
本文までスクロールする前に読み手の読む気が失せてしまいます。
そんな問題を解決するのが今回のCSS。
普通に引用した場合こんな感じ。
これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。
そして今回紹介するCSSを使った場合がこちら。
これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。これは長文のサンプルです。
これは長文のサンプルです。これは長文のサンプルです。
このCSSを利用することにより、原文を読みつつそれに対する文章も同時に直下に表示することができるので、読み手にとっても便利でしょう（一々フレーム内もスクロールするのは面倒だという意見もありますが）。
これはheightとoverflowの2要素を書き足すだけで実現できます。
CSS内に書く場合、
blockquote {
height:250px;
overflow-y:scroll;
}
HTML内に書く場合、
<blockquote style="height:250px;overflow-y:scroll;">引用文</blockquote>
なお、heightの部分は任意の数値に変更してください（上記サンプルが250pxです）。
関連記事
タグ: CSS, Web
