Web制作 ウェブマジック » フォント指定 http://www.hp-webmagic.com/wordpress 高品質なのに低価格 Web標準hp制作・CMS・ネットショップ Fri, 10 Feb 2012 03:27:49 +0000 ja hourly 1 color：文字色 http://www.hp-webmagic.com/wordpress/archives/100 http://www.hp-webmagic.com/wordpress/archives/100#comments Wed, 25 Jun 2008 14:51:11 +0000 Web Magic http://www.hp-webmagic.com/?p=100
プロパティ

color

値

単位 | キーワード(下記参照)

対象

すべての要素

継承の有無

継承

ポイント

アクセシビリティ上、背景色と文字色はユーザーに見やすい設定にする。

color指定サンプル

p{ color: red; }

p{ color: #f00; }

p{ color: #ff0000; }など

サンプル

]]> http://www.hp-webmagic.com/wordpress/archives/100/feed 0 font-size：文字サイズ http://www.hp-webmagic.com/wordpress/archives/97 http://www.hp-webmagic.com/wordpress/archives/97#comments Wed, 25 Jun 2008 14:00:16 +0000 Web Magic http://www.hp-webmagic.com/?p=97 font-sizeプロパティは、文字の大きさ（フォントサイズ）を指定します。値にはキーワードの他、単位、パーセント等がありますが、相対値指定が望ましいとされます。（IEではpx指定の場合、ユーザー側でフォントサイズ切り替えが出来ない。）

プロパティ

font-size

値

単位 | キーワード(下記参照)

xx-small | x-small | small | medium | large | x-large | xx-large

対象

すべての要素

継承の有無

継承

ポイント

アクセシビリティ上、単位指定なら em | % などの相対指定が望ましいとされる。

font-sizeサンプル

font-size: xx-small;

font-size: x-small;

font-size: small;

font-size: medium;

font-size: large;

font-size: x-large;

font-size: xx-large;

]]> http://www.hp-webmagic.com/wordpress/archives/97/feed 0 font-weight：文字の太さ http://www.hp-webmagic.com/wordpress/archives/94 http://www.hp-webmagic.com/wordpress/archives/94#comments Wed, 25 Jun 2008 13:52:15 +0000 Web Magic http://www.hp-webmagic.com/?p=94 font-weightプロパティは、文字の太さを指定します。キーワード、数値指定ともに、ある段階までしか表示効果なし。またboldとbolderの表示結果に大差はありません。

プロパティ

font-weight

値

キーワード(下記参照)

normal | bold | bolder | lighter | 100-900

対象

すべての要素

継承の有無

継承

font-weightサンプル

font-weight:normal; あいうえお

font-weight:bold; あいうえお

font-weight:bolder; あいうえお

font-weight:lighter; あいうえお

font-weight:100; あいうえお

font-weight:200; あいうえお

font-weight:300; あいうえお

font-weight:400; あいうえお

font-weight:500; あいうえお

font-weight:600; あいうえお

font-weight:700; あいうえお

font-weight:800; あいうえお

font-weight:900; あいうえお

]]> http://www.hp-webmagic.com/wordpress/archives/94/feed 0 font-variant：スモールキャピタル http://www.hp-webmagic.com/wordpress/archives/91 http://www.hp-webmagic.com/wordpress/archives/91#comments Wed, 25 Jun 2008 13:46:00 +0000 Web Magic http://www.hp-webmagic.com/?p=91 font-variantプロパティは、スモールキャピタル表示指定です。スモールキャピタルはアルファベットの大文字を大文字のまま小さなサイズで表示。IE6未対応。IE7対応。

プロパティ
font-variant
値

キーワード(下記参照)

normal | small-caps

対象
すべての要素
継承の有無
継承

font-variantサンプル

FONT-VARIANT: normal;

font-variant: small-caps;

]]> http://www.hp-webmagic.com/wordpress/archives/91/feed 0 font-style：斜体文字 http://www.hp-webmagic.com/wordpress/archives/88 http://www.hp-webmagic.com/wordpress/archives/88#comments Wed, 25 Jun 2008 13:39:24 +0000 Web Magic http://www.hp-webmagic.com/?p=88
プロパティ

font-style

値

キーワード(下記参照)

normal | italic | oblique

対象

すべての要素

継承の有無

継承

現状 italic | oblique の差はなし。

]]> http://www.hp-webmagic.com/wordpress/archives/88/feed 0 font-family：フォント指定 http://www.hp-webmagic.com/wordpress/archives/85 http://www.hp-webmagic.com/wordpress/archives/85#comments Wed, 25 Jun 2008 13:29:03 +0000 Web Magic http://www.hp-webmagic.com/?p=85 font-familyプロパティは、要素内の文字書体を指定します。フォント名は複数指定が可能で、各フォント名をコンマ（,）で区切ります。ユーザーの利用環境により左から順に反映される。ＭＳ Ｐゴシックのようにスペースを含む場合は、フォント名の前後をシングルクォーテーション（’）、またはダブルクォーテション（”）の引用符で囲みます。

プロパティ

font-family

値

キーワード(下記参照)

基本 serif（明朝系）

基本 sans-serif（ ゴシック系）

基本 cursive（筆記体系）

基本 fantasy（装飾）

基本 monospace（等幅）

対象

すべての要素

継承の有無

継承

ポイント

上記タイプを指定の最後に付ける事。下記サンプル参照。

font-familyサンプル

serif 明朝系

sans-serif ゴシック系

cursive 筆記体系

fantasy 装飾

monospace 等幅

指定サンプル

p{ font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3" sans-serif ; }

p{ font-family: Arial, Helvetica, sans-serif; }
]]> http://www.hp-webmagic.com/wordpress/archives/85/feed 0