テキスト装飾

10月 112011

ここでは、ホームページ上に書いた文字・文章を装飾する方法を紹介していきます。

color[文字色指定]

文字は色を指定することが出来ます。
CSSで文字色を指定するにはcolorを指定します。

指定可能値	カラーコード(#＋16進数3桁又は #＋16進数6桁), 色名称
[補足]色見本(カラーコード,色名称一覧)

記述例
[例1]赤い文字(上が6桁カラーコード,下が色名称)
color:#ff0000;
又は
color:red;
[例2]黒い文字(上が6桁カラーコード,下が色名称)
color:#000000;
又は
color:black;

文字はフォントのスタイル(通常、イタリック、斜体)を指定することが出来ます。
CSSでフォントスタイルを指定するにはfont-styleを指定します。

指定可能値	normal(通常), italic(イタリック), oblique(斜体)

記述例
[例1]イタリック
font-style:italic;
[例2]斜体
font-style:oblique;

文字は太さを指定することが出来ます。
CSSで太さを指定するにはfont-weightを指定します。

指定可能値	normal(通常), bold(太字), bolder(極太), lighter(細字), 100, 200, 300, 400, 500, 600, 700, 800, 900

ただし、現在のブラウザで目に見えて変化するのは通常と太字の2種類のみ。
normal, lighter, 100, 200, 300, 400, 500が通常の太さ。
bold, bolder, 600, 700, 800, 900が太字になります。

記述例
[例1]太字
font-weight:bold;

文字は大きさを指定することが出来ます。
CSSで大きさを指定するにはfont-sizeを指定します。

絶対指定	親要素に関係なく大きさを指定
指定可能値	xx-small, x-small, small, medium(通常),large, x-large, xx-large

相対指定	親要素に比べて大きいか小さいか指定
指定可能値	larger, smaller

絶対単位指定	親要素に関係なく大きさを指定
指定可能単位	in, cm, mm, pt, pc	[補足]単位説明

相対単位指定	親要素に比べて大きいか小さいか指定
指定可能単位	em, ex, px	[補足]単位説明

割合指定	親要素の文字サイズの何%の大きさか
指定可能単位	%

同じ記述をしてもブラウザによって表示される大きさが違うので注意が必要です。また、文字が小さすぎると読みにくくなります。とにかく色々な値・単位を記述して、どう見えるかを確かめてみるのが一番です。

記述例
[例1]大きい文字
font-size:large;
[例2]フォントサイズ16pxの文字
font-size:16px;