ウェブデザイナー募集 ホームページ作成HOME

ホームページ作成講座HAC Design

CSS フォント

CSS フォントの装飾

CSSでレイアウトをする場合フォントの装飾はHTMLで直接行ないません。
今までHTMLでのフォントの装飾は<font color="red"></font>という形で、指定していました。

CSSでフォントのレイアウトをする場合は<font>タグは使いません。

セレクタタグでフォントの色やスタイルを指定したり、さらに部分的に使用したい場合は、class指定で行ないます。たとえば、<p class="red">赤い文字にしたい文章</p>などを使うか、HTMLに直接定義する場合は<p style="color: red">赤い文字にしたい文章</p>という使い方をします。

ある程度使いたい文字色などが決まっていれば、CSSに組み込んでおくのがいいでしょう。

文字色などのスタイルを下記に例としてあげます。

.red {color: red; font-weight: normal}
.redb {color: red; font-weight: bold}
.redl {color: red; font-weight: bold; font-size: 16px}

classセレクタをつかって指定する場合の書き方です。

これをHTMLの文書に反映させるとこんな感じになります。

<p class="red">で囲った文字

<p class="redb">で囲った文字

<p class="redl">で囲った文字

CSSでのフォント色の指定方法

CSSでは2種類の方法が一般的な色の指定方法です。

【数値で指定】

#000000 など#で始まる数字とアルファベットで表示される色。 例【color: #F0027F】
#FFF など3行で表示されるものがあります。 例【color: #000】

【色の名前で指定】

red blue yellow などのカラーネームで指定。 例【color: red】 

CSSでフォントサイズの指定

フォントのサイズの指定は、px(ピクセル)などの単位で指定する場合と、x-smallなどでのキーワードで指定することができます。HTMLでは<font size="2">などで囲ってフォントのサイズを指定していましたが、CSSの場合はフォントの色の指定と同様classセレクタを使います。

px(ピクセル)などの単位で指定する場合はブラウザで文字を大きくすることができないので、あまり小さなサイズにしないように注意しましょう。

また、ブログ場合、文字のサイズ指定はx-smallなどでのキーワードで指定されていることが多いです。キーワードで指定されていてもpx(ピクセル)などの単位に置き換えても構いません。

文字の大きさの基準は下記のとおり。

キーワード 文字の大きさ 実際のフォントサイズのサンプル
xx-small <font size="1">と同じサイズ xx-smallのフォントサイズ
x-small <font size="2">と同じサイズ x-smallのフォントサイズ
small <font size="3">と同じサイズ smallのフォントサイズ
medium <font size="4">と同じサイズ mediumのフォントサイズ
large <font size="5">と同じサイズ largeのフォントサイズ
x-large <font size="6">と同じサイズ x-largeのフォントサイズ

CSSでフォントを指定する

フォントは、いくつもの書体があります。見出しにはゴシック体、本文には明朝体など、フォントの種類をかえることによって、文字による印象を変えることが可能です。

それは font-family としてCSSで指定できます。

プロパティ値備考 実際のフォントのサンプル
serif 明朝体のフォント あいうえおかきくけこ ABCDEFG
sans-serif 明朝体のフォント あいうえおかきくけこ ABCDEFG
cursive 筆記体のフォント あいうえおかきくけこ ABCDEFG
fantasy 装飾的なフォント あいうえおかきくけこ ABCDEFG
monospace 等幅フォント あいうえおかきくけこ ABCDEFG

フォントだけでかなりホームページの印象を変えることができます。
タイトル名や見出しタグなど、使い分けてみるのもいいですね。

CSSでフォントの指定を変更するのは簡単なイメージチェンジにもなります。

いろいろなフォントの色、書体、サイズを変更してみばわかりますが、
フォントだけでホームページをより読みやすく、よりインパクトを与えることも可能です。

是非フォントを使い分けれるようになってください!


CSSの基礎知識
CSS・スタイルシートとは
ブログのCSS
CSSでレイアウト 書き方編
CSSでレイアウト 実践編
CSSポイントレイアウト
CSS フォント
CSS テーブル
CSS ロールオーバー
CSS 背景
CSS margin
CSS float
あると便利!
CSS エディター
FireFoxとCSS
CSSのお勧め書籍
リファレンスHOME
ウェブサイトHOME