Startify-UI

レスポンシブデザイン

ブレークポイント

一部のユーティリティクラスには、メディアクエリを使って特定のブレークポイントによって異なるスタイルが設定されているバリエーションを提供しているものもあります。Startify-UIでは各ブレークポイントのデフォルト値は以下のように設定されています。

ブレークポイント名称 単位 ビューポート幅の閾値
モバイル（小） mobile-s 400px
モバイル（中） mobile-m 576px
モバイル（大） mobile-l 768px
デスクトップ（小） desktop-s 992px
デスクトップ（中） desktop-m 1280px
デスクトップ（大） desktop-l 1440px

各種ブレークポイントのビューポート幅閾値はCSS変数を使って管理することができ、デザインや仕様に合わせて柔軟に管理することが可能です。

--su-screen-desktop-l デスクトップ（大）のブレークポイントにおけるビューポート幅の閾値が数値型で設定されます。
初期値は1440です。
--su-screen-desktop-m デスクトップ（中）のブレークポイントにおけるビューポート幅の閾値が数値型で設定されます。
初期値は1280です。
--su-screen-desktop-s デスクトップ（小）のブレークポイントにおけるビューポート幅の閾値が数値型で設定されます。
初期値は992です。
--su-screen-mobile-l モバイル（大）のブレークポイントにおけるビューポート幅の閾値が数値型で設定されます。
初期値は768です。
--su-screen-mobile-m モバイル（中）のブレークポイントにおけるビューポート幅の閾値が数値型で設定されます。
初期値は576です。
--su-screen-mobile-s モバイル（小）のブレークポイントにおけるビューポート幅の閾値が数値型で設定されます。
初期値は400です。

メディアクエリ

レスポンシブデザインでは、メディアクエリによってブレークポイントに対応したビューポートの幅に合わせてスタイルを最適化させたり、異なるスタイルを適用させることができます。以下にあるメディアクエリのサンプルで、現在のビューポート幅に合わせて実際に表示が切り替わるのを確認できます。

@media (width < 400px) { ... } @media (max-width: calc(400px - 0.02px)) { ... }

400px（mobile-s）未満

 @media (400px <= width) { ... } @media (min-width: 400px) { ... }

400px（mobile-s）以上
@media (width < 576px) { ... } @media (max-width: calc(576px - 0.02px)) { ... }

576px（mobile-m）未満

 @media (576px <= width) { ... } @media (min-width: 576px) { ... }

576px（mobile-m）以上
@media (width < 768px) { ... } @media (max-width: calc(768px - 0.02px)) { ... }

768px（mobile-l）未満

 @media (768px <= width) { ... } @media (min-width: 768px) { ... }

768px（mobile-l）以上
@media (width < 992px) { ... } @media (max-width: calc(992px - 0.02px)) { ... }

992px（desktop-s）未満

 @media (992px <= width) { ... } @media (min-width: 992px) { ... }

992px（desktop-s）以上
@media (width < 1280px) { ... } @media (max-width: calc(1280px - 0.02px)) { ... }

1280px（desktop-m）未満

 @media (1280px <= width) { ... } @media (min-width: 1280px) { ... }

1280px（desktop-m）以上
@media (width < 1440px) { ... } @media (max-width: calc(1440px - 0.02px)) { ... }

1440px（desktop-l）未満

 @media (1440px <= width) { ... } @media (min-width: 1440px) { ... }

1440px（desktop-l）以上

コンテナクエリ

レスポンシブデザインでは、メディアクエリだけでなくコンテナクエリを使って特定の幅・高さに応じてスタイルを最適化できます。以下のサンプルでは、コンテナ要素の幅に合わせて表示が切り替わる様子を確認できます。

@container (width < 907px) { ... }

907px未満

@container (907px <= width) { ... }

907px以上

@container (width < 734px) { ... }

734px未満

@container (734px <= width) { ... }

734px以上

