※モバイル機器のみ作動→PC表示に切替 モバイル表示に切替

【Volar】に搭載されてるオリジナル機能に関してはデザインモードではなくデフォルトの編集画面でのご利用を前提としてます。

特に記載がない限り、ご紹介する機能は【Volar】及び【Volarデザイン】に共通搭載となります。

横に長いテーブル(表)をスマホで見やすくする

キャプチャ画像

SIRIUSテンプレート【Volar】にはフォントサイズを変更するクラスが何種類か搭載されてます。

 

その中にはスマホ専用のクラスもあります。


スマホ専用クラス

【Volar】のフォントサイズ変更クラスは、たとえば”f_85”というクラスなら基本フォントサイズ(18px)の85%(0.85倍)の大きさで表示”f_130”というクラスなら基本フォントサイズ(18px)の130%(1.3倍)の大きさで表示するという具合になってます。

 

ただこのフォントサイズ変更クラスはPCでもスマホでも共通の設定になります。

 

ではスマホ専用のフォントサイズ変更クラスというのはどういう時に使うのかというと、たとえば横にちょっと長いテーブル(表)をスマホの画面でより見やすく表示させたいときなんかに使ったりします。

 

どういうことかというと、たとえば横に長いテーブル(表)をスマホでみると、セル幅が狭くなって文字や数字が縦書きに表示されて見にくかったりしたことはないですか?

 

こういったトラブルを解決するために、SIRIUSには『テーブルを横スクロールする』という機能が標準搭載されてます。

 

テーブルの横スクロール機能についての詳細はコチラ↓の記事をご覧ください。

SIRIUSのテーブル(表)を横スクロールする機能

SIRIUSのテーブル(表)には横スクロール機能が付いてます。

 

この『テーブルを横スクロールする』機能は便利と言えば便利なんですが、スクロールなしで見れる方がラクと言えばラクでしょう。

 

そこで新たに付け加えたのがiPhone(スマホ)専用のフォントサイズ変更クラスです。

 

用意しているクラスはこちら↓。

(通常のクラスの最後に”sp”をつけたものです)

 

f_80sp(基本フォントサイズの80%の大きさ)
f_85sp(基本フォントサイズの85%の大きさ)
f_90sp(基本フォントサイズの90%の大きさ)
f_95sp(基本フォントサイズの95%の大きさ)

使いどころ

仮に”中途半端に”横に長いテーブル(表)を作らざるをえなかったとします。

 

たとえばコチラ↓のテーブル(表)。

(※見え方に差があるとまずいのでキャプチャ画像でご紹介します)

 

PC画面での表示がコチラこちら↓。

 

キャプチャ画像

 

これをスマホで見た時の表示がコチラ↓。

 

キャプチャ画像

 

見れないことはないと言われればそれまでですが、左端の項目なんかはちょっとゴチャゴチャした感じがしないでもありません。

 

それではと、ここで『テーブルを横スクロールする』機能を使ってみます。

 

キャプチャ画像

 

PC画面と同じサイズで表示されて一見わかりやすそうですが、右スクロールして右端のデータを表示させたときに「あ、これ何のデータだったかな?」となって再度左スクロールする必要があるのは案外面倒だったりもします。

 

そもそもスクロールする手間が面倒くさいという方もいらっしゃるでしょう。

 

ここで【Volar】のスマホ専用のクラス、サンプルとして”f_80sp”(※基本フォントサイズの0.8倍の大きさ)というクラスを充ててみます。

 

その結果がこちら↓。

 

キャプチャ画像

 

フォントサイズが若干小さくなるという欠点はありますが、全体的な見やすさはこちらの方がわかりやすいんじゃないかと思います。

 

特に左端の項目は2行表示から1行になったものもあって、より見やすくなったんじゃないでしょうか。

 

※下の画像上のスライダーを左右に動かしてみると違いがよくわかります。

 

キャプチャ画像・後
キャプチャ画像・前

 

ちなみにテーブル(表)の場合は、下のように先頭のtableタグにクラスを足すだけで全体のフォントサイズが小さくなります。

 

コード

<table class="f_80sp">
<tbody>
     ・
     ・
     ・

実際にやってみてあまり変化がないような場合は無理に設定する必要はありません。

 

また各セルに固有のクラスが付いててそちらの設定が優先される場合は、思った通りのレイアウトにならない場合もあります。

 

あくまで横幅が”多少”広いテーブル(表)に有効なクラスであって横幅が”あまりに”長いテーブル(表)の場合は『横スクロール機能』の方が見やすい場合もあります。

 

SIRIUSテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください。
 この記事をシェア 
キャプチャ画像