スマホやタブレットにおけるHTML5によるrem属性を用いたフォントサイズ調整について [プログラミング]
Google Apps Scriptで簡易計算のウェブサイトを作っていますが,最近,<table>タグを使って表示を見やすくしたところ,PCでは問題ないんですが,タブレットでは表のフォントがなぜか小さくなってしまい,老眼が始まったワタクシには困った状態になってしまいました。
基本的にはHTML5においてフォントサイズをうまく指定すればよいだけですが,いろいろ調べてみたところ,rem属性なるものが使えるらしいというので,備忘のため書き残すもの。
参考サイト: http://blog.karasuneko.com/html-css/font-size-px-em-percent/#p5HTML5においては,<table>タグにおけるフォントサイズの指定は例えばこのようにします。
上の例ではフォントサイズを16ピクセルにせよというのですが,デバイスの画面サイズが違うとこうした絶対サイズで指定するのは気が引けます。このため,
とか
のような相対サイズでの指定が可能です。
しかし,パーセントやem属性を用いた相対サイズでの調整は,入れ子構造になって複利計算でフォントサイズが決められてしまうという弱点があります。
そこで,em属性の代わりにrem属性(root em属性の略とみられる)を用いることで,常にhtmlレベルからの相対サイズ指定が可能になるというわけです。具体的にはこんな感じ。
おしまい。
基本的には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'>
おしまい。
2016-03-28 13:42
nice!(0)
コメント(0)
トラックバック(0)
コメント 0