メインコンテンツにスキップ ドキュメントナビゲーションにスキップ
Check

はみ出しユーティリティ(Overflow) v5.0.0クラス追加

これらの短縮形ユーティリティを使用して、コンテンツを要素からはみ出させる方法を素早く構成。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版、v5.3.0-beta版での変更も含みます。
このページの項目 v5.0.0クラス追加

はみ出し(Overflow)

4つのデフォルト値とクラスを使用して、その場で overflow プロパティを調整。これらのクラスはデフォルトではレスポンシブ対応はしていない。

はみ出しの種類 ※はみ出し部分が設定例と重なる場合は非表示になります

.overflow-autooverflow: auto

これは、幅と高さが設定された要素に対して .overflow-auto を使用する例。設計上、このコンテンツは垂直方向にスクロールする。

.overflow-hiddenoverflow: hidden

これは、幅と高さが設定された要素に対して .overflow-hidden を使用する例。

.overflow-visibleoverflow: visiblev5.0.0-alpha3追加

これは、幅と高さが設定された要素に対して .overflow-visible を使用する例。

.overflow-scrolloverflow: scrollv5.0.0-alpha3追加

これは、幅と高さが設定された要素に対して .overflow-scroll を使用する例。
設定例
はみ出す時はスクロールバーを表示<div class="overflow-auto">...</div>
はみ出し部分は非表示<div class="overflow-hidden">...</div>
はみ出し部分は表示(デフォルトの動作)<div class="overflow-visible">...</div>
常にスクロールバーを表示<div class="overflow-scroll">...</div>
【設定】
  • 使用したい要素に .overflow-{value}(上記の「はみ出しの種類」から選択)を入れる
【変更履歴】
  • 【v5.0.0-alpha3】
    • .overflow-visible, .overflow-scroll が追加

横方向のはみ出し(overflow-xv5.3.0新設

overflow-x プロパティを調整し、コンテンツの水平方向のオーバーフローに影響を与える。

はみ出しの種類 ※はみ出し部分が設定例と重なる場合は非表示になります

.overflow-x-autooverflow-x: auto

.overflow-x-auto の例。
要素に幅と高さのサイズが設定されている。

.overflow-x-hiddenoverflow-x: hidden

.overflow-x-hidden の例。
要素に幅と高さのサイズが設定されている。

.overflow-x-visibleoverflow-x: visible

.overflow-x-visible の例。
要素に幅と高さのサイズが設定されている。

.overflow-x-scrolloverflow-x: scroll

.overflow-x-scroll の例。
要素に幅と高さのサイズが設定されている。
設定例
横にはみ出す時はスクロールバーを表示<div class="overflow-x-auto">...</div>
横のはみ出し部分は非表示<div class="overflow-x-hidden">...</div>
横のはみ出し部分は表示(デフォルトの動作)<div class="overflow-x-visible">...</div>
常に左右のスクロールバーを表示<div class="overflow-x-scroll">...</div>
【設定】
  • 使用したい要素に .overflow-x-{value}(上記の「はみ出しの種類」から選択)を入れる

縦方向のはみ出し(overflow-yv5.3.0新設

overflow-y プロパティを調整し、コンテンツの垂直方向のオーバーフローに影響を与える。

はみ出しの種類 ※はみ出し部分が設定例と重なる場合は非表示になります

.overflow-y-autooverflow-y: auto

.overflow-y-auto の例。
要素に幅と高さのサイズが設定されている。

.overflow-y-hiddenoverflow-y: hidden

.overflow-y-hidden の例。
要素に幅と高さのサイズが設定されている。

.overflow-y-visibleoverflow-y: visible

.overflow-y-visible の例。
要素に幅と高さのサイズが設定されている。

.overflow-y-scrolloverflow-y: scroll

.overflow-y-scroll の例。
要素に幅と高さのサイズが設定されている。
設定例
縦にはみ出す時はスクロールバーを表示<div class="overflow-y-auto">...</div>
縦のはみ出し部分は非表示<div class="overflow-y-hidden">...</div>
縦のはみ出し部分は表示(デフォルトの動作)<div class="overflow-y-visible">...</div>
常に上下のスクロールバーを表示<div class="overflow-y-scroll">...</div>
【設定】
  • 使用したい要素に .overflow-y-{value}(上記の「はみ出しの種類」から選択)を入れる

Sass v5.0.0-beta3追加

ユーティリティAPI(Utilities API)

はみ出しユーティリティは、scss/_utilities.scss のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらに掲載。

デフォルトの設定
scss/_utilities.scss 内 utils-overflow の設定"overflow": (
  property: overflow,
  values: auto hidden visible scroll,
),
"overflow-x": (
  property: overflow-x,
  values: auto hidden visible scroll,
),
"overflow-y": (
  property: overflow-y,
  values: auto hidden visible scroll,
),