文字装飾について フォントのデザイン「基本編」

CSSデザインに入るうえで、文字の色や大きさ、読みやすい文章を作るのが一番基本的な事だと思うので、ここで文字装飾についての解説をしておこうと思います。

今回はフォントの基本的な指定方法についてのプロパティを紹介します。

…ここからが続き

文字の色を変更するには

colorプロパティを使います。値については、色々指定方法はあるんですが、CSS Lectureでは一番よく使われているRGB値のみ紹介したいと思います。

h1	{
	color: #000000;
}

上記の指定で、「h1」のフォントカラーが黒色になります。
ちなみに色については、WEB色見本 原色大辞典さんを紹介したいと思います。

文字のサイズを変更するには

font-sizeプロパティを使います。
h1	{
	font-size: 12px;
}

上記の指定で、「h1」のフォントサイズが12pxになります。

よく使わるfont-sizeプロパティの値

%  px  em

文字のウエイトを変更するには

font-weightプロパティを使います。
h1	{
	font-weight: bold;
}

上記の指定で、「h1」のフォントの太さが太字になります。

よく使わるfont-weightプロパティの値

bold  normal

文字の斜体に変更するには

font-styleプロパティを使います。
h1	{
	font-style: italic;
}

上記の指定で、「h1」のフォントスタイルが斜体になります。

よく使わるfont-styleプロパティの値

italic  normal

文字にラインを引いたりする

text-decorationプロパティを使います。
h1	{
	text-decoration: underline;
}

上記の指定で、「h1」のフォントにアンダーラインがつきます。

よく使わるtext-decorationプロパティの値

italic  normal

文字のフォント指定

font-familyプロパティを使います。
body	{
	font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}

上記の指定で、「body」内に書かれるすべての文字がMS Pゴシックになります。 もし「MS Pゴシック」がなければ、「Osaka」になり、それもなければ「ヒラギノ角ゴ Pro W3」になるという指定の仕方をしています。

Comments

MIYA

MIYA

おー全然気がつてなかったです;

修正しておきました。
ご指摘ありがとうございました。

2008年10月31日 01:31

匿名

匿名

nomalじゃなくてnormalです:)

2008年10月31日 00:51

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article