爆速HTML5コーディングの為のレスポンシブフォントサイズを学ぶ

2018-06-14 CSS HTML5 コーディング

システム開発一筋うん十年の身としては、デザイン寄りのHTMLコーディングの作業は、極力避けたいものです。

プログラムとなるJavascriptの部分は大好きなのですが、CSS・スタイルシートについては、あまり好きではないのが本音です。

ただ、最近ではSASS,SCSSなどの影響で、前よりは少しやる気が上がっています。

そして、最近ではCSSフレームワークの普及に伴い、オリジナルのCSSを記述するのでは無くフレームワークに用意されているものを使うようになりました。

そう言う意味では、HTMLコーディングも以前ほど苦痛にはならなくなっています。

マージン、パディング、フォントのカラー、サイズの指定などは、classを追加するだけのお手軽さが便利だと感じています。

そんな訳で、自分でCSSを記述することもほとんど無くなった今！

もう少し改善できないのか？調べて見ることに・・・

そう！画面サイズ毎にメディアクエリを使って、スタイルを調整する作業が残っていました。

これって意外に面倒だと感じていたところでした。

画像については、画面サイズの変更を気にすることも無いんですが

フォントのサイズについては？です。もっと簡単にならないのか？

今まで疑問に思っていたことを、今回調べて見ることにしました。

そして、ビューポートを使えば、画面サイズに合わせてテキストのサイズが自動調整されることが分かりました。

ただ、完璧に近い動作を求めるための計算方法が・・・よく分かりませんね。

もっとシンプルに記述はできないものなのか？

探したところ、いくつかのSASS,SCSSのMixinが公開されていました。

とりあえず、使い勝手が良さそうな下記の2つを試して見ることに

①、②ともに満足する結果になりました。

②の方が、パラメーターの数が少なくてシンプルです。

ただ、結構アバウトな範囲での動作になるのでしょうか？

①の方が完璧に近い動作をしてくれます。

とりあえず、①の方を実務に導入してみようと思います。

いやはやこれで、CSSの作成もぐーんと楽になりましたね。

今までコーダーさんに依頼していたことも、自分でこなせるようになるのかもしれません。

そう遠くない未来に・・・

爆速HTML5コーディングの為のレスポンシブ フォント サイズを学ぶ