裏技！テーブルパーツを使わない、表の作り方とデザインアレンジ

今回はホームページ作成サービス「BiNDup」での、表の扱い方とカスタマイズについてご紹介したいと思います。
通常、BiNDupではテーブルパーツを使って作成しますが、今回は「リスト」機能を使って簡単に作る方法です。デザインのアレンジもできるので覚えておくと便利です。

初級から中級、上級までスキルに合わせてアレンジできる方法も解説するのでサンプルデータとともに参考にしてください。

カスタマイズ例

いくつか表組みのデザインアレンジを用意しましたので参考にしてみてください。

サンプルを見る

表の作り方

BiNDupには一般的な表組の機能（テーブルパーツ）も搭載されていますが、デザインカスタマイズが困難なため、今回はデザインアレンジができる「リスト」機能を利用します。
主に以下の3つが利用できます。

• インデント式
• テーブル式
• ニュース式

※「マークなし」〜「ⅰⅱⅲ...」もリストですが、上記3つとは構造が異なりますので、今回は取り扱いません。

基本的な使い方

これらのリストを利用するときは、ブロックエディタのメニューから利用したいリストを選択した後、「Tabキー」またはブロックエディタメニュー「アウトデント / インデント」でコンテンツをインデントさせることで階層構造を設定することができます。
※階層構造は最大3層まで。デザインカスタマイズに影響があるのは2層までです。

テーブルデザイン・初級編

主に罫線と背景色でカスタマイズしたシンプルなカスタマイズ。
二重線にしたり罫線の幅や色を変えるだけでも十分にデザインの幅が広がります。
こちらはDressの基本的な使い方だけでできますので、詳しい設定は割愛させていただきます。

背景色を交互に変更

こちらは一律で背景色を変更するのではなく、コンテンツの奇数番（偶数番）目ごとで背景色を変更する設定です。Dressで項目を選択する時に「テーブル行」から選択できます。
各コンテンツの奇数番（偶数番）目は勝手に判別してくれるので、コンテンツが増えても自動で背景色が設定されるので便利です。デザイン的にも単調になりにくいですし、コンテンツの区切りがわかりやすくなるのでお勧めの設定です。

テーブルデザイン・中級編

ここからは「高度な設定」を少し使用しています。

角丸

こちらはそのまま「角丸」設定で変更できそうですが、テーブルの性質からそのままでは角丸の設定ができません。
予め高度な設定から「表示形式」を「ブロック」に変更しておくと角丸の設定が反映されます。

テーブル風の見出し（擬似テーブルヘッダー）

こちらは小見出しを使って、擬似的にテーブルヘッダーを表現してみました。

そのままだとコンテンツの余白でヘッダーに好き間ができてしまうので、ちょっと強引ですが小見出しの「外余白」を負の数値を設定することで余計な余白を消しています。

テーブルデザイン・上級編

吹き出し部分の「▶︎」は高度な設定の「before要素」「after要素」を利用しています。
before要素で要素を新しく作り、そのボーダー設定で「▶︎」を表現できます。「before要素」「after要素」の基本的な使い方は下記の記事も参考にしてみてください。

見出しのデザインに便利、Dressのbefore要素とafter要素の活用法

▼の表現については以下も参考にしてみてください。

【CSS】CSSのみで三角と矢印を作る方法

---

今回解説した設定はサイトデータにまとめてありますので、ダウンロードして設定を確認してみてくださいね。
各設定はブロックDressにしてありますのでお手元のサイトデータでも利用してみてください。
サンプルのブロックDressは全て「テーブル式」リストで作成されています。「インデント式」・「ニュース式」リストでサンプルのブロックDressを利用したい場合は適宜調整してください。