menu
menu

キーワード検索

 

前月(7月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【jQuery】jQueryでドロップダウンメニュー
  3. ( 3 - ) 【CSS】CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4 - ) 【CSS】レスポンシブデザインのブレークポイントは⁉
  5. ( 5 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  6. ( 6 - ) 【CSS】スマホサイト向け横にスクロールするナビゲーション
  7. ( 7 - ) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 9 ↑) 【PHP】PHPでシンプルなメールフォーム
  9. ( 8 ↓) 【CSS】CSSだけでブロック要素の表示非表示(トグルボタン)
  10. ( - ↑) 【Mac】MacにGoogle Driveをインストール
このエントリーをはてなブックマークに追加

overflow【CSSリファレンス】

overflow

こんにちは(・∀・)

CSSプロパティのご紹介です。今回ご紹介するCSSプロパティはoverflowです。

概要

overflowプロパティを使用して要素内に内容が納まらずはみ出した場合の表示方法を指定します。


.sample {
  overflow: auto;
}

overflow-xプロパティ・overflow-yプロパティは縦横個別に指定できます。


.sample {
  overflow-x: scroll;
  overflow-y: hidden;
}
適用要素

ブロックレベル要素
置換要素を除くinline-blockの要素・th要素・td要素

指定できる値
visible
要素からはみ出して表示
hidden
要素からはみ出した部分は表示しない
scroll
スクロールバーをつけて表示
auto
ブラウザに依存
初期値

visible

サンプル
HTML

<p class="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget tellus porttitor odio vulputate bibendum vel non nulla. Fusce non elementum nunc, in elementum dolor. Ut ante nulla, porta in felis nec, egestas tempor metus. Mauris posuere leo elit, nec rhoncus nibh fermentum id. Nam commodo rhoncus posuere. Nunc vel imperdiet eros. Vivamus laoreet leo eros, eget scelerisque quam sodales venenatis. Integer magna libero, semper ac ultricies id, interdum vel orci. Aenean euismod sapien eget maximus sagittis.
</p>
CSS

.demo {
  width: 300px;
  height: 100px;
  overflow: scroll;
}
Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget tellus porttitor odio vulputate bibendum vel non nulla. Fusce non elementum nunc, in elementum dolor. Ut ante nulla, porta in felis nec, egestas tempor metus. Mauris posuere leo elit, nec rhoncus nibh fermentum id. Nam commodo rhoncus posuere. Nunc vel imperdiet eros. Vivamus laoreet leo eros, eget scelerisque quam sodales venenatis. Integer magna libero, semper ac ultricies id, interdum vel orci. Aenean euismod sapien eget maximus sagittis.


関連リンク

CSSリファレンス

  • CSS
このエントリーをはてなブックマークに追加