にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2015/09/22. 13:18:11.

表示面積を狭く限定したボックス内に、必要に応じてスクロールバーが表示されるようにする方法

表示面積の狭いボックス内をスクロールバーで見せるHTMLで作成したボックスにCSSでスクロールバーを表示させることで、限られた面積の中にそれ以上の情報を詰め込む方法をAll Aboutで解説した約10年前の記事『表示面積の狭いボックス内をスクロールバーで見せる』を改訂しました。

heightプロパティとoverflowプロパティを使うだけという、とても簡単な方法です。
多少CSSを囓っていれば、特に説明されるまでもない基本的な方法ですが。

個人的には、overflowプロパティというと、はみ出る領域の表示を省略したい場合に「overflow: none;」と記述して使うことが多いんですが、値に「auto」と指定しておけば対象の要素内に(必要に応じて)スクロールバーを表示させられます。
更新履歴みたいな、「あまり広い面積を専有することなく、多くの情報を掲載したい」という場合に便利だと思います。

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---