パソコンとまねきねこ

font-sizeを使い文字のサイズを調整する

基本になる文字サイズは

ブラウザなどで表示される標準の文字サイズは、CSSやstyle属性で何も指定していない場合には16px(ピクセル)になります。

フォントサイズを変えるためのhtmlの記述

このサイズはあらゆる人が使いやすい大きさと考えられています、この16pxを基準にサイト内でバランスの取れた見た目に整えていきます。

表示文字の違いを説明

文字サイズの単位には相対単位と絶対単位がある

ブラウザに表示される文字の大きさはCSSで文字を指定していない場合は、ブラウザの標準の大きさの16ピクセルで表示されます、その文字を変更させるために指定する単位にはブラウザの設定や環境に依存して可変的にサイズを指定する相対単位とブラウザの設定や環境に依存せず普遍的なサイズを指定する絶対単位があります。

相対単位

相対単位とは、ブラウザの設定・環境に依存して可変的にサイズを指定する単位で、親要素の文字の大きさを基準に「何文字分」といった相対的なサイズで表示されます。

em(エム)
emを使用した文字サイズ変更のhtmlの記述

親要素に対してどのくらいの大きさなのか割合で示す、1emで親要素と同じ2emで親要素の倍

emを使った文字の大きさの違い
ex (エックスハイト)

指定しているフォントの小文字の高さを1とした単位
あまり使われない。

%(パーセント)

親要素に対してどれくらいの大きさなのか割合で示す、50%で親要素の半分の大きさ

rem(レム)

htmlタグに指定された大きさ(ルートの文字サイズを基準)に対し割合で示す、1remでhtmlで指定した大きさ、2remで倍の大きさ

px(ピクセル)

画面上の1ピクセル(小さな点)の大きさ、画面の解像度により一つのピクセルの大きさが変わる、表示される画面の仕様によって大きさが変化する。

フォントの設定ピクセルのhtml記述
フォントの表示例

絶対単位

絶対単位とは、ブラウザの設定・環境に依存せず普遍的なサイズを指定する、ブラウザや画面解像度が違っても表示される文字の大きさが変わらない。

in(インチ)

 1インチは2.54センチ

cm(センチメートル)
㎜(ミリメートル)
pt ポイント

72ptで1in

PC(パイカ)

1pcで12pt

この様な単位もあります

7段階あり標準サイズから一段上がると1.2倍のサイズになる

xx-largemediunより3段階大きいサイズで表示
x-largemediunより2段階位大きいサイズで表示
largemediumより1段階大きさサイズで表示
mediumブラウザ標準単位で表示
smallmediumより1段階小さいサイズで表示
x-smallmediunより2段階小さいサイズで表示
xx-smallmediumより3段階小さいサイズで表示
larger親要素より1段階大きいサイズで表示
smaller親要素より1段階小さいサイズで表示

font-size フォントサイズを指定する方法

HTMLで記述する方法

文字を装飾したい要素に対して、style属性で「font-size」に文字の値を指定します、段落「p」に対して各値を指定しています。

ブラウザ表示結果

CSSで文字の大きさを変更する方法

htmlの記述の段落の文字を変更してみましょう、<p>タグにclass名「moji」を付けます。

CSSファイルに「.moji」を記述しフォントサイズを「2rem」htmlで指定している文字の大きさの2倍を指定します。

この様な表示結果になります。

まとめ

fout-size文字サイズを調整して見栄えのある文書構成を

フォントサイズを指定する方法には標準サイズを基準にサイズを決める絶対単位と親要素の単位を基準にサイズを決定する相対単位があります。

フォントサイズはメンテナンスやレスポンスを考慮すると%やem、rem単位を併用して指定するといい、px単位で指定すると一部のブラウザでフォントサイズを自由に変更できない場合があります。

フォントサイズを指定する時にブラウザはデバイスはと考えると色々な指定方法を考慮する必要が出てきます。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事