Diviで水平スクロールを使用してレスポンシブテーブルを作成する方法

公開: 2020-08-09

レスポンシブテーブルを作成することは、特に多くの列を持つテーブルがある場合、困難な場合があります。この問題を解決する優れた方法は、テーブルに水平スクロール機能を追加することです。水平スクロール付きのテーブルは、2つの主要な問題を解決します。まず、設計者はテーブルのコンテンツに必要な間隔を維持できます（列が非常に狭いと、コンテンツがまとまりすぎてしまいます）。そして第二に、それはユーザーがモバイルデバイス上で読みやすいテーブルコンテンツを表示することを可能にします。

このチュートリアルでは、Diviを使用して、水平スクロールを使用して完全にカスタムのテーブルを作成する方法を示します。テーブルコンテナをオーバーフローする列に水平スクロール機能を追加する方法を示します。さらに、UXを高めるために、テーブルに水平スクロールボタンをいくつか追加します。プラグインなしでこれすべて！

始めましょう。

スニークピーク

これは、このチュートリアルで作成する水平スクロール付きのレスポンシブテーブルの概要です。

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

divi通知ボックス

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

コーナータブの拡張

開始するには、次のことを行う必要があります。

まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

水平スクロールを使用したレスポンシブテーブルの作成

パート1：テーブル列の構築

このテーブルデザインでは、行を使用してテーブル列を作成します。これを行うには、flexプロパティ（カスタムCSS）を使用して、行を列のように水平に配置します。

セクション設定の更新

行を追加する前に、デフォルトの通常のセクションのセクション設定を開き、次のカスタムCSSをメイン要素に追加します。

display:flex;
overflow-y:scroll !important;

これにより、セクションの水平方向のオーバーフローにスクロール機能が強制されるだけでなく、行を垂直方向ではなく水平方向に編成するために必要なflexプロパティが提供されます。

水平スクロール付きdiviテーブル

行を追加する

セクションCSSが配置されたので、セクション内に1列の行を作成します。

水平スクロール付きdiviテーブル

行設定

行設定を開き、以下を更新します。

側溝幅：1
幅：100％

これにより、テーブルアイテム用に追加するテキストモジュール間にテーブル列に余分なマージンがないことが保証されます。

水平スクロール付きdiviテーブル

次に、次のように行に右の境界線を付けます。

右ボーダー幅：1px
右の境界線の色：#cccccc

水平スクロール付きdiviテーブル

次に、パディングを更新します。

パディング：0px上、0px下

水平スクロール付きdiviテーブル

[詳細設定]タブで、次のように行にカスタムCSSクラスを指定します。

CSSクラス：et-scroll-table-column

これは、後でカスタムコードに必要になります。

水平スクロール付きdiviテーブル

テキストモジュールを使用したテーブルアイテムの作成

各行（またはテーブル列）内にテーブルアイテムを作成するには、テキストモジュールを使用します。

テキストモジュールを追加

水平スクロール付きdiviテーブル

テキストコンテンツ

次に、テキストモジュールの本文コンテンツに「テーブルアイテム」というテキストを追加します。

水平スクロール付きdiviテーブル

テキストデザイン

[デザイン]タブで、以下を更新します。

テキストの配置：中央
高さ：80px

水平スクロール付きdiviテーブル

右ボーダー幅：1px
下の境界線の色：#cccccc

この境界線は、行の右側の境界線と一致します。

水平スクロール付きdiviテーブル

テキストCSS

モジュール内のテキストが垂直方向と水平方向の中央に配置されるようにするには、[詳細設定]タブの[メイン要素]に次のCSSを追加します。

display:flex;
align-items:center;
justify-content: center;

水平スクロール付きdiviテーブル

より多くのテーブルアイテムのための複製テキストモジュール

最初のテーブルアイテムが作成されたので、テキストモジュールを（必要な回数だけ）複製して、行内に追加のテーブルアイテムを作成します。

水平スクロール付きdiviテーブル

表列の見出しの作成

一番上のテキストモジュールをテーブル列の見出しに変える必要があります。これを行うには、上部のテキストモジュールの設定を開き、[レイヤー]ビューのラベルを「見出し」に更新し、本文の内容とともに「見出し」というテキストを追加します。

水平スクロール付きdiviテーブル

次に、背景色を更新します。

背景：＃333333

水平スクロール付きdiviテーブル

そして、次のようにテキストのデザインを更新します。

テキストフォントの太さ：太字
テキストフォントスタイル：TT
テキストテキストの色：#ffffff

水平スクロール付きdiviテーブル

より多くのテーブル列の行を複製する

最初の行が完成したので、行を複製して、テーブルに必要な数のテーブル列を作成できます。この設計では、行を8回複製して、合計9つの行を作成します。

