ホームページ作り方補足・「文字サイズの相対単位と絶対単位」について
文字サイズの相対単位と絶対単位
「ホームページ作り方動画１３時間講座のBRAIN」です。
今回は、文字の大きさに関する記事です。では、早速・・・
文字の大きさに限らず、要素の幅や高さなど、CSSでは、数値を利用する場面が、たくさんあります。数値の指定には、「相対単位」と「絶対単位」があります。
文字のサイズなど、「絶対単位」で指定すると、ユーザーが、文字を大きくしたりする操作ができません。ですので、文字サイズは、「相対単位」で指定します。
「絶対指定」というのは、
「pt」「pc」「in」「cm」「mm」
ですが、使用しないので、ここでは、解説しません。
「相対単位」で指定する場合、
「em」「ex」「px」「%」 があります。
それぞれ、簡単に、解説すると
「em」
ブラウザで設定されている文字サイズの高さを「１」として、相対的に指定。
「ex」
ブラウザで設定されている文字サイズの、小文字の高さを「１」として、相対的に指定。
「px」
使用しているディスプレイの解像度に対する相対的指定。１画素が、１px。
「%」
デフォルトの文字サイズを１００％として相対的に指定。
では、相対単位は、何を使用するのがいいのか？
おススメは、「%」による指定です。
通常、font-size プロパティを指定しない時のブラウザのデフォルトフォントサイズは 16px です。そこで・・・基本のフォントサイズ「16px」として計算すると、下記のようになります。
表示したいサイズ・指定する値
10px・63%
11px・69%
12px・75%
13px・82%
14px・88%
15px・94%
16px・00%
17px・107%
18px・113%
19px・119%
20px・125%
21px・132%
22px・138%
23px・144%
24px・150%
25px・157%
文字サイズの調整は、ホームページやブログでは、頻繁に利用するので、理解しておいた方が、いいですね。
---------------------------
ココからは、少し、初心者の方には、面倒な話をします。
フォントサイズは、「px」で指定することもあるのですが・・・
IE の場合、フォントサイズを変更しても表示されている文字が拡大、縮小されないという問題があります。そこで、それを踏まえたうえで、さらに、徹底する場合ですが、基本サイズを、16ピクセルに指定します。そして、各ピクセルのフォントサイズを、「％」で指定するのです。但し、IE のみ基準サイズをパーセントによる指定にしておくことが必要です。
下記のようなcssファイルを作成し、fontsize.cssなどの名称で保存し読み込ませておくと、いいわけです。
/* 基本サイズ 16px */
body {
font-size: 16px;
}
* html body { /* for IE6 */
font-size: 100%;
}
*:first-child+html body { /* for IE7 */
font-size: 100%;
}
.size10px {
font-size: 63%; /* 10px */
}
.size11px {
font-size: 69% /* 11px */
}
.size12px {
font-size: 75% /* 12px */
}
.size13px {
font-size: 82% /* 13px */
}
.size14px {
font-size: 88% /* 14px */
}
.size15px {
font-size: 94% /* 15px */
}
.size16px {
font-size: 100% /* 16px */
}
.size17px {
font-size: 107% /* 17px */
}
.size18px {
font-size: 113% /* 18px */
}
.size19px {
font-size: 119% /* 19px */
}
.size20px {
font-size: 125% /* 20px */
}
.size21px {
font-size: 132% /* 21px */
}
.size22px {
font-size: 138% /* 22px */
}
.size23px {
font-size: 144% /* 23px */
}
.size24px {
font-size: 150% /* 24px */
}
.size25px {
font-size: 157% /* 25px */
}
.size26px {
font-size: 163% /* 26px */
}
初心者の方は、ここまで徹底する必要は、ないかもしれませんが、こんな方法もあるという事を知っておいてください。
