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

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

※テーブル（表）に関してはこちらの記事をご参照ください。

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

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

この表に、比較がひと目でわかりやすいよう背景にアイコンを表示させてみました。
（※実際の表示です）

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

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

セル幅の調節機能

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

そこでこのセル幅調整機能をアップデートしてみました。特長としては、

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

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

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

そこでセルの列幅をある程度こちらの思い通りになるようクラス設定を追加しました。

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

用意してあるクラスはコンテンツ全体幅の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%（ブラウザが自動計算）になります。

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

その結果がこちら。（※実際の表示です）

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

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

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

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

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

これで縦書き設定を加筆したテーブルがこちら。
（※実際の表示です＆PCでは変化はありません）

SIRIUS2のテーブル（表）には横幅が長いテーブル用に『横スクロール機能』が搭載されてます。
その機能を使えばスマホの画面を左にスワイプすることで画面外に隠れている部分を見ることができます。

これだと”スマホの小さな画面に合わせてテーブル（表）を小さく表示してしまうと文字が小さくなって見づらくなる”というデメリットを解消できます。

ただしこの『横スクロール機能』をONにした状態のテーブル（表）にはデフォルトではスクロールバーが表示されません。
そのためちょっと見ただけではスクロール可能というのが認識できずにスルーされる恐れもあります。

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

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

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

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

（メインの）テキストや画像に添えられている短いテキストのことを”マイクロコピー”と言います。
このマイクロコピー風デザインを色別に4つ用意しました。サンプルが下になります。（※実際の表示です）
（”おすすめ”とか”期間限定”などのテキスト部分です）

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

2列限定のテーブル（表）で、背景透過・セル左寄せ・セル下線のみの機能。
シンプルなメニュー表などに使えるかと。

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