SSブログ

スマホやタブレットにおけるHTML5によるrem属性を用いたフォントサイズ調整について [プログラミング]

Google Apps Scriptで簡易計算のウェブサイトを作っていますが,最近,<table>タグを使って表示を見やすくしたところ,PCでは問題ないんですが,タブレットでは表のフォントがなぜか小さくなってしまい,老眼が始まったワタクシには困った状態になってしまいました。

基本的にはHTML5においてフォントサイズをうまく指定すればよいだけですが,いろいろ調べてみたところ,rem属性なるものが使えるらしいというので,備忘のため書き残すもの。

参考サイト: http://blog.karasuneko.com/html-css/font-size-px-em-percent/#p5HTML5においては,<table>タグにおけるフォントサイズの指定は例えばこのようにします。
<table style='font-size:16px'>

上の例ではフォントサイズを16ピクセルにせよというのですが,デバイスの画面サイズが違うとこうした絶対サイズで指定するのは気が引けます。このため,
<table style='font-size:150%'>

とか
<table style='font-size:1.5em'>

のような相対サイズでの指定が可能です。

しかし,パーセントやem属性を用いた相対サイズでの調整は,入れ子構造になって複利計算でフォントサイズが決められてしまうという弱点があります。

そこで,em属性の代わりにrem属性(root em属性の略とみられる)を用いることで,常にhtmlレベルからの相対サイズ指定が可能になるというわけです。具体的にはこんな感じ。
<table style='font-size:1.5rem'>

おしまい。
nice!(0)  コメント(0)  トラックバック(0) 

nice! 0

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

※ブログオーナーが承認したコメントのみ表示されます。

トラックバック 0

2016/03/26の独り言Google Apps ScriptでG.. ブログトップ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。