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

RFS v5.0.0更新


Bootstrapのサイズ変更エンジンがビューポートとデバイス間で利用可能なより良いスペースにするために共通のCSSプロパティをレスポンシブに拡縮する。

※"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更新

RFSとは?(What is RFS?)

BootstrapのサイドプロジェクトであるRFSは、当初はフォントサイズを変更するために開発されたユニットサイズ変更エンジンであった(故にResponsive Font Sizesの略でRFSと命名)。最新のRFSでは、margin, padding, border-radius, box-shadow などのユニットで、ほとんどのCSSプロパティの値を再拡縮できる。

このメカニズムは、ブラウザのビューポートの寸法に基づいて適切な値を自動的に計算する。レスポンシブで拡大縮小する動作を可能にするために、rem とビューポートの単位の組み合わせで calc() 関数にコンパイルされる。

【変更履歴】
  • 【v5.0.0-alpha1】
    • デフォルトでレスポンシブで自動的にフォントサイズの拡大縮小が可能に。
      これに伴い、見出し<h1><h4>, .h1.h4)、表示見出し.display-1.display-6)、フォーム<legend>閉じるボタン.close)ではビューポートが1200px未満の場合、自動的にフォントサイズが拡大縮小される
    • フォントサイズだけでなく、marginpadding の大きさなどもレスポンシブで拡大縮小可能に。
      これに伴うデフォルトでの定義済クラスの拡大縮小は現在のところ行われていない
  • 【v5.0.0-alpha2】
    • 閉じるボタンクラスが .close から .btn-close に変更され、アイコンボタンがSVGになったのでRFSは不使用に

RFSを使用(Using RFS)

ミックスインはBootstrapに組み込まれており、Bootstrapの scss を組み込むと利用できるようになる。必要に応じてRFSを単体でインストールすることもできる。

ミックスインを使用(Using the mixins)

rfs() ミックスインには、font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left の省略形がある。Sassソースとコンパイル済のCSSについては、以下の例に記載。

設定例
Sass.title {
  @include font-size(4rem);
}
CSS.title {
  font-size: calc(1.525rem + 3.3vw);
}

@media (min-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}

他のプロパティは、次のように rfs() ミックスインに渡される。

Sass.selector {
  @include rfs(4rem, border-radius);
}

!important(優先順位を上げる)はどんな値にでも追加できる:

Sass.selector {
  @include padding(2.5rem !important);
}

関数を使用(Using the functions)

インクルードを使用したくない場合、以下の2つの関数もある:

  • rfs-value()は、px 値が渡されると値を rem 値に変換する。それ以外の場合は、同じ結果値を返す。
  • rfs-fluid-value() は、プロパティの再拡縮が必要な場合、流動的な値を返す。

以下の例では、Bootstrapに組み込まれているレスポンシブ・ブレークポイントミックスインの1つを使用して、lg(大)のブレークポイントより下のスタイルのみに適用。

設定例
Sass.selector {
  @include media-breakpoint-down(lg) {
     padding: rfs-fluid-value(2rem);
     font-size: rfs-fluid-value(1.125rem);
  }
}
出力例
CSS@media (max-width: 991.98px) {
  .selector {
    padding: calc(1.325rem + 0.9vw);
    font-size: 1.125rem; /* 1.125remは十分小さいので、RFSはこれを拡大縮小しない */
  }
}

拡張ドキュメント(Extended documentation)

RFSは、Bootstrap組織下の独立したプロジェクトである。RFSとその設定についての詳細はGitHubレポジトリに記載。