横に長いテーブル(表)はスマホではフォントサイズを小さくした方が見やすい場合も

キャプチャ画像

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

 

その中にはiPhone(スマホ)専用のクラスがあるものもあります。


iPhone(スマホ)専用クラス

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

 

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

 

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

 

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

 

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

 

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

 

テーブルの横スクロール機能 - SIRIUS(シリウス)でホームページ作成

リンクタグやページURLを簡単にコピーできる機能が地味に便利です。

 

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

 

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

 

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

 

f_80sp(基本フォントサイズの80%の大きさ)

f_85sp(基本フォントサイズの85%の大きさ)

f_90sp(基本フォントサイズの90%の大きさ)

f_95sp(基本フォントサイズの95%の大きさ)

使いどころ

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

 

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

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

 

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

 

キャプチャ画像

 

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

 

キャプチャ画像

 

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

 

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

 

キャプチャ画像

 

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

 

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

 

キャプチャ画像

 

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

 

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

 

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

 

Before

キャプチャ画像

After

キャプチャ画像

 

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

 

コード

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

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

 

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

 

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

 

SIRIUSカスタムテンプレート【Volar】

キャプチャ画像

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

入手方法についてはコチラ↓をご覧ください

(※「SIRIUSでホームページ作成」という姉妹サイトの専用ページが開きます)
 この記事をシェア 
キャプチャ画像

PC版レイアウトに切替

スマホ版レイアウトに切替