cssで書く値で、覚えておく必要があるのが、いろいろな単位です。
%（パーセント）で指定する場合と、px（ピクセル）で指定する場合は、何がどう違うのか？
また、em（エム）とrem（レム）って一体何？どう違うの？
一体どの単位を使えばいいの？
という様な疑問で困らないようにしておきましょう。
ちなみに、mm（ミリメートル）やcm（センチメートル）、in（インチ）という単位も使えます。
印刷をする時にも、cssって使えるんですね。（こりゃあ便利だ！）
色々ある単位の種類
px（ピクセル）
ピクセルサイズが指定できます。 アイコンや画像などは、ピクセル単位で指定することが多いので、素材の指定で使われることが多いです。 また、レスポンシブデザイン（※用語1）で画面サイズのブレイクポイント（※用語2）での指定でよく使われます。 絶対的なサイズを指定する時に使う単位です。%（パーセント）
親要素のサイズを100%として、その割合が指定できます。300px
親要素に対する、相対的なサイズ指定で使われます。
50%
em（エム）
Emphasis（強調）の文字を略した、em（エム）という単位。 フォントのサイズで指定する単位で、親要素に指定されたフォントサイズの割合を指定することができます。font-size : 32px;
font-size : 0.5em;
rem（レム）
emが親要素の指定だったのに対して、htmlのroot要素のフォントサイズに対しての割合が指定できます。 Root-Emphasisの略の意味になります。 ページ全体のフォントサイズを一括管理する設定ができて、よく使われる単位です。 1.0remで、root要素と同じフォントサイズになり、 0.5remで、半分サイズ、 2.0remで、倍のサイズが指定できます。vw（view-width）,vh(view-height)
%指定だと、親要素に対する割合しか設定できないのに対して、画面全体のサイズで指定ができる単位です。 vwは、画面の幅サイズ、vhは画面の縦サイズの値を取得して指定できます。 1vw(1vh)は、サイズに対しての1%の値になるので、同じサイズを指定したい場合は、100vw(100vh)と書きます。 画面(view)の半分のサイズを指定したい場合は、50vw(50vh)です。view-size ( 300px )※上記は、画面サイズ(view)が300pxの場合のサンプルです。width : 80vwwidth : 100%width : 50%;width : 50%;width : 100%
0 件のコメント:
コメントを投稿