Studio TA Subsite の案内とお知らせ

Edge はフォントの大中小が選べない

2016年 04月 22日
サブ環境でテスト導入後、新しいOSの様子が判って来たので、メインマシンにもWin10をインストールしました。 それ自体は問題ないのですが、新ブラウザ「Edge」で自ブログを表示させ、デザイン調整の必要を感じました。

今までIEとChromeでチェックしていたのですが、どちらにも画面の拡大縮小とフォントサイズ選択の機能があり、「拡大率125%、フォント大」が私には適度で、それがブラウジングの標準になっていました。 これは、モニター解像度やサイズに関係する一般性の無い個人的な話ですが、今まで「フォント大」に出来ることを前提にして、写真画像やメニューやスイッチ等と文字のバランスを取ってきたのが、Edgeに関しては通用しなくなったのです。



Edgeにはフォントサイズを変える機能がありません。(読み取りビューでは可変ですが、これはデザイン余地のない環境です) 今や多くのユーザーがスマホやモバイル機器を使うので、それに適した画面構成が推奨される時代です。 Edgeもそんな流れに同調し、フォントサイズ調節なしでズーミングだけのブラウジングに最適化された画面を「ウェブデザインのあるべき姿」とした様に見えます。

b0174191_21521074.png

私はPCからの参照に重きを置いていますが、Win10でIE11や他のブラウザも使えるとはいえ、今後のEdgeからの参照を無視ができません。 このフォントサイズ固定のブラウザ上で文字と他パーツのバランスを取っておけば、他のフォントサイズ可変のブラウザなら、参照側の問題は少ないと考えました。 結局は、Edgeがバランス確認上の標準器になってしまったわけです。



Edgeから見た状態は予想の通りでした。 画面の拡大率が同じなら、IE等で「フォント中(標準)」を指定したのと同じになります。

この状態は私の想定したバランスとは異なり、本文文字が小さ過ぎます。 ページャーより本文文字が小さいのは困ります。 読み易くしようと画面を拡大すると、今度は写真等が大きくなり過ぎます。

Edgeでバランス良く表示させるために、本文やメニュー等のフォントを大きめに設定したスキンに書き換える必要が出て来ました。(今まではブラウザのフォントサイズ調節があるから良いと思っていたわけです)



作業はCSS上の「font-size」のある全項目をチェックしましたが、思ったほど大変でもありません。 ブラウザ側でサイズ可変となる部分は、今までは「medium」「small」「x-small」等の指定と「em」指定を混在させて来ましたが、この際すべて「em」指定に改めました。「em」は、サイズ比率が的確に指定できます。

ネストした場合は「em」が累進するので、そうでない場合に限りますが、
  medium⇒1.16em
  small⇒1em
  x-small⇒0.84em
  xx-small⇒0.64em

という置き換えで目的が達せられました。 ネストしている場所では、実際の表示を見ながらem値を求めました。
今までは本文の文字サイズ指定が「small」でしたが、これを「1em」に改め、これは16pxで表示されて、ページャー(フォントサイズ16px固定)と同じになりました。(一般に、small は13px位で表示される様です)



書き換えた箇所の CSSを表示するのも芸がありませんので控えました。 既にCSSを更新しているので、再来された方は文字が大きく感じられるかも知れません。 眼が怪しくなって来た私は、フォント大が使えるIE11から離れられないかも...



余談、このページ、「読み取りビュー」が初めて押せました。 同じページが押せたり押せなくなったり。 タイトルをクリックして新ページャーの無い状態だと読み取りビューが出る事が多い。 使えるのかなぁ、この機能は?



[PR]
by Ataron | 2016-04-22 23:07 | ブログスキンのアレンジ | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。