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

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

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

目次

概要（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>
【設定】
  • 設定したい要素に .float-{side}（上記の「配置の種類」から選択）を入れる
    • {side} は、start（行頭）、end（行末）、none（なし） のいずれかを選択
【注意】
【変更履歴】
  • 【v5.0.0-alpha1】
    • float() mixinを削除
  • 【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：ビューポートサイズ超特大以上でnone v5.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

 

Sass v5.0.0-beta3追加

ユーティリティAPI（Utilities API）

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

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