レスポンシブ

TWV2では、レスポンシブデザインを考慮しています。レスポンシブデザインとは、スマートフォン・タブレット・パソコンといった異なる画面幅を持つデバイスに合わせて、表示を最適化することを指します。

Boxレベルの構築におけるレスポンシブの考慮と、レスポンシブを考慮したset要素の2つで成っており、必要に応じた構築をする必要があります。
また例外として、レイアウトとしての役割を持つ一部のParts（テーブル）には、レスポンシブを想定したオプションが存在します。

レスポンシブにおける規格

TWV2では、スマートフォン・タブレット・パソコンの3カテゴリーに分けたデバイスでのレスポンシブを想定しています。
また、それぞれのデバイスにおける表現の変更はメディアクエリを用いており、data属性を使用することでそれらを管理しています。

各種デバイスと詳細

下記は各種デバイスの分類とそれに伴うdata属性、メディアクエリを指定するブレイクポイントの一覧です。スマートフォンとタブレットは、縦横によって画面幅が切り替わるため、それによっても分類が異なります。

分類	data属性	ブレイクポイント	補足
スマートフォン	data-sp	519px以下	スマートフォンの縦表示。
タブレット	data-tb	520px 〜 959px	スマートフォンの横表示および、タブレットの縦表示。
パソコン	data-pc	960px以上	タブレットの横表示および、パソコン全般。

ブレイクポイントは発売されている端末とシェア率を基準に定めており、今後の流行などによって変更する可能性があります。ブレイクポイントを決めるにあたって、主にこちらの記事を参考にしています。

「メディアクエリ」とは、ある条件でCSSを適用しそれ以外には適用しないようにする方法のことを指します。そして、どの画面サイズでCSSの設定を切り替えるか？といったことを「ブレイクポイント」と呼びます。

Box構築におけるレスポンシブ

Boxの構築で用いられる Flex や Grid、これらの指定は基本的にcommon.cssで管理された値によって行われます。
common.cssによってclass属性に指定された表現は、全てのデバイスにおいて有効になる性質を持っています。
レスポンシブな表現を行うにあたり、先に述べたdata属性を用いることで、指定したデバイスごとに表現を指定することができます。

指定の方法について

class属性と同様、data-spdata-tbdata-pcのそれぞれのdata属性に、common.cssで作成された値を付与します。
指定されたdata属性と値によって、それぞれのデバイスごとに表現を変更します。

<div class=" * " data-sp=" * " data-tb=" * "> data-pc=" * ">

* には、common.css で管理されている値が入ります。

サンプル

下記は実際にレスポンシブ表現を付与したサンプルです。実際の画面と、どういったコードで記述されているかを解説していきます。

このサンプルでは、共通のclass属性に表現を施した上で、スマートフォン（ data-sp ）とタブレット（ data-tb ）にレスポンシブ表現を与えています。class属性に与えられた色を指定している［ co_red-dark ］と［ baCo_red-bright ］、これらをスマートフォンとタブレットで、別の色になるよう指定しています。パソコン（ data-pc ）には指定されていないため、class属性に与えられた色をそのまま表示しています。

レスポンシブを考慮したset要素

set要素は基本的にレスポンシブを考慮した作りになっているため、配置する階層表現をレスポンシブに切り替える必要はありません。

Box構築レベルで表現を大きく変更してしまうと、set要素によっては正しく表示されなくなるものがあります。