文字のフォントを指定する

h1 {
	color: #006600;
	font-weight: bolder;
	font-family: fantasy;
}

font-family: fantasy;がフォントを指定しています。

このCSSの「どうしたいか」の部分をいくつか紹介しましょう。

・sans-serif:ゴシック体
・serif:明朝体
・monospace:等幅フォント
・fantasy:装飾体
・curisive:手書き風

日本語の文字だと分かりにくいですが、英数字だとその違いがわかりやすいです。

また、これは見ている人のパソコンに入っているフォントの中から、CSSの指定に合ったものを選ぶ仕組みなので、見ている人それぞれで違う風に表示されている、ということが十分に考えられます。

例えば、


のように、「Web」の文字のフォントが顕著に変わっていますが、あなたのパソコンでもこのように表示されるとは限らないわけです。

今、style.cssと表示画面はこんな感じです。



関連記事

  1. 今までにやったことを用いて、見出しを装飾する

  2. 大見出しをつける

  3. タグへ対する装飾

  4. ブロックの余白を指定する

  5. コンテンツ部分をデザインする

  6. FFFTPをダウンロード

お手本ナビの無料HPデザイン

ランダムピックアップ