インターネットビジネスのあらゆる手法を解説します。アイデアで稼げるサイト構築を目指します。自分に合ったビジネスに取り組み、金脈を発掘しましょう!

Web制作で使う単位

 
この記事を書いている人 - WRITER -
HN:しょう太郎 居酒屋経営しながら、アフィリエイトしています。行動力と収入は比例する「ヒミツの手法」を学び、楽しみながら人生を過ごしています。 自分で学び(Input)、人に教えること(Output)で、共に成長し喜び合える仲間を大切に思っています。

Webサイトでは、CSSを使ってブロックの幅や高さを指定したり、文字のサイズを調整したりすることができます。

この際に適した様々な単位があります。

 

「相対単位」と「絶対単位」

CSSを使ってサイズを指定する際には「0」の場合を除き、必ず数値に単位を付加して使用します。

「相対単位」

これは、指定の対象となる要素自信を囲む「親要素」や、Webブラウザの環境に依存するものです。

HTMLではたいていの場合、要素の中に要素が入った入れ子状態でマークアップします。

例えば、「<header><h1>見出し</h1></header>」の場合、

h1要素から見ると、header要素が「親要素」になり、逆にheader要素から見たh1要素は「子要素」という関係です。

相対単位
サイズ
em(エム)
1em=1文字分の長さ
ex(エックスハイト)
1ex=小文字の「x」の高さ
px(ピクセル)
1px=画面上の1ピクセル
%(パーセント)
親要素の長さに対して変化する
例)50%:親要素が100pxなら50px
rem(レム)
ルート要素の文字サイズを「1」としたときの倍率

 

「絶対単位」

一般的に物差しで測ることができる単位をいいます。

ただこれは、印刷向けのCSSを作成する際、

紙の実測を想定してセンチメートルやミリメートルなどを使うときに利用され、

画面表示向けの単位としては、あまり使われません。

単位
換算
mm(ミリメートル)
10mm=1cm
cm(センチメートル)
1cm=10mm
in(インチ)
1in=2.54cm
pt(ポイント)
72pt=1in
pc(パイカ)
1pc=12p

 

Web制作で使う代表的な単位

Web制作でよく使う単位は、「px(ピクセル)」、「%(パーセント)」、「em(エム)」です。

ボックスの幅や余白、ボーダーなどの指定のように、確定した数値を使いたい場合は「px」を使用します。

例えば、コンテンツを分割して左右に並べる時には、横幅の指定が必要になるので、

隣り合うボックス間の計算がしやすい「px」が多く使われます。

また、レスポンシブWebデザインのように、多様なデバイスに応じてコンテンツ幅を変えたり、

リキッドレイアウトのようにウィンド幅に追随させるレイアウトでは、「em」や「%」が使われたりします。

 

文字に使う単位

見出しや段落などのメリハリは、CSSでの装飾のほかに文字サイズを変化させたりします。

文字サイズの調整には「px」、「em」、「%」さらに「キーワードでの指定」です。

「px」は相対単位なので、異なるWebブラウザでも、同じ文字サイズになるので使い勝手がいいです。

「em」と「%」は、親要素の文字サイズに対する相対的な大きさを指定します。

例えば、body要素の中に書き込むp要素に対して「150%」と指定した場合、

body要素の文字サイズの1.5倍になります。

「em」の場合は、親要素の文字サイズを基準にして「〇文字分」と相対的に表示します。

例えば、「1.5em」であれば、1.5倍と考えられるため、直感的なサイズの変更に使われます。

 

まとめ

  1. Webサイトでは相対指定の単位をよく使う
  2. pxは固定的なレイアウトや配置に使われる
  3. 文字サイズの指定にはemを使うと、直感的に調整しやすい

 

 

 

 

この記事を書いている人 - WRITER -
HN:しょう太郎 居酒屋経営しながら、アフィリエイトしています。行動力と収入は比例する「ヒミツの手法」を学び、楽しみながら人生を過ごしています。 自分で学び(Input)、人に教えること(Output)で、共に成長し喜び合える仲間を大切に思っています。

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Copyright© ゼロからの収入! , 2016 All Rights Reserved.