メインコンテンツへスキップ

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

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

実例(Examples)

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

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

.overflow-auto (overflow: auto)

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

.overflow-hidden (overflow: hidden)

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

.overflow-visible (overflow: visible) v5.0.0-alpha3追加

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

.overflow-scroll (overflow: scroll) v5.0.0-alpha3追加

これは、幅と高さが設定された要素に対して .overflow-scroll を使用する例。
設定例
HTML<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
<div class="overflow-visible">...</div>
<div class="overflow-scroll">...</div>

Sass変数を使用して、scss/_utilities.scss$utilities 変数にある overflow の部分を変更することによってはみ出しユーティリティのカスタマイズができる。
設定方法はユーティリティAPIのユーティリティの変更に記載。

【設定】
  • 使用したい要素に .overflow-{value} を入れる(上記の「はみ出しの種類」から選択)を入れる
【変更履歴】
  • 【v5.0.0-alpha3】
    • .overflow-visible, .overflow-scroll が追加

 

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,
		),