CSSで使用されるプロパティをカテゴリに分けて説明します。

フォント・テキスト関係(1/2)

color、font-family、font-size、font-weight、font-style、text-decoration、

文字の色を指定する

colorプロパティは、文字の色（前景色）を指定します。ただし、背景色によっては文字が読みにくい時があるので、文字色と背景色のバランスを考えて色は指定します。
値には16進数のカラーコード、個別の色名、RGB値のいずれかを指定します。

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	.type1 { color:#0000cc;}
            .type2 { color:#ff00ff;}
            .type3 { color:#ffff00;
            		 background:#000000;
                    }
    	</style>
    

HTML

    	<p class="type1">文字色は青色</p>
    	<p class="type2">文字色はピンク色</p>
        <p class="type3">文字色は黄色で背景色は黒</p>
    

フォントの種類を指定する

font-familyプロパティは、フォント名を指定します。フォント名は一つでも良いですが、「,」（カンマ）で区切って複数指定することができます。複数指定の場合、先頭（左）が優先となり、パソコンに指定フォントがない場合は次のフォントが指定されていきます。また、フォントの系統を指定することで、複数指定したフォントがユーザのパソコンに存在しない場合に備えることができます。

※ フォント名の中にスペースが含まれている場合は、必ず「"」ダブルクォーテーション、または「'」シングルクォーテーションで囲みます。

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	.type1 { font-family:"ＭＳ 明朝",serif;}
            .type2 { font-family:"ＭＳ Ｐ ゴシック",sans-serif;}
            .type3 { font-family:monospace;}
    	</style>
    

HTML

    	<p class="type1">フォントにＭＳ 明朝を指定する</p>
    	<p class="type2">フォントにＭＳ Ｐ ゴシックを指定する</p>
        <p class="type3">フォントに等幅フォントを指定する</p>
    

フォントのサイズを指定する

font-sizeプロパティは、フォントのサイズ（大きさ）を指定します。％単位を指定した場合は、指定した親要素である要素のフォントサイズに対する割合になります。また、キーワードを利用した場合は「xx-small」から「xx-large」の7段階のサイズを表現できます。「smaller」と「larger」は、親要素のフォントサイズに対して、それぞれ1段階小さいサイズと1段階大きいサイズに指定します。

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	.type1 { font-size:18px}
            .type2 { font-size:150%;}
            .type3 { font-size:x-large;}
    	</style>
    

HTML

    	<p class="type1">フォントを18ピクセル</p>
    	<p class="type2">フォントを150％</p>
        <p class="type3">フォントをx-large</p>
    

フォントの太さを指定する

font-weightプロパティは、フォントの太さを指定します。
値を「bold」にすると一般的な太字で表示されます。また、太さは100～900（100刻み）の数値で指定することができ、標準の太さは400、「bold」は700に相当します。しかし、数値で指定した場合、無頼座上ではあまりその差は感じられないので、一般的にキーワードの「bold」を指定することが多いです。
見出し要素（h1～h6）には、もともと太字が設定されているので、その太さを解除したい場合に「normal」というキーワードを指定します。同じフォントファミリー中に異なるフォントがある場合、「lighter」は1段階細く、「bolder」は1段階太くすることができます。

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	.type1 { font-weight:normal;}
            .type2 { font-weight:bold;}
            .type3 { font-weight:900;}
    	</style>
    

HTML

    	<p class="type1">フォントの太さは標準</p>
    	<p class="type2">フォントの太さを太く</p>
        <p class="type3">フォントの太さを900</p>
    

フォントの斜体を指定する

font-styleプロパティは、フォントを斜体にするかどうかを指定します。
値の「italic」は、通常の文字よりも続け書きに近い草書体風にデザインされます。また「oblique」は、標準のフォントを単純に斜めにしたものですが、一般的な環境では、どちらも同じような斜体で表示されます。

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	.type1 { font-style;normal;}
            .type2 { font-style:italic;}
            .type3 { font-style:oblique;}
    	</style>
    

HTML

    	<p class="type1">標準の文字</p>
    	<p class="type2">italicで斜体</p>
        <p class="type3">obliqueで斜体</p>
    

フォントのライン装飾を指定する

text-decorationプロパティは、フォントのライン装飾を指定します。
値には、下線（underline）、上線（overline）、取り消し線（line-through）があります。また、文字を点滅できるblinkもありますが、IEはサポートしていません。これらの値は半角スペースで区切って複数指定することもできます。装飾を取り消す場合は、「none」を指定します。

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	.type1 { text-decoration:underline;}
            .type2 { text-decoration:line-through;}
            .type3 { text-decoration:underline overline;}
    	</style>
    

HTML

    	<p class="type1">文字の下に下線を引く</p>
    	<p class="type2">文字に取り消し線を引く</p>
        <p class="type3">文字の上下に線を引く</p>