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

【Volar2】にはテーブル（表）を効果的に見せる機能が搭載されてます。

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

 

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

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

 

 

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

 

 

アイコンが少し小さ目のバージョンもあります。

 

 

手順としては、（セルの背景にアイコンを付ける機会はそうはないと思うので）機能を使いたいページのエントリーページ（個別ページ）の設定を開き、こちらで用意しているモジュールを『スタイル割り込み』にコピー＆ペーストします。

 

 

続いてテキストモードのテーブルタグ内の背景アイコンをつけたいセルのタグにこちらで用意しているクラスを加筆します。

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

 

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

 

 

ということもあって元々【Volar2】にはテーブルセルの幅調整用にwide10（横幅全体の10％）とかwide20というクラスが搭載されてます。

 

ただこのクラスは適用させる箇所を間違えるとうまく機能しないため、若干上級者向けの機能でした。
それにPCでもスマホでも同じ列幅になってしまうため、使い勝手はイマイチな感がなきにしもあらずというところもあります。

 

そこでこのセル幅調整機能をアップデートしたのが今回の『セル幅の調節機能』です。

特長としては

• 左から4列目までのセル幅を個別に調整可能。
• PCとスマホで別々の設定が可能

というものです。

 

概要

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

 

 

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

 

 

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

 

列幅をカスタマイズ

ここでセルの列幅をある程度こちらの思い通りになるよう【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にすれば一応この問題の解決はします。

ただできるならば（面倒な）スクロールなしで見せたいところじゃないでしょうか。

そこで狭くて見づらいセルだけ縦書き表示できるクラスを用意してみました。

 

手順としては、（縦書きが必要になる機会はそうはないと思うので）機能を使いたいページのエントリーページ（個別ページ）の設定を開き、こちらで用意しているモジュールを『スタイル割り込み』にコピー＆ペーストします。

 

 

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

 

 

”セルの縦書き”のクラス追加に関しては少しだけ手数が増えます。

1. ［カスタム文字装飾］にセル内縦書き専用のクラスを設定。
2. 縦書きにしたいセル内のテキストだけを残して<th>と</th>を削除。
3. 残したテキストを選択→［カスタム文字装飾］から追加した専用クラスを選択。

これで設定は完了します。

 

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

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

 

横スクロール用テキスト

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

 

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

 

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

 

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

スワイプして初めてスクロールバーが表示される仕様になってます。

 

 

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

 

そこで【Volar2】では”横スクロール可能”というのを明示的に表示できるよう「スクロールできます→」というテキストを表示可能なモジュールを用意しました。

 

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

 

付け方は簡単です。

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

 

 

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

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

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

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

 

 

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

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