Homepage Zero ガイド
logo

ゼロから始めよう！わかりやすい！ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホーム＞HTMLリファレンス（アルファベット検索）＞fontプロパティ

CSSプロパティ辞典
タグ一覧（ABC順） 目的別タグ一覧 スタイルシート一覧（ABC順） 目的別スタイルシート一覧

font プロパティ …フォントに関する設定をまとめて指定する

使用プロパティ

CSSプロパティ

font: 値;

対象となる
要素

すべて

継承

する

値

フォント関連のプロパティの値を半角スペースで区切って並べる。（並べ方）または、OSにもともとあるシステムフォントを表すキーワードを指定する。詳しくは次項（値と働き）を参照してください。
対応ブラウザ IE6 WinFireFox WinSafariFireFox MacIE5 macOpera

解説

font プロパティを使えば、フォントに関連するプロパティと line-height プロパティの値をまとめて指定することができます。 指定できる６つのプロパティは、 font-style プロパティ、 font-variant プロパティ、 font-weight プロパティ、 font-size プロパティ、 line-height プロパティ、 font-family プロパティの値です。

font プロパティに指定する値には以下のようなルールがあります。
- 並べ方 -

font: ① style variant weight ②size/③line-height ④family ;

※style はfont-style プロパティ、 variant はfont-variant プロパティ、weight はfont-weight プロパティ、 size はfont-size プロパティ、line-height はline-height プロパティ、 family はfont-family プロパティの値を示しています。

このような順序で指定し、①の順序は自由で、③のline-height プロパティの値を指定する場合は②のfont-size プロパティの後に指定し、②と③間に「/」（スラッシュ）を記述します。
そして、font-size プロパティとfont-family プロパティは必ず記述することになっています。その他は省略可能となっています。

値と働き

値 働き 値 働き
フォントに関連するプロパティ 前項を参照してください。 caption ボタンなどのキャプションに使われるフォントで表示する。
icon アイコンのラベルに使用されるフォントで表示する。 menu メニューで使用されるフォントで表示する。
message-box ダイアログボックスで使用されるフォントで表示する。 small-caption 小さな部品のラベルで使用されるフォントで表示する。
status-bar ステータスバーに使用されるフォントで表示する。

使用例

記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>

<!--スタイルシート-->
<style type="text/css">

p.sample1 {
font: bold 1.5em/1.5 sans-serif;
}

p.sample2 {
font: italic 120% serif;
}

</style>
</head>

<!--ページの本文-->
<body>

<p class="sample1">-sample1-<br>HOME PAGE ZERO ガイド</p>

<p class="sample2">-sample2-<br>HOME PAGE ZERO ガイド</p>

</body>
</html>
↓
[ブラウザでの表示例]
HOME PAGE ZERO ガイド

-sample1-
Home Page Zero ガイド

-sample2-
Home Page Zero ガイド

関連情報ページ

△ページトップへ

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

<TOP>
logo
ゼロから始めよう！わかりやすい！ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|
copyright (C) TOMIY All Right Reserved
inserted by FC2 system