https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

長さと色の単位

HPで扱う長さと色の単位はいろんな種類がありますが扱う単位によっては 昔の旧ブラウザでは最新ブラウザと比較してテーブルの長さが異なる、フォントサイズが 異なる、正しく色が表示されないなど最新ブラウザでの見え方と違ったりする場合があるので 注意が必要です。

■絶対値と相対値

HTMLやCSSで使用する長さの単位には絶対値と相対値があります。

絶対値・・・・指定した数値通りに表示されます。
相対値・・・・親要素に対する比率で表示されます。

絶対値と相対値の単位には以下のような種類があります。
HTMLではpxや%の単位が、CSSではptやemなどの単位が使用されます。
pxを除き<p style="font-size:1.5em">のように小数点の小さい値も 指定できます。
<table width="100">のように単位を省略し数字だけの指定もできます。

絶対値
単位 正式名 読み方 <font size="3">との比較
pt point ポイント 12ptで標準サイズ
pc pica パイカ 1pcで標準サイズ
mm millimeter ミリメートル 約4.23mmで標準サイズ
cm centimeter センチメートル 約0.42cmで標準サイズ
in inch インチ 約0.17inで標準サイズ

相対値
単位 正式名 読み方 <font size="3">との比較
px pixel ピクセル フォントサイズ20px
em emphasis エンファシス フォントサイズ1.2em
ex x-height エックスハイト フォントサイズ2.3ex
percent パーセント フォントサイズ100%

px・・・ pxは相対値ですが現在のところInternet Explorerでは絶対値として表示されます。

em・・・ 現在のフォントサイズを1とした相対指定

ex・・・ 現在の英字のxの高さを1とした相対指定

%・・・ 現在のフォントサイズや画面サイズを100%とした相対指定

長さの単位についての説明の次は色の単位に
ついて 説明します。

■HTMLでの色の指定

HTMLでは色の指定は16進数(カラーコード)で指定する方法と カラーネームで指定する方法があります。16進数で指定する場合は 先頭に#の記号を付け、その後に2桁の16進数を3個並べて記述します。

16進数で指定・・・<font color="#FFFF00">黄色</font>
カラーネームで指定・・・<font color="yellow">黄色</font>

#FFFF00のFF、 2番目のFFというように 光の三原色(RGB)で構成されています。 RGBの各数値は10進数で0~255まであります。 16進法では0123456789ABCDEFの16文字の組み合わせを使い 00(最小値0)~FF(最大値255)までになります。
2桁(各色)で16×16=256通りあるので6桁では 256の3乗=256×256×256=16777216通り の色の組み合わせがあります。
明るい
#000000 ⇔ #FFFFFF
暗い

図のように黒色 #000000 に近づく程、色は暗くなり、 白色 #FFFFFFに近づく程、色は明るくなります。

■CSSでの色の指定

CSSでは次のような色の指定方法があります。

◆16進数で指定

HTMLでの指定の時と同様にカラーコードで指定します。
<span style="color :#FF0000;">赤色</span>

◆カラーネームで指定

HTMLでの指定の時と同様にカラーネームで指定します。
<span style="color :red;">赤色</span>

◆10進数のRGB値で指定

R、G、Bの各部分に1~255の数字を指定します。
span{color :rgb(255,255,255);}

◆RGB値の割合で指定

R、G、Bの各部分に1~100%の割合を指定します。
span{color :rgb(100%,100%,100%);}

■標準16色/カラーネーム147色/WEBセーフカラー216色

HTMLでカラーネームで色を指定する時はブラウザによっては正しく 表示されない場合がありますが下の標準16色(Standard Colors 16) はカラーネームで指定しても古いブラウザで正しく表示されるので 暗記しておくと便利です。(カラーコードで指定する場合は英字は 小文字でも大文字でもけっこうです。)

white/#FFFFFF silver/#C0C0C0 gray/#808080 black/#000000
navy/#000080 blue/#0000FF teal/#008080 aqua/#00FFFF
green/#008000 lime/#00FF00 olive/#808000 yellow/#FFFF00
red/#FF0000 purple/#800080 fuchsia/#FF00FF maroon/#800000

カラーネーム 147色
WEBセーフカラー 216色

WEBセーフカラーは00 33 66 99 CC FFだけの数字と英字の組み合わせを使い #33FF99のように#記号の後に6個の数字と英字で表示します。 RGBの各値は6通りあるので6×6×6=216色の色が使えます。

このエントリーをはてなブックマークに追加 Instagram