メディアクエリを使わずにcss1行だけでフォントサイズをレスポンシブ対応にする方法【CSS】

• Date：2017-10-18
• Category：MVサイト製作日記
• Tags：HTML, css
• Response：Comments 0
• Tweet

  

  Pocket
  
  

レスポンシブサイトを作る時に一番面倒なのが、ビューポイントに合わせてメディアクエリを使い、細かく指定することだと思います。
その指定の中で今回は、フォントサイズをレスポンシブに対応してみます。

フォントサイズの指定で代表的な方法はvwを使うことですが、これだけだと正直使いづらいと感じています。
使用率はどんなものでしょうか？スマホだけに使ったり部分的に使うのはたまに見ますが…

そこで、calcと組み合わせて、vwを使いやすくしようと思います。

記述するCSSの中身

htmlに対して下記のように指定します。
※まだ、@mixinは作ってないので、作り次第更新します。ﾀﾌﾞﾝ…

上の記述の動きだけを簡単に説明すると…

ビューポートが、320px ～ 1920pxの間で、フォントサイズが、14px～18pxとサイズが変化します。

・画面320px　→　フォント14px
　　↓　// この間は等間隔で可変する
・画面1920px → フォント18px

それぞれの数字を変える事で、自由に調整出来ます。

数字の説明

・フォントサイズの変化量

最小画面幅から最大画面幅の間で、最小フォントサイズより何px大きくなるかを指定します。
先程のサンプルだと最小フォントサイズが14pxで、フォントサイズの変化量が4なので、指定した画面幅の間で、14pxから18px変化します。

・最小画面幅

フォントサイズを変化させたい最小のウィンドウサイズを指定します。
基本、最小はスマホだと思うので、320px安定だと思います。

・最大画面幅

フォントサイズを変化させたい最大のウィンドウサイズを指定します。
ただしココでの指定は、想定する「最大ウィンドウサイズ – 最小画面幅」を記述します。
よって、上記サンプルだと、1920pxを指定したいので、「1920px – 320px = 1600」を指定しています。
※この辺も後日の@mixinで自動化対象ですね^^;

・最小フォントサイズ

そのままの意味で、最小画面幅の時のフォントサイズを指定します。

※あくまで、最小画面幅～最大画面幅の間でのフォントサイズ指定なので、これに収まらない画面幅の場合は、変化量よりも大きくなったり小さくなってりします。
※例えば、768px以上はフォントサイズを固定したいといった場合は…メディアクエリを使って下さい（汗

使い方

実際に要素に指定する場合は、remもしくはemで指定します。

上記の場合は下記のように変化します。

P要素　→　14px ～ 18px
あえて1remを使っていますが、記述無しの場合と同じですね。

h2要素　→　28px ～ 36px
2remは基準の2倍なのでこうなります。

.big　→　20px ～ 50px
もちろん個別に指定する事も可能です。

ちなみにこのcalc(…)の部分は、font-sizeだけでは無く、widthなどにも使用することが出来ます。

動きサンプル

それぞれの動きサンプルを掲載します。
ウィンドウを縮めたり広げたりしてみてください。
また、4番目は参考として、vwのみ指定の場合です。

※htmlも記載してますが、styleはインラインで失礼します。
※サイトの構成上、ページ可変が見づらいかもしれませんのでごめんなさい。

チラシの裏

デザイン上のフォント指定が、 PC/SP共に、タイトルはテキストの1.5倍というようなデザインの場合、本当に1行指定して上げるだけで済むので便利です。
全体的に途中から固定したい場合も、基準のhtml要素にだけメディアクエリをつければOKです。

PC/SPでフォントの比率がバラバラの場合は、1行でとは行かないですが、個別に指定も出来るので大丈夫かなと…

cssでも条件分岐出来るようになればいろいろ楽になるのになーと考えてしまいました（汗
では。