overflowプロパティ

TOPページに戻る > CSS

スポンサード リンク

overflowプロパティ

コンテンツがブロック要素からはみ出したときの表示方法を指定できます
要素にheightプロパティで高さを指定した場合、box内のコンテンツがはみ出ることがあります。その時の表示方法を指定できるプロパティです。常時スクロールバーをつけることもできます
値は、はみ出したコンテンツを非表示にできるhidden、ブロック要素にスクロールバーを付けるscroll、はみ出した場合だけスクロールを付けるautoがあります。初期値はvisible(はみ出したコンテンツを表示する)

使い方(書式)

セレクタ { overflow: 値; }                                    

overflowプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 ブロック要素
子要素へのスタイルの継承 しない

プロパティの値 説明
visible はみ出したコンテンツを表示する。これが初期値
hidden はみ出したコンテンツを隠す
scroll ブロック要素にスクロールバーを付ける
auto 自動ではみ出したコンテンツがない場合は、スクロールバーをつけない、はみ出したコンテンツがある場合は、スクロールバーを付ける

実際の指定方法

.hoge {
 overflow: visible;   /* はみ出したコンテンツを表示 */
 height: 40px;        /* boxの高さを指定 */
 margin-top: 40px;    /* 上の余白を指定 */
 border: solid 1px;   /* 枠線を表示 */
  }
.hoge2 {
 overflow: hidden;    /* はみ出したコンテンツを隠す */
 height: 40px;        /* boxの高さを指定 */
 margin-top: 40px;    /* 上の余白を指定 */
 border: solid 1px;   /* 枠線を表示 */
  }
.hoge3 {
 overflow: scroll;    /* スクロールバーを付ける */
 height: 40px;        /* boxの高さを指定 */
 margin-top: 40px;    /* 上の余白を指定 */
 border: solid 1px;   /* 枠線を表示 */
  }
.hoge4 {
 overflow: auto;      /* はみ出したコンテンツがある場合は、スクロールバーを付ける */
 height: 40px;        /* boxの高さを指定 */
 margin-top: 40px;    /* 上の余白を指定 */
 border: solid 1px;   /* 枠線を表示 */
  }

html部分

<div class="hoge">overflow: visible;<br>2行目<br>3行目</div>

<div class="hoge2">overflow: hidden;<br>2行目<br>3行目</div>

<div class="hoge3">overflow: scroll;<br>2行目<br>3行目</div>

<div class="hoge4">overflow: auto;<br>2行目<br>3行目</div>

実際の表示

overflow: visible;
2行目
3行目
overflow: hidden;
2行目
3行目
overflow: scroll;
2行目
3行目
overflow: auto;
2行目
3行目




(C)2012 ホームページ作成無料