Studioで表をつくる方法｜左列固定で横スクロールさせる手順

この記事の公開時点（2022年10月）では、STUDIOの標準機能としてデザインエディタ上で表（テーブル）を作成する機能はありません。そのため、リスト機能を活用して疑似的に表を作ることになります。

タブレットやスマートフォンで表を表示する場合、たいていは横スクロール設定になると思いますが、表の項目が増えたときに左列が固定されていないと内容がわかりづらく、閲覧者の負担となってしまうことが予想されます。

そこでこの記事では、左列固定で横スクロールできる表をSTUDIOで実装する方法についてご紹介します。

なお、GTMなどは使用せずSTUDIOのデザインエディタ内のみで完結できる方法です。

列固定の表の設計図（全体像）

こちらが今回作成する表の設計図です。

「固定したい左列」と「スクロールさせたい表」を別々のボックスで作り、右側のボックスだけスクロール有りの設定を付与することで疑似的に左列固定の表を再現しています。

表全体を入れるための大枠となるボックスを作成します。横幅、縦幅ともにauto設定にしますが、はじめは作業領域が認識しやすいように任意のpxを設定いただいて問題ありません。

「固定する列を入れるボックス」と「スクロールさせる部分のボックス」を横並びで入れるため、このベースとなるボックス内の並び順は「→」に設定してください。

リストボックスで画像のように縦1列のボックスを作ります。横幅はテキストの収まりがよい任意のpxを設定します。

リスト内の個別のボックスについては横幅は100%、縦幅はテキストの収まりがよい任意のpxを設定してください。なお、この縦幅については最終的に全体をみて調整する必要がでてくる可能性があります。

デザイン面としては、スクロールする部分との差を明確にするために、ここではボックスの塗りをグレーにしています。

つぎにスクロールさせる右側部分を作成します。このボックスの横幅は1flex、縦幅は［先ほど設定したボックスの縦幅×行数］pxとします（適宜、はじめの設計図をご参照ください）。

ここでは1個のボックスは縦幅55pxとしていて、それが7行あるため、縦幅385pxと設定しています。

このボックスのはみ出しは「スクロール」、並び順は「→」、整列は「左・上」と設定します。

3番で作成したボックスの中に、リストボックスを入れ必要なテキストを入力していきます。

このボックスのはみ出しは「はみ出し」、並び順は「↓」、整列は「左・上」と設定します。横幅と縦幅はともにautoとします。

各リストを入れるボックスの設定は横幅100%、縦幅autoとし、並び順は「→」、整列は「左・中央」とします。

右側の領域のセルの横幅を調整します。横幅はテキストの収まりがよい任意のpx、縦幅はこれまでも縦幅に設定してきた任意のpxを設定します。

罫線を追加したい場合は、このセルに対して枠線で下側のみに線有りの設定を加えます。ここで太い線を設定すると左の列のセルと高さがずれますので、ご注意ください。

ここまでの手順でひと通り完成です。プレビューサイトをタブレットやスマートフォンで表示し、挙動の確認を行ってください。

どこかの設定を誤っていると、意図しないスクロールの動きがでたり、スクロールしなかったりします。

表の種類によっては、1行目のセルの背景色を変えた方が見やすい場合があります。ただし、リストを採用している関係で、いつもの塗り色の設定では上の1行だけ色を変えることができません。

そこで、ここでは絶対配置で帯状のボックスを置くことで塗り色を設定しているように疑似的に見せる方法を使っています。

上図のように、任意の塗り色を設定した横長のボックスを絶対配置で配置します。重ね順として、このボックスは表の下にくるように設定してください。

この方法を使うためには、表の塗り色は透明にしておく必要があります。

シンプルな2列の表を作る方法は、以下のツイート内の動画で紹介しています。