プログラミング初心者へのWebデザイナー攻略サイト

パソコンが苦手でプログラミング自体何も知らなかった自分が1ヶ月でWebデザイナーになる方法

使い分けれてる?CSSのpx、em、rem、%単位の違い

 

こんにちは、ゆうきです。

 

HTMLやCSSを学びたての頃はとりあえずpx単位で指定することが多いと思います。

その後、emやremなどいろんな単位が出てきて混乱することもあるかもしれません。

 

それぞれの単位にはメリットとデメリットがあり、なぜその単位を使うのかをしっかりと理解して使い分ける必要があります。

 

そこで今回は、px、em、rem、%それぞれの違いについて説明していきます。

 

f:id:programmingkun:20200527222711j:plain

 

サイズ指定の種類

 

・px サイズを絶対値指定する

・em サイズを相対値指定する

・rem サイズを相対値指定する

・% サイズを相対値指定する

 

サイズ指定の単位は実は他にもいろいろありますが、実は大きく分けると2種類しかありません。

それは、絶対値基準相対値基準かです。

 

・絶対値は他の要素に左右されない値のこと。

例えば、フォントサイズを20pxに指定すると、必ずフォントのサイズは20pxとなります。

 

・相対値は他要素を参考に数値が決まる値のこと。

例えば、フォントサイズを200%に指定すると、親要素のサイズの200%。つまり2倍のサイズになります。

 

ここは押さえておこう

f:id:programmingkun:20200528222948j:plain

 

・emについて

 

実は%と同じ効果で、書き方が少し違うだけの機能なんです。

%の100%がemの1emに該当します。

親が文字サイズを10pxとし要素を3emに指定すると、10pxの文字のサイズが3倍のサイズになります。

例えば、250%と同じ効果を持たせないなら2.5emと書きましょう。

 

・remについて

 

remは root em の略です。つまり、emとremの違いは、

・em=親要素を元にした相対値サイズ指定

・rem=ルート要素を元にした相対値サイズ指定

 

これだけの違いです。

ルート要素とはhtmlセレクタを指します。

 

例えば、

htmlセレクタに「font-size: 20px ;」

親要素に「font-size: 10px ;」

自信に「font-size: 2rem ;」

と指定するとします。

 

結果は、ルートの20pxの2rem、つまり2倍のサイズで文字が表示されます。

 

まとめ

f:id:programmingkun:20200528224513j:plain

 

今回はサイズ指定の種類について説明しました。

 

うまく使い分けることで、サイトを管理しやすくなります。

理解したうえで何を使うか選んでいきましょう。

 

 

現在プログラミング初心者の方限定にたった数日でHTML・CSSを攻略したい人を募集しています。
*ただし本気で取り組む方のみ



詳しくはこちらの記事をご覧ください。

programmingkun.hatenablog.com