スマホ専用フォントクラス
SIRIUSテンプレート【Volar】にはフォントサイズを変更するクラスが何種類か搭載されてます。
その中にはスマホ専用のクラスもあります。
スマホ専用クラス
【Volar】のフォントサイズ変更クラスは、たとえば”f_85”というクラスなら基本フォントサイズ（18px）の85%（0.85倍）の大きさで表示、”f_130”というクラスなら基本フォントサイズ（18px）の130%（1.3倍）の大きさで表示するという具合になってます。
ただこのフォントサイズ変更クラスはPCでもスマホでも共通の設定になります。
ではスマホ専用のフォントサイズ変更クラスというのはどういう時に使うのかというと、たとえば横にちょっと長いテーブル（表）をスマホの画面でより見やすく表示させたいときなんかに使ったりします。
どういうことかというと、たとえば横に長いテーブル（表）をスマホで見た時、セル幅が狭くなって文字や数字が縦書きに表示されて見にくかったりしたことはないですか？
こういったトラブルを解決するために、SIRIUSには『テーブルを横スクロールする』という機能が標準で搭載されてます。
テーブルの横スクロール機能についての詳細はコチラ↓の記事をご覧ください。
SIRIUSのテーブル（表）には横スクロール機能が付いてます。
この『テーブルを横スクロールする』機能は便利と言えば便利なんですが、スクロールなしで見れる方がラクと言えばラクでしょう。
そこで新たに付け加えたのがスマホ専用のフォントサイズ変更クラスです。
用意しているクラスはこちら↓。
（通常のクラスの最後に”sp”をつけたものです）
使いどころ
仮に”中途半端に”横に長いテーブル（表）を作らざるをえなかったとします。
たとえばコチラ↓のテーブル（表）。
（※見え方に差があるとまずいのでキャプチャ画像でご紹介します）
PC画面での表示がコチラこちら↓。
これをスマホで見た時の表示がコチラ↓。
見れないことはないと言われればそれまでですが、左端の項目なんかはちょっとゴチャゴチャした感じがしないでもありません。
それではと、ここで『テーブルを横スクロールする』機能を使ってみます。
PC画面と同じサイズで表示されて一見わかりやすそうですが、右スクロールして右端のデータを表示させたときに「あ、これ何のデータだったかな？」となって再度左スクロールする必要があるのは案外面倒だったりもします。
そもそもスクロールする手間が面倒くさいという方もいらっしゃるでしょう。
ここで【Volar】のスマホ専用のクラス、サンプルとして”ｆ_80sp”（※基本フォントサイズの0.8倍の大きさ）というクラスを充ててみます。
その結果がこちら↓。
フォントサイズが若干小さくなるという欠点はありますが、全体的な見やすさはこちらの方がわかりやすいんじゃないかと思います。
特に左端の項目は2行表示から1行になったものもあって、より見やすくなってますでしょ。
※下の画像上のスライダーを左右に動かしてみると違いがよくわかります。
ちなみにテーブル（表）の場合は、下のように先頭のtableタグにクラスを足すだけで全体のフォントサイズが小さくなります。
<table class="f_80sp">
<tbody>
・
・
・
実際にやってみてあまり変化がないような場合は無理に設定する必要はありません。
また各セルに固有のクラスが付いててそちらの設定が優先される場合は、思った通りのレイアウトにならない場合もあります。
あくまで横幅が”多少”広いテーブル（表）に有効なクラスであって横幅が”あまりに”長いテーブル（表）の場合は『横スクロール機能』の方が見やすい場合もあります。
inoreader
