ホームページ作り方htmlとcss習得をwebコンサルタントが支援

講座販売地域…東京都,神奈川県,大阪府,兵庫県,愛知県,北海道,千葉県,福岡県,埼玉県,群馬県,静岡県,京都府,広島県,岡山県,新潟県,沖縄県,茨城県,熊本県,山口県,三重県,福井県,富山県,岐阜県,鹿児島県,佐賀県,鳥取県,奈良県,長崎県,滋賀県,香川県,石川県,大分県,和歌山県,高知県,山梨県,長崎県,島根県,栃木県,徳島県,愛媛県,青森県,岩手県,宮城県,山形県,福島県,宮崎県,秋田県

ホームページ作り方補足・「文字サイズの相対単位と絶対単位」について

文字サイズの相対単位と絶対単位

「ホームページ作り方動画13時間講座のBRAIN」です。
今回は、文字の大きさに関する記事です。では、早速・・・



文字の大きさに限らず、要素の幅や高さなど、CSSでは、数値を利用する場面が、たくさんあります。数値の指定には、「相対単位」と「絶対単位」があります。

文字のサイズなど、「絶対単位」で指定すると、ユーザーが、文字を大きくしたりする操作ができません。ですので、文字サイズは、「相対単位」で指定します。

「絶対指定」というのは、
「pt」「pc」「in」「cm」「mm」
ですが、使用しないので、ここでは、解説しません。

「相対単位」で指定する場合、
「em」「ex」「px」「%」 があります。

それぞれ、簡単に、解説すると

「em」
ブラウザで設定されている文字サイズの高さを「1」として、相対的に指定。

「ex」
ブラウザで設定されている文字サイズの、小文字の高さを「1」として、相対的に指定。

「px」
使用しているディスプレイの解像度に対する相対的指定。1画素が、1px。

「%」
デフォルトの文字サイズを100%として相対的に指定。

では、相対単位は、何を使用するのがいいのか?
おススメは、「%」による指定です。

通常、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 */
}

初心者の方は、ここまで徹底する必要は、ないかもしれませんが、こんな方法もあるという事を知っておいてください。



ホームページ作り方、htmlとcss動画13時間講座はコチラ→

無料ブログや無料ホームページだけで、差別化は無理。
高収益を目指すなら、htmlとcssの習得は、必須!

文字の大きさや、背景画像を変えられるぐらいで、htmlとcssを習得できたと思ったら大間違い!ビジネスでは通用しません。

知識ゼロから、
13時間の動画を、見て、聞いて
動画に対応した解説書やコードを、じっくり読めば

集客と売上アップに強い「ブログやホームページ」
いくつでも、自由自在に作れるようになる教材があります。

ホームページの作り方・htmlとcss動画13時間講座について、詳細を、ご覧ください→

利用規約など

「ホームページ作り方動画13時間講座のBRAIN」は、「W3C」準拠・世界標準Webサイトです。

Valid XHTML 1.0 Transitional 正当なCSSです!

ホームページ作り方htmlとcss動画13時間講座のサンプル動画

ホームページ作り方htmlとcss動画13時間講座のサンプル動画です。各ボタンをクリックすると動画のあるページが表示されます。

トップに戻る

htmlとcss動画13時間講座は、webコンサルタントBRAIN、イチオシの教材です。
ホームページ自主運営を目指す個人・中小企業様の強力な武器となる知識・技術を習得できます。