中小企業-経営戦略ライフハック業務効率化Homeホームページ制作関連コーディング{font-size:62.5%}が62.5%になったワケ2018.01.15コーディング{font-size:62.5%}が62.5%になったワケwebのコーディングでは、デザイナーから指定されたpx単位で作ったデザインを正しく反映させつつ、ユーザーの環境に合わせて、それぞれの文字サイズの相対的なサイズ差が保たれるようにする必要があります。以前であればこの対応はブラウザ間の標示差や文字サイズ変更機能のためでしたが、近年はスマートフォンや端末ごとのレスポンシブ対応のために必要とされています。いった利点があるのでしょうか。htmlのfont-sizeの計算font-sizeの相対的なサイズ指定で使われる単位にemや%があります。前述の理由からwebサイトのfont-sizeはサイズ差が保たれている必要がありますので、デザイン的な特例がない限り、読ませるためのテキストは基準となるfont-sizeに対してこれらの単位で指定することになります。指定をしていない場合、font-sizeのデフォルト値mediumは16pxに相当するサイズです。このサイズをそのまま基準にすると、14pxの文字を出力したい場合font-size:0.875emとなり、20pxの文字を出力する場合はfont-size:1.250emとなります。22pxの文字を出力したい場合は?22÷16=1.375なので、font-size:1.375emとなります。この計算、毎回するのも、文字サイズごとの数値を覚えるのも、ちょっと現実的ではないですね。62.5%;}の登場です。htmlタグにこの数値を設定すると、基準値が16pxの62.5%、つまり10pxのサイズになります。するとページ内の1emが10pxとなり、以降のcss記述がとても簡単になります。22pxの文字を出力したいときはfont-size:2.2emの記述でよくなるので、計算の必要自体がなくなりましたね。62.5%;}に設定されている経緯について、かなりざっくりとですが紹介しました。流れの中でemを使いましたが、ページ内の要素にfont-sizeを指定するときは、css3以降の場合サイズの継承を避けられるremが使われるようになりました。これでサイズ差を維持したままどんなコーディングの都合上でも基準値に対するfont-sizeを直接指定すれば正しく表示させることができるようになりました。font-sizeのコントロールに困る事態になったら、サイトの基準値の設定も確認してみましょう。楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。