【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この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。短めのテキスト（行行）行B8,000円15,000円6,000円（行行行行行）行C1年ごと2年ごと3年ごと列A列B列C行A短めのテキストこの文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。（行行）行B8,000円15,000円6,000円（行行行行行）行C1年ごと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短めのテキストこの文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。（行行）行B8,000円15,000円6,000円（行行行行行）行C1年ごと2年ごと3年ごとスマホではこちらのような表示。PCではこちらのような表示。今度は『セル幅の調節機能』を有効化した状態で『横スクロール機能』をONにしてみます。その結果がこちら。（※実際の表示です）『セル幅の調節機能』を有効化した状態で今度は『横スクロール機能』をONにしてみます。（『横スクロール機能』はスマホ表示時のみ効果が表れるようです）列A列B列C行A短めのテキストこの文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。（行行）行B8,000円15,000円6,000円（行行行行行）行C1年ごと2年ごと3年ごとスクロールできます→列A列B列C行A短めのテキストこの文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。（行行）行B8,000円15,000円6,000円（行行行行行）行C1年ごと2年ごと3年ごと上のテーブル（表）をご覧になってわかるように、『横スクロール機能』をONにするとPC上ではSIRIUS2標準の設定が強制的に優先されて均等割りになる仕様のようです。そのため”PC上では『横スクロール機能』をONにしても『セル幅の調節機能』を有効化した場合には均等割りを無効化する”設定も加えてあります。その表示がこちら。（※PCではわかりにくいですが『横スクロール機能』がONの状態です）列A列B列C行A短めのテキストこの文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。（行行）行B8,000円15,000円6,000円（行行行行行）行C1年ごと2年ごと3年ごとなお『横スクロール機能』はスマホ表示時のみ効果が表れるようで、スマホでは（隠れてるところを含めた全体の）『セル幅の調節機能』は効果を維持してます。（『セル幅の調節機能』有効時の横幅は800pxに設定済み）PCではこちらのように表示されます。（※均等割りになる仕様のようです）※テーブルの「横スクロール機能」についてはこちらの記事をご参照ください。テーブル（表）SIRIUS2のテーブル（表）作成機能についての詳細ページ。さらに「ヘッダ列の固定」をチェックして横スクロール時に左端のセルを固定表示にしてみます。この状態でスマホで見てみると…『セル幅の調節機能』自体は効力を維持してるのですがどうしても固定表示にならず、スワイプすると全部のセルが左に流れていってしまいます。※下に表示されてるテーブルは「ヘッダ列固定」ONの状態のテーブルです。スクロールできます→列A列B列C行A短めのテキストこの文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。（行行）行B8,000円15,000円6,000円（行行行行行）行C1年ごと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短めのテキストこの文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。（行行）行B8,000円15,000円6,000円（行行行行行）行C1年ごと2年ごと3年ごとスマホではこちらのように表示されます。PCではこちらのように表示されます。スマホで%指定した幅がそれっぽく見えない時もありますが、それはSIRIUS2側で最低限の列幅が設定されてるためです。もう一つ、ヘッダーを外した（th→td）状態でもチェックしてみます。その結果がこちら。先ほどと同じレイアウトになってるかと思います。列A列B列C行A短めのテキストこの文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。（行行）行B8,000円15,000円6,000円（行行行行行）行C1年ごと2年ごと3年ごとスマホでも同じ列幅で表示されます。PCでも同じ列幅で表示されます。最後にここまで使ってきたサンプルテーブルをスマホでまあまあイイ感じで表示できるようなクラス設定をしてみました。（PCでは大きな変化はありません）なお当サイトはフォントサイズをデフォルトの16pxではなく18pxに設定してます。そのためそのままスマホで表示させるとフォントが大きくて表示領域が狭くなってしまいます。そこでスマホでは【Volar2】で用意している”スマホだけテーブルのフォントサイズをデフォルトサイズの85%にする”というクラスをつけてこの下に表示されるテーブルのみ若干テキストを小さめで表示させています。よってここまでのスマホでのテーブル表示よりもテキストが少しだけ小さめに表示されるかと思います。列A列B列C行A短めのテキストこの文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。（行行）行B8,000円15,000円6,000円（行行行行行）行C1年ごと2年ごと3年ごとスマホではこちらのように表示されます。昔からセルの結合とセル幅の調整は相反するところがあったんですが、【Volar2】の『セル幅の調節機能』もテーブル内に1個でも結合したセルが存在するとうまく機能しません。予めご了承ください。セル内で縦書きテーブルが横に長くなってくるとPCでは問題なく表示されても画面幅の狭いスマホではそのままだとテキストが読みにくくなる場合が往々にしてあります。たとえば下のテーブル、スマホで見ると左端の列のテキストが変なところで改行されて若干の見づらさがあります。デパート個人商店ネットショップスカート25,000円5,000円在庫なし帽子18,000円5,000円入荷待ちコート250,000円18,000円4,300円スマホではこちらのように表示されます。（ブラウザによって見え方が異なる場合もあるので必ずしもキャプチャ画像のように表示されるとは限りません）PCではこちらのように表示されます。”横スクロール機能”をONにすれば一応この問題の解決はします。ただできるならば（面倒な）スクロールなしで見せたいところじゃないでしょうか。そこで狭くて見づらいセルだけ縦書き表示できるクラスを用意してみました。手順としては、縦書きにしたいセルのタグにこちらで用意しているクラスを加筆します。”セルの縦書き”のクラス追加に関しては少しだけ手数が増えます。［カスタム文字装飾］にセル内縦書き専用のクラスを設定。縦書きにしたいセル内のテキストだけを残して<th>と</th>を削除。残したテキストを選択→［カスタム文字装飾］から追加した専用クラスを選択。これで設定は完了します。これで縦書き設定を加筆したテーブルがこちら。（※PCでは変化はありません）デパート個人商店ネットショップスカート25,000円5,000円在庫なし帽子18,000円5,000円入荷待ちコート250,000円18,000円4,300円スマホではこちらのように表示されます。PCでは設定前と変わりなくこちらのように表示されます。横スクロール用テキスト＆マイクロコピー風テキスト横スクロール用テキストSIRIUS2のテーブル（表）には横幅が長いテーブル用に『横スクロール機能』が搭載されてます。※横スクロール機能に関してはこちらの記事をご参照ください。テーブル（表）SIRIUS2のテーブル（表）作成機能についての詳細ページ。その機能をONにするとスマホの画面を左にスワイプすることで画面外に隠れている部分が見えてくるという仕様で、スマホの画面に合わせてテーブル（表）を小さく表示してしまうと文字が小さくなって見づらくなるというデメリットを解消できます。ただしこの『横スクロール機能』をONにした状態のテーブル（表）にはデフォルトではスクロールバーが表示されません。スワイプして初めてスクロールバーが表示される仕様になってます。そのため一瞬ではスクロール可能というのが認識できずにスルーされる恐れもあります。そこで【Volar2】では”横スクロール可能”というのを明示的に表示できるよう「スクロールできます→」というテキストを表示可能なモジュールを用意しました。ここまでスマホでご覧になってきた方は横スクロール可能なテーブルの最上段右上に「スクロールできます→」というテキストが左右にゆらゆら揺れてるのが確認できたかと思います。スマホではこちらのように表示されます。（実際にはテキストは動いてます）付け方は簡単です。テーブルタグの最上段にこちらで用意したモジュールを差し込むだけです。マイクロコピー風テキスト（メインの）テキストや画像に添えられている短いテキストのことをマイクロコピーと言います。このマイクロコピー風デザインを色別に4つ用意しました。サンプルが下になります。（”おすすめ”とか”期間限定”などのテキスト部分です）商品A商品B商品C性能おすすめかなりいい普通返品可あまりよくない価格期間限定19,000円満足度99％15,000円18,000保証期間お試しアリ3年3年1年在庫在庫豊富あり残り少なしありなしスマホでの表示。やり方はマイクロコピーを付けたいテキストを加筆し、そのテキストを選択→こちらで用意しているクラスで囲むだけです。（［カスタム文字装飾］or［クラスの設定］にクラスを登録しておけば1クリックで挿入可）
