Flexible Table Blockで横スクロールのテーブルを作成

SPでは、縦スクロールのデザインが基本になりますが、ページの途中で横スクロールデザインを挿入しているサイトを多く見かけます。

今回は、前回使用したテーブル作成プラグインFlexible Table Blockで横スクロールのテーブルを作成します。

今回のDEMOは、PCでは、全表示のテーブルで、SPでは、横スクロールになります。上から、料金テーブル、一番左の列（最左列）固定のシンプルなテーブル、最左列固定の料金テーブルを作成しました。横スクロールの設定と、それぞれの主な設定項目を紹介します。

MUSIC CHARGE

JAZZ BARのミュージックチャージをテーブルにしました。最上段、最下段のセルを角丸にすることによって、一つのテーブルでも、列ごと分かれているように見えるようにしました。

まず、本題の横スクロールの設定をしていきます。今回は、SPのみスクロールさせるので、テーブルを選択し、右サイドバーのブロック＞設定＞テーブル設定の「モバイル表示でスクロールする」にチェックを入れます。「テーブルの横幅」を100%に設定し、「テーブルの最小幅」を640pxに設定します。これで、PCでは全表示のテーブル、SPでは横スクロールのテーブルになります。この設定は、他の2つのテーブルにも、同じように設定しています。

設定項目	設定値
モバイル表示でスクロールする	チェック有
テーブルの横幅	100%
テーブルの最小幅	640px

他のスタイルを設定していきます。全ての列を同じ幅にするため、ブロック＞設定＞テーブル設定の「表のセル幅を固定」をチェックします。「セルのパディング」を全て15pxに設定します。最上段の「セルの角丸」を左上、右上、共に10pxに設定し、最下段のセルは左下、右下共に10pxに設定します。「セルのボーダー幅」を0にします。あとは、「セルの背景色」を列ごとに同系色にして、明度を変えています。

設定項目	設定値
表のセル幅を固定	チェック有
セルのパディング	15px
セルの角丸	最上段 : 左上10px 右上10px 最下段 : 左下10px 右下10px
テーブルのボーダー幅	0
セルの配置	中央
セルのフォントサイズ	ヘッダー : 3EM その他のセル : 1.6EM

PACKAGE

ゲーム特典のテーブルを作成しました。パッケージされているものは「○」、ないものは「ー」が入力されています。最左列が固定になっているので、SPで横スクロールしても動きません。

テーブル設定＞固定制御のセレクトボックスから、「最初の列を固定」を選択します。これで、最左列固定のテーブルができます。

その他のスタイルを設定していきます。「セルのフォントサイズ」を1.2EMに設定し、セルの上下に1EM、左右に15pxパディングを入れます。テーブルのボーダー幅を0にし、偶数段の「セルの背景」をグレーに変更します。

設定項目	設定値
表のセル幅を固定	チェック有
セルのパディング	上下 : 1EM 左右 : 15px
セルの角丸	無し
テーブルのボーダー幅	0
セルの配置	最左列 : 左 その他のセル : 中央
セルのフォントサイズ	1.2EM

PLAN

PLANは、レンタルサーバーの料金テーブルです。最左列を固定し、プランごとの列の間に隙間を入れました。これは、空白セルを挿入しているので、別々のテーブルに見えても、一つのテーブルです。

まずは、4×5のテーブルを作成し、項目ごとに「セルの背景色」を色分けします。横幅を列ごとに変えるため、デフォルトでチェックが入っている、テーブル設定の「表のセル幅を固定」のチェックを外します。「セルの幅」を最左列24%、その他の列25%に設定します。最上段、最下段のセルを角丸にし、2〜4段目のプランのセルに「セルのボーダー幅」下1px、「セルのボーダー色」をグレーに設定します。

次に隙間を入れたい場所に列を追加し、パディングを0にします。セルの幅を20px、セルの背景色を透明に設定します。これで、プランの間に隙間が生まれ、背景の色が見えます。

設定項目	設定値
表のセル幅を固定	チェック無
セルのパディング	上下 : 1EM 左右 : 15px ※ 隙間セルは全て0
セルの角丸	最上段 : 左上10px 右上10px 最下段 : 左下10px 右下10px
テーブルのボーダー幅	2段目、3段目、4段目 プラン : 下1px その他のセル : 0
セルの配置	最左列 : 左 その他のセル : 中央
セルのフォントサイズ	最左列 : 1.2EM その他のセル : 1.7EM

今回は、Flexible Table Blockで、横スクロールのテーブルの作り方を紹介しました。幅をあまり気にしなくて良いので、文字やパディングを大きく使えて大変便利です。また、Flexible Table Blockでは、アイコンなどの、インライン画像も入れることができるので、デザインの幅が広がりますね。

Webサイト制作のご依頼は、コンタクトフォームよりよろしくお願いします。