水平スクロール付きdiviテーブル

パート2：垂直方向の見出しを持つスティッキーテーブル列の設計

左端の行（または最初の行）は、テーブルの垂直方向の見出しとして機能します。まず、行の背景と各テキストモジュールを更新して、各列の上部の見出しと同じデザインになるようにする必要があります。次に、行全体をスティッキーにして、ユーザーが水平方向にスクロールして非表示のテーブル列を表示しても、行が所定の位置にとどまるようにします。

行の背景を更新する

これを行うには、最初の行の設定を開き、背景色を更新します。

背景色：＃333333

水平スクロール付きdiviテーブル

テキストモジュールの更新

次に、見出しを含むトップテキストモジュールの設定を開きます。テキストオプショングループを右クリックして、[テキストスタイルの拡張]を選択します。 [スタイルの拡張]ポップアップで、テキストのスタイルをこの列全体のすべてのテキストに拡張することを選択します。次に、[拡張]ボタンをクリックします。

水平スクロール付きdiviテーブル

次に、行内のすべてのテキストモジュールを複数選択し（ctrl（またはcmd）を押しながらそれぞれをクリックします）、本文の内容を「見出し」というテキストで更新します。

水平スクロール付きdiviテーブル

ロゴを追加

この列の一番上の見出しは必要ないので、テーブルにロゴを追加します。

最初の行の一番上のテキストモジュールの設定を開きます。

次に、本文を削除します。

水平スクロール付きdiviテーブル

次に、ロゴを背景画像として追加します（約40px x 40pxであることを確認してください）。背景画像のサイズが「実際のサイズ」に設定されていることを確認してください。

水平スクロール付きdiviテーブル

垂直方向の見出しの行をスティッキーにする

行をスティッキーにするには、次のカスタムCSSをメイン要素に追加します。

min-width: 150px;
position: -webkit-sticky !important;
position: sticky !important;
left: 0;

（stickyプロパティを使用すると表示されるコードエラーは無視できます。）

水平スクロール付きdiviテーブル

スティッキー行が他の行の上に表示されたままになるようにするには、Zインデックスを更新します。

Zインデックス：13

水平スクロール付きdiviテーブル

パート3：テーブルのセクションの更新

テーブル要素がすべて配置されたので、特定のサイズとオーバーフローでセクション（テーブルコンテナ）を更新できます。

セクション設定を開き、背景色を追加します。

背景色：#ffeaef

水平スクロール付きdiviテーブル

次に、サイズと間隔を次のように更新します。

幅：100％
最大幅：900px
マージン：10vhトップ
パディング：0px上、0px下

水平スクロール付きdiviテーブル

次に、次のCSSクラスを追加します。

CSSクラス：et-scroll-table

そしてオーバーフローを更新します：

水平オーバーフロー：スクロール
垂直オーバーフロー：非表示

（注：スクロール機能がビジュアルビルダーでも有効になるように、カスタムCSSとしてセクションに「overflow：scroll」が既に追加されています。）

水平スクロール付きdiviテーブル

パート4：水平スクロールボタンの追加

水平スクロール機能はデスクトップですぐにわかるので、UXを向上させるために水平スクロールボタンを追加します。

セクションを追加

これを行うには、新しい通常のセクションを作成します。

水平スクロール付きdiviテーブル

セクション設定を開き、デフォルトのパディングを削除します。

パディング：0px上、0px下

水平スクロール付きdiviテーブル

行を追加する

セクションに1列の行を指定します。

水平スクロール付きdiviテーブル

そして、次のように行設定を更新します。

側溝幅：1
幅：100％
最大幅：900px
パディング：上10px、下10px、右10px

水平スクロール付きdiviテーブル

左スクロールボタンを作成する

左スクロールボタンを作成するには、列/行に宣伝文モジュールを追加します。

水平スクロール付きdiviテーブル

デフォルトのタイトルと本文のコンテンツを取り出し、左矢印アイコンを追加します。

水平スクロール付きdiviテーブル

[デザイン]タブで、以下を更新します。

アイコンの色：＃333333
画像/アイコンの配置：中央
アイコンのフォントサイズを使用：はい
アイコンフォントサイズ：40px
コンテンツの幅：100％
幅：50px

水平スクロール付きdiviテーブル

次に、宣伝文にCSSクラスを与えます。

CSSクラス：et-scroll-left

これは、後でコードを使用して、クリック時のスクロール機能を宣伝文/ボタンに追加するために必要です。

水平スクロール付きdiviテーブル

右スクロールボタンを作成する

右スクロールボタンを作成するには、宣伝文を複製し、右矢印でアイコンを更新します。

水平スクロール付きdiviテーブル

