テーブル(表)の便利機能-Volar2

テーブル(表)の便利機能-Volar2

SIRIUS2テンプレート【Volar2】にはテーブル(表)のデータの背景にアイコンをつけたりセル幅を自在に調節できたりする便利な機能が搭載されてます
 

データセルの背景にアイコン

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

 

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

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

 

商品A 商品B 商品C
性能 かなりいい 普通 あまりよくない
価格 19,000円 15,000円 18,000
保証期間 3年 3年 1年
在庫 あり あり なし

 

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

 

商品A 商品B 商品C
性能 かなりいい 普通 あまりよくない
価格 19,000円 15,000円 18,000
保証期間 3年 3年 1年
在庫

 

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

 

商品A 商品B 商品C
性能 かなりいい 普通 あまりよくない
価格 19,000円 15,000円 18,000
保証期間 3年 3年 1年
在庫

 

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

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

 

キャプチャ画像

この機能を使う時はセルの中央指定をONにした方がきれいに表示されます。

 

キャプチャ画像

セル幅の調節機能

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

 

キャプチャ画像

 

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

 

ただこのクラスは適用させる箇所を間違えるとうまく機能しないため、若干上級者向けの機能でした。

それにPCでもスマホでも同じ列幅になってしまうため、使い勝手はイマイチな感がなきにしもあらずというところもあります。

 

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

特長としては

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

というものです。

 

概要

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

 

キャプチャ画像

 

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

 

列A 列B 列C
行A この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。 短めのテキスト
(行行)行B 8,000円 15,000円 6,000円
(行行行行行)行C 1年ごと 2年ごと 3年ごと

 

列A 列B 列C
行A 短めのテキスト この文章はダミーです。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
(行行)行B 8,000円 15,000円 6,000円
(行行行行行)行C 1年ごと 2年ごと 3年ごと

※2個目のテーブルはスマホではこちらのような表示。

 

キャプチャ画像

※2個目のテーブルはPCではこちらのような表示。

 

キャプチャ画像

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

 

列幅をカスタマイズ

ここでセルの列幅をある程度こちらの思い通りになるよう【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%(ブラウザが自動計算)になります。

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

 

列A 列B 列C
行A 短めのテキスト この文章はダミーです。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
(行行)行B 8,000円 15,000円 6,000円
(行行行行行)行C 1年ごと 2年ごと 3年ごと

スマホではこちらのような表示。

 

キャプチャ画像

PCではこちらのような表示。

 

キャプチャ画像

 

今度は『セル幅の調節機能』を有効化した状態で『横スクロール機能』をONにしてみます。
その結果がこちら。(※実際の表示です)

『セル幅の調節機能』を有効化した状態で今度は『横スクロール機能』をONにしてみます。

(『横スクロール機能』はスマホ表示時のみ効果が表れるようです)

 

列A 列B 列C
行A 短めのテキスト この文章はダミーです。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
(行行)行B 8,000円 15,000円 6,000円
(行行行行行)行C 1年ごと 2年ごと 3年ごと
スクロールできます→
列A 列B 列C
行A 短めのテキスト この文章はダミーです。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
(行行)行B 8,000円 15,000円 6,000円
(行行行行行)行C 1年ごと 2年ごと 3年ごと

 

上のテーブル(表)をご覧になってわかるように、『横スクロール機能』をONにするとPC上ではSIRIUS2標準の設定が強制的に優先されて均等割りになる仕様のようです。

 

そのため”PC上では『横スクロール機能』をONにしても『セル幅の調節機能』を有効化した場合には均等割りを無効化する”設定も加えてあります。

その表示がこちら。(※PCではわかりにくいですが『横スクロール機能』がONの状態です)

 

列A 列B 列C
行A 短めのテキスト この文章はダミーです。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
(行行)行B 8,000円 15,000円 6,000円
(行行行行行)行C 1年ごと 2年ごと 3年ごと

 

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

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

 

キャプチャ画像

PCではこちらのように表示されます。(※均等割りになる仕様のようです)

 

キャプチャ画像

※テーブルの「横スクロール機能」についてはこちらの記事をご参照ください。

 

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

 

キャプチャ画像

 

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

 

キャプチャ画像

※下に表示されてるテーブルは「ヘッダ列固定」ONの状態のテーブルです。

スクロールできます→
列A 列B 列C
行A 短めのテキスト この文章はダミーです。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
(行行)行B 8,000円 15,000円 6,000円
(行行行行行)行C 1年ごと 2年ごと 3年ごと

