困ったときのスタイルシートネタです。
このブログでも使ってますが、記事のなかに囲みがあってその中に文章が書かれている光景みたことありませんか？スクロールバーで移動すると続きが見られるという仕組みになっているあれです。
最新記事の一覧や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円で借りられるレンタルサーバがあることを知った。ほんとはレンタルサーバにトライ！で扱うような話題なのだが、率直に残しておこうと思い今書いている。
どちらも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円で借りられるレンタルサーバがあることを知った。ほんとはレンタルサーバにトライ！で扱うような話題なのだが、率直に残しておこうと思い今書いている。
どちらも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>
枠からあふれる部分は表示されません。
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円で借りられるレンタルサーバがあることを知った。ほんとはレンタルサーバにトライ！で扱うような話題なのだが、率直に残しておこうと思い今書いている。
どちらも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円で借りられるレンタルサーバがあることを知った。ほんとはレンタルサーバにトライ！で扱うような話題なのだが、率直に残しておこうと思い今書いている。
どちらも100円、100MBから利用できるとのこと。nsfレンタルサーバは独自ドメインも使えるらしい。機会があったら使ってみたいとちょっと思った。そのうちちゃんと紹介しようと思う。
スクロールバーを必要に応じて表示します。この場合よこ方向は枠に収まっているため、スクロールバーが表示されません。
overflowを利用すると記事がすっきりしますよね。なんとなく出来るサイトって気がしません？
visibleの場合,
IE8では枠の領域のサイズは変化なく、中の文字が枠の外に溢れています。
ご報告まで。