次に、CSSクラスを更新します。

CSSクラス：et-scroll-right

水平スクロール付きdiviテーブル

ボタンを水平に揃えるには、列の設定を開き、次のカスタムCSSを追加します。

display:flex;
justify-content:flex-end;

水平スクロール付きdiviテーブル

パート5：カスタムコードの追加

このチュートリアルの最後の部分では、行（実際にはテーブルの列）の最小幅を設定するために必要なCSSと、ボタンにスクロール機能を追加するために必要なJSコードを追加する必要があります。

コードを追加するには、2番目の宣伝文の下にコードモジュールを追加します。

水平スクロール付きdiviテーブル

コードボックスに、次のCSSを貼り付けて、コードが必要なスタイルタグでラップされていることを確認します。

.et-scroll-left:hover, .et-scroll-right:hover{
cursor:pointer;
}
.et-scroll-table-column {
min-width: 150px;
}

@media all and (max-width: 980px) {
.et-scroll-table::-webkit-scrollbar {
display: none;
}
.et-scroll-table {
-webkit-overflow-scrolling: touch; 
-ms-overflow-style: -ms-autohiding-scrollbar; 
}
}

CSSコードの下に、次のjQueryを貼り付けて、コードが必要なスクリプトタグでラップされていることを確認します。

(function($) {
$(document).ready(function(){
var $scrollTable = $(".et-scroll-table");
var $rightButton = $(".et-scroll-right");
var $leftButton = $(".et-scroll-left");
var singleColumnWidth = $(".et-scroll-table-column").width();
var scrollByColumnNumber = (singleColumnWidth + 1) * 2;

$rightButton.click(function () {
$scrollTable.animate({scrollLeft: "+=" + scrollByColumnNumber}, 300);
});
$leftButton.click(function () {
$scrollTable.animate({scrollLeft: "-=" + scrollByColumnNumber}, 300);
});
});
})( jQuery );

水平スクロール付きdiviテーブル

列幅の更新

各テーブル列の最小幅を更新する場合は、CSSの最小幅の値を変更できます。

水平スクロール付きdiviテーブル

スクロールの列数を更新する

現在、ボタンをクリックすると、2列幅に等しい距離だけ水平方向（左または右）にスクロールします。スクロールの列数を変更するには、変数scrollByColumnNumberの値の右端の数値（現在は数値2）を更新します。

水平スクロール付きdiviテーブル

交互の列の色を追加する

現在、セクションの背景色は、すべてのテーブルの列（または行）の色を決定しています。これらの列に交互の色を作成する場合は、複数選択を使用して1行おきに選択し、各列に白い背景色を追加します。

水平スクロール付きdiviテーブル

最終結果

最終結果をチェックしてください！

これがデスクトップ上のテーブルの最終的なデザインです。

水平スクロール付きdiviテーブル

そして、これがデスクトップとモバイルの水平スクロール機能です。

最終的な考え

私たちがウェブデザインの世界にどこまで来ても、テーブルは常にその場所を持っているようです。これらは、ユーザーが理解できる方法でコンテンツを整理するための貴重なソリューションを提供し続けます。水平スクロール付きのこのテーブルは、幅広いユースケースに役立ちます。そして、おそらく最良の部分は、（Diviの組み込みインラインエディターを介して）テーブルのコンテンツを更新し、ビジュアルビルダーを使用して無数の創造的な方法でテーブルのスタイルを設定することができます。

WordPressでレスポンシブテーブルを作成する方法の詳細については、WordPressでレスポンシブテーブルを作成する方法に関する投稿をご覧ください。

コメントでお返事をお待ちしております。

乾杯！

Diviで水平スクロールを使用してレスポンシブテーブルを作成する方法

スニークピーク

レイアウトを無料でダウンロード

無料でダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

始めるために必要なもの

水平スクロールを使用したレスポンシブテーブルの作成

パート1：テーブル列の構築

セクション設定の更新

行を追加する

行設定

テキストモジュールを使用したテーブルアイテムの作成

テキストモジュールを追加

テキストコンテンツ

テキストデザイン

テキストCSS

より多くのテーブルアイテムのための複製テキストモジュール

表列の見出しの作成

より多くのテーブル列の行を複製する

パート2：垂直方向の見出しを持つスティッキーテーブル列の設計

行の背景を更新する

テキストモジュールの更新

ロゴを追加

垂直方向の見出しの行をスティッキーにする

パート3：テーブルのセクションの更新

パート4：水平スクロールボタンの追加

セクションを追加

行を追加する

左スクロールボタンを作成する

右スクロールボタンを作成する

パート5：カスタムコードの追加

列幅の更新

スクロールの列数を更新する

交互の列の色を追加する

最終結果

最終的な考え

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。