ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

フォントの種類を変える

フォントの種類を変更するスタイル

フォント(文字)の種類を変えるには、プロパティにfont-familyを指定します。

.font{
font-family:指定するフォント1,フォントの種類;
}

例えば、フォントをMS P明朝に変更したい場合は以下のように記述します。

【CSSの記述例】
.font {
font-family:"MS P明朝", serif;
}
【HTMLの記述例】

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>フォントの種類を変える</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<p class="font">テキストテキストテキストテキスト</p>

</body>
</html>

【ブラウザでの表示】

フォントファミリーの変更

ここで注意しなければならないのが、「フォントは””で囲む」ことと「最後にフォントの種類を指定する」ことです。

フォント指定の注意事項

フォントを指定する際には、必ず”と”でフォントを囲み、スペースやスペル、全角・半角などの表記を正確に入力する必要があります。
また、最後にフォントの種類を入力します。

なお、フォントを指定する際には数種類、予備候補フォントを指定しておくことをオススメします。

予備候補フォントとは

.font {
font-family:"MS P明朝", "ヒラギノ明朝 Pro W3", serif;
}

例えば指定したフォントが自分のパソコンにインストールされていても、他の人のパソコンにはインストールされていない可能性もあります。
このような場合、フォントがインストールされていないパソコンでは正常に表示することが出来ません。

そこで、指定したフォントが無い場合、候補2、候補3のフォントを準備しておきます。

予備フォントを用意する

これで、仮に指定したフォントがインストールされていないパソコンでホームページを表示した場合でも、他の候補フォントが自動的に選択され、指定したイメージを大幅に崩すことなく表示することができます。

指定したフォントがない場合、予備フォントが使用される

なお、どの候補フォントもインストールされていない場合、ブラウザ標準のフォントで表示されます。

フォントの種類と分類

フォントの種類は、大まかに以下の5つに分類されます。

種類 分類 系列のフォント
serif 明朝系 MS明朝、MS P明朝、Garamond、MS Georgia、Times New Romanなど
sans-serif ゴシック系 MSゴシック、中ゴシック、Arialなど
cursive 筆記体・続け文字 caflisch script、ex pontoなど
fantasy 装飾体 critter、studzなど
monospace 等幅フォント Osaka-等幅、courier、Courier Newなど

※日本語テキストにcursiveを指定していると、希に正常に表示できない場合があります。

覚えておきたいポイント

一括変更の方法

ホームページ全体のフォントを一括で変更するには、bodyにfont-familyを指定するとOKです。

[記述例]

body{
font-family:指定するフォント
}

文字の装飾
« 前のページへ 文字の大きさを変える

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。