2019年10月24日どうも、べ〜やんです。今回は、CSSで指定するフォントサイズの種類と簡単な使い方をまとめて紹介します。行の高さ&文字間隔おわりにフォントサイズの種類フォントサイズを適当に決めてませんか?なんとなくpxだけを使ってませんか?フォントサイズも種類があり、デザイン上でもユーザービリティ向上のためにも使い分ける必要があります。ここで基本的なフォントサイズ種類を紹介します。pxpxは画面を作っている小さな点のことです。この小さな点が集まって画面が作られています。10pxなら一文字が、小さな点が縦10個*横10個の正方形のサイズになります。pxは絶対指定と呼ばれ、指定したサイズのまま表示されます。pxは絶対値なので、ユーザーがブラウザの設定で文字サイズの変更をしても変更できません。ユーザーが見やすいようにpxは特別な理由がない場合は使わない方がいいでしょう。ememは相対指定と呼ばれ指定した場所のフォントサイズを1とする単位です。親要素に比べてどれくらいの大きさか。%%は相対指定と呼ばれ指定した場所のフォントサイズを100%とする単位です。親要素の一文字の大きさが100%として、何%のサイズにするか。)を基準にするemです。)を基準にするので計算が簡単で便利です。簡単な使い方では、簡単な使い方を説明します。html要素に62.5%を指定します。これでページ全体のフォントサイズが10pxになります。主要なブラウザのデフォルトサイズは16pxになっているので、16pxの62.5%で10pxになります。10pxにするのは文字サイズの計算を楽にするためです。全て18pxと同じサイズです。行の高さや文字間隔を指定する時にも相対値を使えます。行の高さはline-heightで指定します。文字サイズが変わっても対応するように単位を使わずに数字だけで指定するといろんな文字サイズが混ざっていても均等に行間を保てます。1.6;文字間隔はletter-spacingで指定します。親要素の文字サイズから相対指定するemを使うと便利です。0.1em;おわりに今回は、CSSで指定するフォントサイズの種類と簡単な使い方をまとめて紹介しました。私を含め初心者のうちはどうしてもpxばかりを使ってしまう人が多いと思いますが、ユーザーのことを考えれば相対指定を使うようにしたいですね。コメントをキャンセルコメントを投稿するにはログインしてください。CSSの単位vwやvh知ってますか?どうも、べ〜やんです。今回は、CSSで使用される単位のvw、vhを紹介します。HTMLのタグ・要素どうも、べ〜やんです。今回は、HTMLのよく使うタグ・要素などをまとめました。visibilityで非表示にする方法どうも、べ〜やんです。今回は、要素を不可視にするvisibilityプロパティを紹介します。visibilityとは要素を不可視にできるプロパティです。ルビを振る方法どうも、べ〜やんです。今回こんかいは、HTMLでルビを振ふる方法ほうほうを紹介しょうかいします。ご存知の方がほとんどだと思いますが、ルビとは(ふりがな)のことです。リストの最初や最後だけなどに便利な擬似要素どうも、べ〜やんです。今回は、リストで最初や最後だけなど任意の箇所だけ違うデザインにしたい時などに便利な擬似クラスを紹介します。