きっかけ
Web開発について勉強する中でfont-sizeについて落とし込むのに苦戦しました。
というのも、「px」「em」「rem」が何なのかは理解できても、「どう使いこなせばいいのか」を調べると
様々な主張がネットには溢れかえっており、「絶対にコレ」というものが存在しません。
そして、最終的には「ケースバイケース」「各自の判断」という結論が待っています。
「ケースバイケース」「各自の判断」じゃ困る！答えを決めてくれ！というのが本音ですが
そんなわけにもいかないので、そもそも世の中ではどのような論争が行われているのかを探してみて
自分はどの派閥に属するのかを1個1個検討してみようと思ったのがきっかけです。
今回は試しに3つほどピックアックしました。
みなさんも「こんな論争あるよね」といったものがあればコメントで教えていただけますと嬉しいです。
font-sizeには「px」と「em」「rem」どちらを使用するべきか
自分が記事を書くきっかけになった疑問
単位がいくつかあるが結局のところどれを使えば問題が無いのか？
- pxのほうがいい
- 馴染みがあるのはピクセル指定だし、初学者や未経験者がいきなりemやremを使いこなすのはハードルが高い。
- em,remのほうがいい
- pxを使用するとブラウザのフォントサイズ変更が効かなくなるし、レスポンシブ対応はremを使う方が楽である。
- 使い分けなさい
- px指定にもem,rem指定にもそれぞれのメリットデメリットがあるのだから必要に応じて使い分けなさい。
これについては個人的に「使い分けなさい」派がしっくりきています。
「どう使い分けるか」が直観的に分かるようになるまで経験を積んでいくのが大事なのだろうか・・・
※参考にした記事
remを使用する場合ルート要素にfont-size:62.5%を指定するべきか
font-size:100%とした時に、16pxとなるのでこのままではremの計算が面倒。
62.5%にすれば10pxとなり、remに指定する値はピクセルで指定する場合の数値×0.1なので計算しやすい。
- 指定した方が良い
- コーディングの高速化および計算ミスを防ぐにはこの指定をするのがよい。
- 指定すべきでない
- サードパーティーのライブラリの中にはroot要素が100%を想定して作られているものもあり
フォントサイズなどが更に小さくなってしまうデメリットがある。
また、開発者都合でありこの設定をする事でユーザ側のメリットが無い。
これについては指定せずにかつrem→pxの計算を簡潔にする仕組みがあればベストだと思っており
調べたところSaSSにあるmixin機能を使えば実現できそうです。(関数みたいな感じで使える）
ただ、そもそもSaSSを使うかどうかも人や状況によるような・・・
（簡単なLPを用意するのにわざわざSaSSの環境を用意するのか等）
他にはCSS変数というものを使う方法もあるらしく、アプローチの仕方ってかなり多いんですね。
余白(margin)の取り方はどのようにしているか
他にどんな論争があるのか調べていると
余白の取り方について対談をしている記事があったので紹介いたします。
記事から抜粋させていただき概要を記載すると
- 基本、上に取る派（margin-top派）
- 要素と要素の間に余白＝自分が要素の最後の場合は下に余白はいらない。
自己完結してくれるのでmargin-topで指定している。 - 基本、下で取る派（margin-bottom派）
-
上から下にサイトは閲覧されるので要素の下に余白があった方が見やすい。
但し、まったくmargin-topを使わないわけではない。 - 臨機応変派
- デザインの要件などを基に決めていく、またはプロジェクト内で決めたルールに合わせる。
基本上に取る派、基本下に取る派で共通していたのは「理由によっては違う余白の付け方をする」という事でした。
余談ですが記事を見ていると自分にはまだ備わっていないこだわりのポイントがあり奥深いなと思いました。
まだコーディング経験が少ないのでこの辺りはやりながらスタイルを決めていこうと思います。
なんとなーく上に取る方がやりやすそう。
終わりに
HTMLコーディングのトレンドについて
実際にTwitterで様々な「あなたはどうする？」をアンケートされた方がいましたのでそちらの記事を紹介します。
下の記事が最新のアンケート結果まとめで、この記事が第8回だそうです。
他にもどのような論争がWeb開発界隈にあるのか気になるので、
「こういうのがあるよ！」
と教えていただけると大変うれしいです。