テーブル（表）の便利機能-Volar2

 

【Volar2】ではテーブル（表）を効果的に見せる機能を付けてみました。

テーブル（表）のデータセルの背景に丸・二重丸・三角・バツ・チェックマーク・横棒のアイコン画像を表示できます。

 

サンプルとして下のような表を用意しました。

普通にSIRIUS2のテーブル（表）作成機能で作成したものです。

 

 

この表でももちろん何の問題もないんですが、比較がひと目でわかりやすいよう背景にアイコンを表示させてみました。

 

 

アイコンが少し小さ目タイプもあります。

 

 

手順としては背景アイコンをつけたいセルのタグにこちらで用意しているクラス名を加筆します。

（［カスタム文字装飾］にクラス名の部分だけを登録しておけば1クリックで挿入可）

 

セル幅の調節機能

SIRIUS2のテーブル（表）作成機能にはセル幅の調節機能として『1列目を25%幅にする』というオプションが用意されてます。しかしながらセル幅の調節機能はこれのみです。

 

 

そこでこのセル幅調整機能をアップデートしたのが《【Volar2】セル幅の調節機能》です。

特長としては、

 

概要

下のようなサンプル表を用意しました。

 

 

これを実際にブラウザで表示させてみると、SIRIUS2の場合、各列幅はセル内のテキストの分量によって自動調整されます。

 

 

いずれにしてもテキストの分量で列幅（セル幅）が決まってしまうとレイアウト的に見づらいケースが出てくることもあります。

 

列幅をカスタマイズ

そこでセルの列幅をある程度こちらの思い通りになるようクラス設定を追加したのが《【Volar2】の列幅調整用クラス》です。

 

手順としては、テーブルタグのクラス欄に【Volar2】で用意しているオリジナルクラス名を必要な分だけ加筆していきます。

（［カスタム文字装飾］や［定型文］などにベースとなるクラス名を登録しておくと1発入力可）

 

 

用意してあるクラスはコンテンツ全体幅の10%から5%刻みで50%まで。

それらが左端1列目～4列目分まであります。

 

たとえば1列目のセル幅を全体幅の20%にしたければ”xxx1-20”というクラス名を、2列目のセル幅を25%にしたければ”xxx2-25”というクラス名を追記していきます。

 

そんな感じで今回は（見た目の差がわかりやすいよう）列A（2列目）・列B（3列目）・列C（4列目）の3つのセル幅を全体の20%ずつの均等幅に設定（xxx2-20 xxx3-20 xxx4-20）してみます。

自動的に一番左端の列幅は最大で40%（ブラウザが自動計算）になります。

 

書き方はこんな感じです。

 

 

その結果がこちら。

 

 

 

 

 

 

なお『横スクロール機能』有効時、スマホでは（隠れてるところを含めた全体の）『セル幅の調節機能』は効果を維持してます。

（『セル幅の調節機能』有効時の横幅は800pxに設定済み）

 

 

ここで「ヘッダ列の固定」をチェックして横スクロール時に左端のセルを固定表示にしてみます。

 

 

この状態でスマホで見てみると…『セル幅の調節機能』自体は効力を維持してるのですがどうしても固定表示にならず、スワイプすると全部のセルが左に流れていってしまいます。

 

 

PCとスマホで別々の幅調整

【Volar2】の『セル幅の調節機能』はPCとスマホで別々の幅調整を付けることができます。

 

用意してある”xxx1-20,xxx1-25…”というのはPC・スマホ共通のクラスで、どちらも同じ設定でよければこれ1個で表示機器に関係なく同じ幅で調節されます。

 

ただし”この設定だとPCでは狭すぎる”とか”見づらい”という時のためにPC専用のクラスも用意してあります。

クラス名の最後に”pc”と付ければPC表示時のみ有効となります。（xxx1-20pc,xxx1-25pc…”

 

というわけで先ほどのテーブルに、

と別々の幅設定をしてみます。（合計6個のクラスを加筆）

その結果がこちら。

 

 

もう一つ、ヘッダーを外した（th→td）状態でもチェックしてみます。

 

 

その結果がこちら。

先ほどと同じレイアウトになってるかと思います。（ヘッダー扱いではなくなったので”背景色はなし”になってます）

 

テーブルが横に長くなってくるとPCでは問題なく表示されても画面幅の狭いスマホではそのままだとテキストが読みにくくなる場合が往々にしてあります。

 

たとえば下のテーブル、スマホで見ると左端の列のテキストが変なところで改行されて若干の見づらさがあります。（※PCでは問題なく見られるかと）

 

 

”横スクロール機能”をONにすればこの問題は即解決はします。

ただ”できるならば（面倒な）スクロールなしで見せたい”という方向けに、狭くて見づらいセルだけ縦書き表示できるクラスを用意してみました。

 

手順としては、縦書きにしたいセルのタグにこちらで用意しているクラスを加筆します。

 

 

これで縦書き設定を加筆したテーブルがこちら。

（※PCでは変化はありません）

 

横スクロール用テキスト

SIRIUS2のテーブル（表）には横幅が長いテーブル用に『横スクロール機能』が搭載されてます。

 

※横スクロール機能に関してはこちらの記事をご参照ください。

 

その機能をONにするとスマホの画面を左にスワイプすることで画面外に隠れている部分が見えてくるというもの。
これだとスマホの画面に合わせてテーブル（表）を小さく表示してしまうと文字が小さくなって見づらくなるというデメリットを解消できます。

 

ただしこの『横スクロール機能』をONにした状態のテーブル（表）にはデフォルトではスクロールバーが表示されません。

そのためちょっと見ただけではスクロール可能というのが認識できずにスルーされる恐れもあります。

スワイプすればスクロールバーは表示されるんですけどね。

 

 

そこで【Volar2】では”横スクロール可能”というのが最初からはっきりわかるよう、「スクロールできます→」というテキストを表示可能なモジュールを用意しました。

 

ここまでスマホでご覧になってきた方は横スクロール可能なテーブルの最上段右上に「スクロールできます→」というテキストが左右にゆらゆら揺れてるのが確認できたかと思います。

 

付け方は簡単です。

テーブルタグの最上段にこちらで用意したモジュールを差し込むだけです。

 

 

マイクロコピー風テキスト

（メインの）テキストや画像に添えられている短いテキストのことを”マイクロコピー”と言います。

このマイクロコピー風デザインを色別に4つ用意しました。サンプルが下になります。

（”おすすめ”とか”期間限定”などのテキスト部分です）

 

 

やり方はマイクロコピーを付けたいテキストを加筆し、そのテキストを選択→こちらで用意しているクラスで囲むだけです。

（［カスタム文字装飾］or［クラスの設定］にクラスを登録しておけば1クリックで挿入可）

 

2列限定のテーブル（表）で、背景透過・セル左寄せ・セル下線のみの機能。

シンプルなメニュー表などに使えるかと。

 

 

書き方はテーブル用コード最上段のクラスに【Volar2】で用意している専用クラスを加筆するだけです。