@container (width < 691px) { ... }

691px未満

@container (691px <= width) { ... }

691px以上

@container (width < 546px) { ... }

546px未満

@container (546px <= width) { ... }

546px以上

Startify-UIでは、コンテナクエリに使うコンテナ要素向けのユーティリティクラスを提供しています。また、コンテナクエリ名やタイプはCSS変数で管理でき、用途に応じて柔軟に使い分けられます。

コンテナクエリ用CSS変数

--su-container-query-type コンテナクエリのタイプが設定されます。初期値はinline-sizeです。
--su-container-query-name コンテナクエリの名前が設定されます。初期値はcontainer-queryです。

コンテナクエリ用ユーティリティクラス

.su-container-query コンテナクエリを適用するコンテナ要素に付与するユーティリティクラスです。付与された要素にはCSS変数で設定されたcontainer-typeとcontainer-nameのプロパティが加えられます。

コンテナクエリのCSS変数を更新することで、コンテナクエリの名前やタイプを変更することができ、スタイルの切り分けが柔軟に行えるようになります。 

<style>
  @container example-container (width <= 768px) {
    .example-element {
      display: none;
    }
  }
</style>

<div class="su-container-query" style="--su-container-query-name: example-container;">
  <div class="example-element">...</div>
</div>

ビューポート相対サイズ

ビューポート相対サイズは、画面幅に比例して要素のサイズを変える仕組みです。基準となるビューポート幅をもとにvw単位でサイズを指定することで、デザインレイアウトを維持したまま要素のサイズを変化させることができます。以下のサンプルでは、固定値でサイズ設定された要素と比較しながら、ビューポート相対サイズの要素が画面幅に比例してサイズが変化する様子を確認できます。

  • 固定値 幅:320px、文字サイズ:32px、余白:24px
    サンプルテキスト
  • ビューポート相対 ビューポート幅1440pxと768pxで固定値と同サイズに、
    それ以外はビューポート幅に連動してサイズが変化します
    サンプルテキスト

上記のように、幅やフォントサイズ、余白などをビューポート相対サイズで指定することで、レイアウトデザインを維持したまま、ビューポートに応じて要素のサイズを変化させることができます。また後述のCSS変数をメディアクエリで切り替えることで、基準サイズのビューポート幅をコントロールすることができます。

ビューポート相対サイズ用CSS変数

--su-size-viewport-base-width ビューポート相対サイズの基準となるビューポート幅を定義します。
数値型で指定し、1440が初期値です。
--su-size-viewport-scale-unit 100vwを--su-size-viewport-base-widthで割った値を返します。
基準幅での目的サイズを表す数値を乗じて、ビューポート幅に応じたサイズを算出します。		 
<style>
  :root {
    --su-size-viewport-base-width: 1440;
    @media (width <= 768px) {
      --su-size-viewport-base-width: 768;
    }
  }
  .viewport-relative-example {
    width: calc(320 * var(--su-size-viewport-scale-unit)); /* 基準ビューポート幅で320pxと同サイズ */ 
    font-size: calc(32 * var(--su-size-viewport-scale-unit)); /* 基準ビューポート幅で32pxと同サイズ */ 
    padding: calc(24 * var(--su-size-viewport-scale-unit)); /* 基準ビューポート幅で24pxと同サイズ */ 
  }
</style>
<div class="viewport-relative-example">...</div>

フォントサイズなどにビューポート相対サイズを使用する場合、ビューポート幅によって文字が極端に大きくなったり、あるいは小さくなることで可読性が低下する可能性があります。その場合には、clamp()関数を使用することで最大値と最小値を設定することが有効です。 

.viewport-relative-example {
  /* 基準ビューポート幅で32pxと同サイズ、1remから3remの間でビューポート幅に応じて変化 */ 
  font-size: clamp(1rem, calc(32 * var(--su-size-viewport-scale-unit)), 3rem); 
}