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

横の配置ユーティリティ（Float） v5.0.0一部クラス名変更

レスポンシブなfloatユーティリティを使用して、任意のブレークポイントを超えて任意の要素のfloatを切り替える。

※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。

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

概要（Overview）

これらのユーティリティクラスは、CSSの float プロパティを使用して現在のビューポートサイズに基づいて水平方向の配置を行頭や行末に寄せるか無効にする。特異性の問題を避けるために !important を組み込んでいる。これらはグリッドシステムと同じビューポート幅のブレークポイントを使用。floatユーティリティはFlexアイテムには影響しないので注意。

配置の種類 見やすいよう色と枠を付けています

要素全体を行頭揃え（.float-start）v5.0.0-beta1クラス名変更

行頭揃え部分

要素全体を行末揃え（.float-end）v5.0.0-beta1クラス名変更

行末揃え部分

要素全体を動かさない（.float-none）

動かさない部分
設定例
<div class="float-end">...</div>

親要素のclearfixヘルパーを使用して、floatをクリアする。

【設定】
  • 設定したい要素に .float-{side}（上記の「配置の種類」から選択）を入れる
    • {side} は、start（行頭）、end（行末）、none（なし） のいずれかを選択
【注意】
【変更履歴】
  • 【v5.0.0-alpha1】
    • float() ミックスインを削除
  • 【v5.0.0-beta1】
    • RTL（右書き）の設定追加に伴いユーティリティのクラス名変更
      • 行頭揃え：.float-left ⇒ .float-start
      • 行末揃え：.float-right ⇒ .float-end

レスポンシブ（Responsive）v5.0.0-alpha1クラス追加、v5.0.0-beta1一部クラス名変更

定義済クラスの種類 見やすいよう色と枠を付けています

要素全体を行頭揃え（float: start）v5.0.0-beta1クラス名変更

.float-start：全てのビューポートサイズで行頭揃え
.float-sm-start：ビューポートサイズ小以上で行頭揃え
.float-md-start：ビューポートサイズ中以上で行頭揃え
.float-lg-start：ビューポートサイズ大以上で行頭揃え
.float-xl-start：ビューポートサイズ特大以上で行頭揃え
.float-xxl-start：ビューポートサイズ超特大以上で行頭揃えv5.0.0-alpha1追加

要素全体を行末揃え（float: right）v5.0.0-beta1クラス名変更

.float-end：全てのビューポートサイズで行末揃え
.float-sm-end：ビューポートサイズ小以上で行末揃え
.float-md-end：ビューポートサイズ中以上で行末揃え
.float-lg-end：ビューポートサイズ大以上で行末揃え
.float-xl-end：ビューポートサイズ特大以上で行末揃え
.float-xl-end：ビューポートサイズ超特大以上で行末揃えv5.0.0-alpha1追加

要素全体を動かさない（float: none）

.float-none：全てのビューポートサイズでnone
.float-sm-none：ビューポートサイズ小以上でnone
.float-md-none：ビューポートサイズ中以上でnone
.float-lg-none：ビューポートサイズ大以上でnone
.float-xl-none：ビューポートサイズ特大以上でnone
.float-xxl-none：ビューポートサイズ超特大以上でnonev5.0.0-alpha1追加
設定例
<div class="float-sm-end">...</div>
【設定】
  • 設定したい要素に .float(-{breakpoint})-{side}（上記の「定義済クラスの種類」から選択）を入れる
    • {breakpoint}（sm（小）, md（中）, lg（大）, xl（特大）, xxl（超特大）のいずれかを選択）は、グリッド・システムのビューポイントに準ずる
    • {side} は、start（行頭）、end（行末）、none（なし） のいずれかを選択
【変更履歴】
  • 【v5.0.0-alpha1】
    • .float-xxl-{side} が追加
  • 【v5.0.0-beta1】
    • RTL（右書き）の設定追加に伴いユーティリティのクラス名変更
      • 行頭揃え：.float(-{breakpoint})-left ⇒ .float(-{breakpoint})-start
      • 行末揃え：.float(-{breakpoint})-right ⇒ .float(-{breakpoint})-end

CSS

SassユーティリティAPI（Sass utilities API）v5.0.0-beta3追加、v5.3.0ユーティリティAPIより名称変更

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

デフォルトの設定
scss/_utilities.scss 内 utils-float の設定"float": (
  responsive: true,
  property: float,
  values: (
    start: left,
    end: right,
    none: none,
  )
),