構築時の注意点
HTMLやCSSの仕様、制定されているルールに基づいた、TWV2の構築時における注意点です。
一覧リストに配置するPartsについて
一覧などのリスト系（ リピートされる行数が不確定 ）にposition: relativeを持つパーツが入ると、レンダリングパフォーマンスが低下する問題。
理由
前提として、パーツには共通の概念としてposition: relativeを持たせている。これは表現的なパターンを増やしたりするためのオプションとして必要なため。ただし、インラインパーツ（pa-textpa-iconpa-imagepa-list）は該当しない。
position: relative は器の位置をもとに自身の位置を定めるため、制限なくリピートされると、それに伴ってもととなる位置を取得する回数が増え、レンダリングパフォーマンスを低下させる。
解決方法
この問題を回避させる方向性として、セルに入る可能性のある一部のパーツ要素（pa-inputpa-checkbox）に、［ default ］オプションを設けた。
これを付与したパーツは表現を最低限初期設計パーツと合わせた上で［ position: static ］としているため、位置取得が発生せず、レンダリングパフォーマンスに影響を与えない。
これを付与したパーツは表現を最低限初期設計パーツと合わせた上で［ position: static ］としているため、位置取得が発生せず、レンダリングパフォーマンスに影響を与えない。
この問題を回避させる方向性として、セルに入る可能性のある一部のパーツ要素（ input / checkbox ）に、［ default ］オプションを設けました。
これを付与したパーツは表現を最低限初期設計パーツと合わせた上で［ position: static ］としているため、位置取得が発生せず、レンダリングパフォーマンスに影響を与えません。
これを付与したパーツは表現を最低限初期設計パーツと合わせた上で［ position: static ］としているため、位置取得が発生せず、レンダリングパフォーマンスに影響を与えません。
セット要素について
セット要素を使えるケースにおいては優先し、レスポンシブ属性を使用しないようにする。
理由
セット要素はレスポンシブを考慮して構成されています。またTWV2の構築ルールにおいて、レスポンシブ属性（data-spdata-tbdata-pc）を用いた構築が可能となっており、これらはclass属性に指定する値と同じルールを、各デバイス幅に応じて指定することができます。
セット要素はこれらと異なり、プログラム上の都合により、共通で使用されるフォーム要素の表現を変えてレスポンシブ構築されているものなどにも使用されています。
セット要素はこれらと異なり、プログラム上の都合により、共通で使用されるフォーム要素の表現を変えてレスポンシブ構築されているものなどにも使用されています。
解決方法
セット要素を優先して使用する。
今後、共通の目的を持つ要素を作成しても良いというプログラム側でのルールが制定されるのであれば、レスポンシブ属性を用いた構築ルールに全て置き換え、セット要素を廃止しても良いでしょう。
余白の取り方について
余白の与え方における基本方針です。レイアウトにルールを設けることで、製品としての統一化を狙いつつ、クオリティを向上させる狙いがあります。
基本的な方針として、余白には248163264‥というように、２の冪（ 2 の n乗 ）を値を使用します。
これは割り切れない値を作らないことでレイアウトに統一性を持たせるのと、いざ分割が必要な場面が発生した際に、与えられている余白の半分の値を付与できるようにするためです。
基本的な方針として、余白には248163264‥というように、２の冪（ 2 の n乗 ）を値を使用します。
これは割り切れない値を作らないことでレイアウトに統一性を持たせるのと、いざ分割が必要な場面が発生した際に、与えられている余白の半分の値を付与できるようにするためです。
余白に関する基本定義
① レイアウトを構築する際の余白は16pxを基本とする。
② ２つ以上の複数要素が並ぶ可能性のある構成に対してのcssの定義として、セクションごとの区切りを16pxにする。
＊セクション＝同カテゴリとして扱うもの。
③ セクション内での要素同士の余白は8pxとする。
またセクション同士の余白は16pxだが、Y軸のセクション間の余白に関しては異なる場合もある。
機能として紐づいている（ 例えばテーブル要素とそのページコントールなど ）のであれば8px 、そうでなければ12pxとなる。
テーブル内での余白の基準値は8pxとしている。これは、テキスト要素だけで構成される場合に詰まりすぎない見易さを考慮した値で、セル内に form要素（inputselectetc.. ）が入る場合の余白値は4pxとなる。
またアイコンボタンなどが、ボタンパーツの Partx Option でtextを指定し、かつ4pxを指定する。ただし、ボタンの中身がテキストのみで構築されるボタンの場合は異なる。
＊表現的な違いで、前者はhover時にのみ表現に影響するが、後者は常にボタンの縁が表現されるため、表現的に圧迫感を与えるため。
ボタンパーツにおいて、Parts Option［ text ］が付与された要素が並ぶ場合は隣接する要素同士の余白を取らない。
＊hover時にのみボタンの縁が表現され、ユーザーが何らかのアクションを起こすまでは、デフォルトで与えられている余白で十分に表現が成り立っているため。
② ２つ以上の複数要素が並ぶ可能性のある構成に対してのcssの定義として、セクションごとの区切りを16pxにする。
＊セクション＝同カテゴリとして扱うもの。
③ セクション内での要素同士の余白は8pxとする。
またセクション同士の余白は16pxだが、Y軸のセクション間の余白に関しては異なる場合もある。
機能として紐づいている（ 例えばテーブル要素とそのページコントールなど ）のであれば8px 、そうでなければ12pxとなる。
テーブル内での余白の基準値は8pxとしている。これは、テキスト要素だけで構成される場合に詰まりすぎない見易さを考慮した値で、セル内に form要素（inputselectetc.. ）が入る場合の余白値は4pxとなる。
またアイコンボタンなどが、ボタンパーツの Partx Option でtextを指定し、かつ4pxを指定する。ただし、ボタンの中身がテキストのみで構築されるボタンの場合は異なる。
＊表現的な違いで、前者はhover時にのみ表現に影響するが、後者は常にボタンの縁が表現されるため、表現的に圧迫感を与えるため。
ボタンパーツにおいて、Parts Option［ text ］が付与された要素が並ぶ場合は隣接する要素同士の余白を取らない。
＊hover時にのみボタンの縁が表現され、ユーザーが何らかのアクションを起こすまでは、デフォルトで与えられている余白で十分に表現が成り立っているため。
これらはあくまで、TWV2のHTMLルールおよびCSSルールの構築者（ 岡部 ）の構想による基準値として設けています。
webの流行や、インターフェースの流行などは時代と共に変わっていくため、こういった基準値もアップデートするのを心掛けてください。
こういった細部の統一性を怠ることは、古いデザインへの風化と繋がります。
webの流行や、インターフェースの流行などは時代と共に変わっていくため、こういった基準値もアップデートするのを心掛けてください。
こういった細部の統一性を怠ることは、古いデザインへの風化と繋がります。
スクロールについて
TWV2 におけるスクロールの発生箇所および、考え方です。
TWV2では、スクロールは基本的には wrapper 依存のスクロールを使用します。
理由
HTML構築上のルールの１つに、wrapperと同階層にmodalを構築されるルールがあります。
bodyからのスクロール継承にしてしまうと、modal画面が発生した場合にwrapper階層に重なって出現するため、modal階層内のスクロールが終わった後にbodyスクロールを継承するwrapper階層にもスクロールの影響が及ぶからです。
bodyからのスクロール継承にしてしまうと、modal画面が発生した場合にwrapper階層に重なって出現するため、modal階層内のスクロールが終わった後にbodyスクロールを継承するwrapper階層にもスクロールの影響が及ぶからです。
これらはあくまで、TWV2のHTMLルールおよびCSSルールの構築者（ 岡部 ）の構想による基準値として設けています。
webの流行や、インターフェースの流行などは時代と共に変わっていくため、こういった基準値もアップデートするのを心掛けてください。
こういった細部の統一性を怠ることは、古いデザインへの風化と繋がります。
webの流行や、インターフェースの流行などは時代と共に変わっていくため、こういった基準値もアップデートするのを心掛けてください。
こういった細部の統一性を怠ることは、古いデザインへの風化と繋がります。
高さ指定の単位について
heightの値には、dvhの単位を使用します。
理由
TWV2では今までheightプロパティの値に、vhという単位を指定していました。これは%とは異なり、継承した高さではなく画面全体の高さを取得できる数値です。
ただしこの単位は iPad 端末において弱点があり、アドレスバーといったコンテンツを表示する画面以外の要素の高さを無視していました。
そこで新しく追加されたdvhという単位を使用します。この単位はアドレスバーといった要素の高さを吸収することができるため、画面の高さを軸にした値を指定する必要がある場合に、柔軟に可変します。
ただしこの単位は iPad 端末において弱点があり、アドレスバーといったコンテンツを表示する画面以外の要素の高さを無視していました。
そこで新しく追加されたdvhという単位を使用します。この単位はアドレスバーといった要素の高さを吸収することができるため、画面の高さを軸にした値を指定する必要がある場合に、柔軟に可変します。
iOS 15.4 から実装された単位です。実装当初は Safari のみの対応でしたが、Chrome 108 以降対応しています。