スタイルシートでスクロール表示

| コメント(1) | トラックバック(0)

困ったときのスタイルシートネタです。

このブログでも使ってますが、記事のなかに囲みがあってその中に文章が書かれている光景みたことありませんか?スクロールバーで移動すると続きが見られるという仕組みになっているあれです。

最新記事の一覧やHTMLソースなどを紹介する場合によく使われています。

overflow属性

今回はoverflowという属性について説明します。指定した段落(<div>~</div>)からあふれた文章を表示する方法を指定します。

 

visible 文章をそのまま表示
scroll スクロールバーを表示
hidden はみ出した部分は非表示
auto ブラウザが判断

 

 では実際にやってみます。まず基本となる枠を作ります。

<div style="width:400px;height:100px;border-left:1px solid black;border-top:1px solid black;border-bottom:1px solid black; border-right:1px solid black"></div>

よこ400px、たて100pxのボックス枠が表示されました。

 

 

次に文章を埋め込みます。埋め込む文章は今日の日記。

今日レンタルサーバのことを調べていて月額100円で借りられるレンタルサーバがあることを知った。ほんとはレンタルサーバにトライ!で扱うような話題なのだが、率直に残しておこうと思い今書いている。

nsfレンタルサーバ と バリューコア

どちらも100円、100MBから利用できるとのこと。nsfレンタルサーバは独自ドメインも使えるらしい。機会があったら使ってみたいとちょっと思った。そのうちちゃんと紹介しようと思う。

 

visibleの場合

<div style="width:400px;height:100px;overflow:visible;border-left:1px solid black;border-top:1px solid black;border-bottom:1px solid black; border-right:1px solid black">文章</div>

 

今日レンタルサーバのことを調べていて月額100円で借りられるレンタルサーバがあることを知った。ほんとはレンタルサーバにトライ!で扱うような話題なのだが、率直に残しておこうと思い今書いている。

nsfレンタルサーバ と バリューコア

どちらも100円、100MBから利用できるとのこと。nsfレンタルサーバは独自ドメインも使えるらしい。機会があったら使ってみたいとちょっと思った。そのうちちゃんと紹介しようと思う。

 

枠の大きさが広がってすべて表示されます。

 

hiddenの場合

<div style="width:400px;height:100px;overflow:hidden;border-left:1px solid black;border-top:1px solid black;border-bottom:1px solid black; border-right:1px solid black">文章</div>

 

今日レンタルサーバのことを調べていて月額100円で借りられるレンタルサーバがあることを知った。ほんとはレンタルサーバにトライ!で扱うような話題なのだが、率直に残しておこうと思い今書いている。

nsfレンタルサーバ と バリューコア

どちらも100円、100MBから利用できるとのこと。nsfレンタルサーバは独自ドメインも使えるらしい。機会があったら使ってみたいとちょっと思った。そのうちちゃんと紹介しようと思う。

 

枠からあふれる部分は表示されません。

 

scrollの場合

<div style="width:400px;height:100px;overflow:scroll;border-left:1px solid black;border-top:1px solid black;border-bottom:1px solid black; border-right:1px solid black">文章</div>

 

今日レンタルサーバのことを調べていて月額100円で借りられるレンタルサーバがあることを知った。ほんとはレンタルサーバにトライ!で扱うような話題なのだが、率直に残しておこうと思い今書いている。

nsfレンタルサーバ と バリューコア

どちらも100円、100MBから利用できるとのこと。nsfレンタルサーバは独自ドメインも使えるらしい。機会があったら使ってみたいとちょっと思った。そのうちちゃんと紹介しようと思う。

 

たて、よこにスクロールバーが表示されています。

 

autoの場合

<div style="width:400px;height:100px;overflow:auto;border-left:1px solid black;border-top:1px solid black;border-bottom:1px solid black; border-right:1px solid black">文章</div>

 

今日レンタルサーバのことを調べていて月額100円で借りられるレンタルサーバがあることを知った。ほんとはレンタルサーバにトライ!で扱うような話題なのだが、率直に残しておこうと思い今書いている。

nsfレンタルサーバ と バリューコア

どちらも100円、100MBから利用できるとのこと。nsfレンタルサーバは独自ドメインも使えるらしい。機会があったら使ってみたいとちょっと思った。そのうちちゃんと紹介しようと思う。

 

スクロールバーを必要に応じて表示します。この場合よこ方向は枠に収まっているため、スクロールバーが表示されません。

 

overflowを利用すると記事がすっきりしますよね。なんとなく出来るサイトって気がしません?

 

 

 

トラックバック(0)

トラックバックURL: http://tryandbuild.com/mt/mt-tb.cgi/198

コメント(1)

visibleの場合,
IE8では枠の領域のサイズは変化なく、中の文字が枠の外に溢れています。
ご報告まで。

コメントする

運用環境





あわせて読みたいブログパーツ

このブログ記事について

このページは、かずが2008年7月 1日 23:38に書いたブログ記事です。

ひとつ前のブログ記事は「MovableTypeのSqliteを最適化する」です。

次のブログ記事は「ロリポップでMovable Type4.Xのデータ・バックアップ」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。