ということで現状では【Volar2】の『セル幅の調節機能』を使うと「ヘッダ列固定表示」は無効化されてしまいます。

 

一応『ヘッダーを固定させる』設定を付けてはみたんですが、そうすると今度は『セル幅の調節機能』が効かなくなるため「ヘッダ列固定表示」に関しては諦めました。

 

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

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

 

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

 

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

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

 

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

PCでは左端の列(1列目)を15%、列A(2列目)を30%、列B(3列目)を15%、列C(4列目)は自動計算(最大で40%)。

スマホでは左端の列(1列目)を10%、列A(2列目)を15%、列B(3列目)を25%、列C(4列目)は自動計算(最大で50%)。

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

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

 

(15%)
(10%)
列A(30%)
列A(15%)
列B(15%)
列B(25%)
列C(自動計算)
行A 短めのテキスト この文章はダミーです。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
(行行)行B 8,000円 15,000円 6,000円
(行行行行行)行C 1年ごと 2年ごと 3年ごと

スマホではこちらのように表示されます。

 

キャプチャ画像

PCではこちらのように表示されます。

 

キャプチャ画像

スマホで%指定した幅がそれっぽく見えない時もありますが、それはSIRIUS2側で最低限の列幅が設定されてるためです。

 

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

 

キャプチャ画像

 

その結果がこちら。

先ほどと同じレイアウトになってるかと思います。

 

列A 列B 列C
行A 短めのテキスト この文章はダミーです。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
(行行)行B 8,000円 15,000円 6,000円
(行行行行行)行C 1年ごと 2年ごと 3年ごと

スマホでも同じ列幅で表示されます。

 

キャプチャ画像

PCでも同じ列幅で表示されます。

 

キャプチャ画像

 

最後にここまで使ってきたサンプルテーブルをスマホでまあまあイイ感じで表示できるようなクラス設定をしてみました。

(PCでは大きな変化はありません)

なお当サイトはフォントサイズをデフォルトの16pxではなく18pxに設定してます。そのためそのままスマホで表示させるとフォントが大きくて表示領域が狭くなってしまいます。

 

そこでスマホでは【Volar2】で用意している”スマホだけテーブルのフォントサイズをデフォルトサイズの85%にする”というクラスをつけてこの下に表示されるテーブルのみ若干テキストを小さめで表示させています。

 

よってここまでのスマホでのテーブル表示よりもテキストが少しだけ小さめに表示されるかと思います。

列A 列B 列C
行A 短めのテキスト この文章はダミーです。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
(行行)行B 8,000円 15,000円 6,000円
(行行行行行)行C 1年ごと 2年ごと 3年ごと

スマホではこちらのように表示されます。

 

キャプチャ画像

昔からセルの結合とセル幅の調整は相反するところがあったんですが、【Volar2】の『セル幅の調節機能』もテーブル内に1個でも結合したセルが存在するとうまく機能しません。

予めご了承ください。

セル内で縦書き

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

 

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

 

デパート 個人商店 ネットショップ
スカート 25,000円 5,000円 在庫なし
帽子 18,000円 5,000円 入荷待ち
コート 250,000円 18,000円 4,300円

スマホではこちらのように表示されます。

(ブラウザによって見え方が異なる場合もあるので必ずしもキャプチャ画像のように表示されるとは限りません)

 

キャプチャ画像

PCではこちらのように表示されます。

 

キャプチャ画像

 

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

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

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

 

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

 

キャプチャ画像

 

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

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

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

 

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

(※PCでは変化はありません)

 

デパート 個人商店 ネットショップ
スカート 25,000円 5,000円 在庫なし
帽子 18,000円 5,000円 入荷待ち
コート 250,000円 18,000円 4,300円

スマホではこちらのように表示されます。

 

キャプチャ画像

PCでは設定前と変わりなくこちらのように表示されます。

 

キャプチャ画像

横スクロール用テキスト&マイクロコピー風テキスト

横スクロール用テキスト

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

 

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

 

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

 

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

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

 

キャプチャ画像

 

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

 

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

 

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

スマホではこちらのように表示されます。(実際にはテキストは動いてます)

 

キャプチャ画像

 

付け方は簡単です。

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

 

キャプチャ画像

 

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

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

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

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

 

商品A 商品B 商品C
性能

おすすめ

かなりいい

普通

返品可

あまりよくない

価格

期間限定

19,000円

満足度99%

15,000円

18,000
保証期間

お試しアリ

3年

3年 1年
在庫

在庫豊富

あり

残り少なし

あり

なし

スマホでの表示。

 

キャプチャ画像

 

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

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

 

キャプチャ画像