![](https://cxg-design.jp/wp-content/uploads/2024/02/63c5b3690926174af79692d498d82607-1.png)
Flexible Table Blockで横スクロールのテーブルを作成
SPでは、縦スクロールのデザインが基本になりますが、ページの途中で横スクロールデザインを挿入しているサイトを多く見かけます。
今回は、前回使用したテーブル作成プラグインFlexible Table Blockで横スクロールのテーブルを作成します。
![](https://cxg-design.jp/wp-content/uploads/2024/02/98c1c8add929086c9d5b39eddcf0c7a2.png)
出典 : Flexible Table Block
今回のDEMOは、PCでは、全表示のテーブルで、SPでは、横スクロールになります。上から、料金テーブル、一番左の列(最左列)固定のシンプルなテーブル、最左列固定の料金テーブルを作成しました。横スクロールの設定と、それぞれの主な設定項目を紹介します。
MUSIC CHARGE
![](https://cxg-design.jp/wp-content/uploads/2024/02/63c5b3690926174af79692d498d82607.png)
JAZZ BARのミュージックチャージをテーブルにしました。最上段、最下段のセルを角丸にすることによって、一つのテーブルでも、列ごと分かれているように見えるようにしました。
まず、本題の横スクロールの設定をしていきます。今回は、SPのみスクロールさせるので、テーブルを選択し、右サイドバーのブロック>設定>テーブル設定の「モバイル表示でスクロールする」にチェックを入れます。「テーブルの横幅」を100%に設定し、「テーブルの最小幅」を640pxに設定します。これで、PCでは全表示のテーブル、SPでは横スクロールのテーブルになります。この設定は、他の2つのテーブルにも、同じように設定しています。
![](https://cxg-design.jp/wp-content/uploads/2024/02/84bd33c1fdc5aa9a42859da4001455b8.png)
「モバイル表示でスクロールする」にチェック。「テーブルの横幅」を100%に設定し、「テーブルの最小幅」を640pxに設定。
設定項目 | 設定値 |
---|---|
モバイル表示でスクロールする | チェック有 |
テーブルの横幅 | 100% |
テーブルの最小幅 | 640px |
他のスタイルを設定していきます。全ての列を同じ幅にするため、ブロック>設定>テーブル設定の「表のセル幅を固定」をチェックします。「セルのパディング」を全て15pxに設定します。最上段の「セルの角丸」を左上、右上、共に10pxに設定し、最下段のセルは左下、右下共に10pxに設定します。「セルのボーダー幅」を0にします。あとは、「セルの背景色」を列ごとに同系色にして、明度を変えています。
![](https://cxg-design.jp/wp-content/uploads/2024/02/da6e9ffb69d07bc0d89c12fa5956b241.png)
最上段、最下段に「セルの角丸」を設定。
設定項目 | 設定値 |
---|---|
表のセル幅を固定 | チェック有 |
セルのパディング | 15px |
セルの角丸 | 最上段 : 左上10px 右上10px 最下段 : 左下10px 右下10px |
テーブルのボーダー幅 | 0 |
セルの配置 | 中央 |
セルのフォントサイズ | ヘッダー : 3EM その他のセル : 1.6EM |
PACKAGE
![](https://cxg-design.jp/wp-content/uploads/2024/02/d64a4abaa9dc38652c7e6ef9ca1d6b03.png)
ゲーム特典のテーブルを作成しました。パッケージされているものは「○」、ないものは「ー」が入力されています。最左列が固定になっているので、SPで横スクロールしても動きません。
テーブル設定>固定制御のセレクトボックスから、「最初の列を固定」を選択します。これで、最左列固定のテーブルができます。
その他のスタイルを設定していきます。「セルのフォントサイズ」を1.2EMに設定し、セルの上下に1EM、左右に15pxパディングを入れます。テーブルのボーダー幅を0にし、偶数段の「セルの背景」をグレーに変更します。
![](https://cxg-design.jp/wp-content/uploads/2024/02/6a2507b9519b19c49584adcf2f60f244.png)
テーブル設定>固定制御のセレクトボックスから、「最初の列を固定」を選択
設定項目 | 設定値 |
---|---|
表のセル幅を固定 | チェック有 |
セルのパディング | 上下 : 1EM 左右 : 15px |
セルの角丸 | 無し |
テーブルのボーダー幅 | 0 |
セルの配置 | 最左列 : 左 その他のセル : 中央 |
セルのフォントサイズ | 1.2EM |
PLAN
![](https://cxg-design.jp/wp-content/uploads/2024/02/54e6d3749e102caf993ef1c5571d16f3.png)
PLANは、レンタルサーバーの料金テーブルです。最左列を固定し、プランごとの列の間に隙間を入れました。これは、空白セルを挿入しているので、別々のテーブルに見えても、一つのテーブルです。
まずは、4×5のテーブルを作成し、項目ごとに「セルの背景色」を色分けします。横幅を列ごとに変えるため、デフォルトでチェックが入っている、テーブル設定の「表のセル幅を固定」のチェックを外します。「セルの幅」を最左列24%、その他の列25%に設定します。最上段、最下段のセルを角丸にし、2〜4段目のプランのセルに「セルのボーダー幅」下1px、「セルのボーダー色」をグレーに設定します。
次に隙間を入れたい場所に列を追加し、パディングを0にします。セルの幅を20px、セルの背景色を透明に設定します。これで、プランの間に隙間が生まれ、背景の色が見えます。
![](https://cxg-design.jp/wp-content/uploads/2024/02/109b9c250e29a75e6281e2bf0abd1a7e.png)
「表のセル幅を固定」のチェックを外し、「セルの幅」を最左列24%、その他の列25%に設定。
![](https://cxg-design.jp/wp-content/uploads/2024/02/60f2f5eceb9eb9db6693e8626c8d6e6a.png)
2〜4段目のテキスト欄のセルに「セルのボーダー幅」下1px、「セルのボーダー色」をグレーに設定。
![](https://cxg-design.jp/wp-content/uploads/2024/02/51d2a17820bd9df3c85faf9030947a6e.png)
プランの間に列を挿入し、「セルのパディング」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サイト制作のご依頼は、コンタクトフォームよりよろしくお願いします。