別記事「サイズ指定の使い分け」では、px・vw・vh・%・rem それぞれの特長を説明しました。
この記事では、タイルの「レイアウト設定」の「幅」で単位を変えると見え方がどう変わるのかを、画面のスクリーンショットを並べて紹介します。あわせて、同じページを「ウィンドウ幅が違うとき（13インチと27インチで全画面表示した場合）」や「ブラウザの文字サイズ設定を変えたとき」に見た場合の変化も、実例で見ていきます。
なお、単位のうち「%」については、この記事では扱いません。「%」はタイルの切り方によって基準となる対象（親要素）が変わり、同じ「50%」でも見え方が変わることがあるため、本記事では px・vw・rem を対象とします。
この記事で操作する「レイアウト設定」の「幅」とは
この記事で取り上げるのは、タイルの「レイアウト設定」にある「幅」の指定です。次の手順で開きます。
1. 画面デザイン上で、サイズを指定したいタイルをクリックし、ウィジェット編集画面を開きます。
2. ウィジェット編集画面の右上にある「レイアウト設定」をクリックします。
3. 「レイアウト設定」の「幅」タブを開きます。
4. 幅指定で「指定する」を選ぶと、数値と単位を入力できるようになります。
この記事では、ここで入力する数値と単位（px・vw・rem）を変えると、画面の見え方がどう変わるのかを紹介していきます。
タイル構成と各タイルへの設定
これ以降で紹介するスクリーンショットは、すべて下図のタイル構成のページで撮影しています。タイルを1〜3に分け、縦に並べた構成です。
各タイルの「レイアウト設定」の「幅」には、それぞれ次のサイズを設定しています。
・タイル1：700px
・タイル2：70rem
・タイル3：70vw
なお、いずれのタイルも「内容に応じて幅を拡張する」のチェックは外しています。この記事では、指定した幅そのものによる見え方の違いを見るため、チェックを外した状態で統一しています。
また、各タイルがどこまでの幅を持っているのかが分かりやすいように、3つのタイルにそれぞれ背景色を設定しています。
・タイル1：#7FC4FF（ブルー）
・タイル2：#5FD98A（グリーン）
・タイル3：#FF8585（コーラル）
これら（幅・背景色）以外の項目は、すべてデフォルトのままです。
これから紹介する比較
ここからは、同じページの見え方が条件によってどう変わるかを紹介します。主に次の観点で見ていきます。
・ウィンドウ幅の違い（13インチと27インチで全画面表示した場合）
・ブラウザの文字サイズの違い（標準 / 極大）
また最後に、参考として同じページをスマートフォンで見た場合の表示も紹介します。
この記事のスクリーンショットは、次の環境で撮影しています。
・13インチのパソコン：解像度 1920×1200、拡大率 100%
・27インチのモニター：解像度 3840×2160、拡大率 100%
なお、同じ「13インチ」「27インチ」であっても、解像度や拡大率の設定によって、ウィンドウ幅（ブラウザに表示される幅）は変わります。そのため、ご覧の環境によっては、ここで紹介する見え方と異なる場合があります。
ここでいう「ブラウザの文字サイズ」とは、Google Chrome などのブラウザに用意されている、表示する文字の大きさの設定のことです（パソコン本体の拡大率や、ページ全体を拡大する「ズーム」とは別の設定です）。Google Chrome でのデフォルト設定は「中（推奨）」が選択されていますので、このサイズを標準とします。
変更方法は、お使いのブラウザのヘルプをご参照ください。
・Google Chrome の場合：テキスト、画像、動画のサイズを変更する（拡大、縮小）
（「フォントサイズのみを変更する」の項目をご参照ください）
実際の見え方
以下は、同じページをそれぞれの条件で表示したものです。
比較してわかること
ウィンドウ幅を変えたとき（①と②）
px のタイル1と rem のタイル2は幅が変わりません。vw のタイル3だけが、ウィンドウ幅に合わせて広がります。これは vw のサイズ指定が、ウィンドウ幅に依存するためです。
文字サイズを変えたとき（①と③）
px のタイル1と vw のタイル3は幅が変わりません。rem のタイル2だけが、文字サイズに合わせて広がります。今回の例では、タイル2がウィンドウ幅を超えて広がり、横スクロールが表示されています。これは rem のサイズ指定が、文字サイズに依存するためです。
ウィンドウ幅と文字サイズの両方を変えたとき（④）
px のタイル1は、どの条件でも幅が変わりません。rem のタイル2は文字サイズに合わせて、vw のタイル3はウィンドウ幅に合わせて、それぞれ広がります。これは、px は固定、rem は文字サイズ、vw はウィンドウ幅に依存するためです。
スマートフォン（⑤）
スマートフォンでは、タイルの幅設定にかかわらず、すべてのタイルが画面の幅に合わせて縦1列に並びます。
参考：kintone の画面ではどうなっているか
ここまでサンプルで見てきた単位ごとの動き方は、普段お使いの業務アプリの画面でも同じように現れています。ここでは kintone の3つの画面を例に、ウィンドウ幅と文字サイズを変えたときの挙動を見てみます。エブリサイトで同じような画面（ログイン、一覧、詳細など）を作る際の参考にしてください。
ログイン画面
入力フォームの幅は、ウィンドウ幅・文字サイズのどちらを変えても変わりません。本記事のサンプルでいう px のタイル（タイル1）に近い挙動です。
レコード一覧画面
一覧の表の幅は、ウィンドウ幅に合わせて伸縮しますが、文字サイズを変えても変わりません。本記事のサンプルでいう vw のタイル（タイル3）に近い挙動です。
レコード詳細画面
各フィールドの幅は、ウィンドウ幅・文字サイズのどちらを変えても変わりません。本記事のサンプルでいう px のタイル（タイル1）に近い挙動です。
まとめ
ここまで見てきたように、px・vw・rem はそれぞれ動き方が異なり、どれを使うかによってページの見え方も変わります。
どの単位が適しているかは、作ったページをどのように見てもらいたいかによって変わります。たとえば、パソコンでの表示だけを想定すればよいのか、スマートフォンで見たときのことも考えたいのか、といった違いです。
まずは実際にいくつかの単位を設定して、ウィンドウ幅や文字サイズを変えながら動きを確かめてみることをおすすめします。それぞれの単位の動き方が分かると、作りたい画面に合った設定を選びやすくなります。