font-familyで書式を変更

ここでは、スタイルシートの「font-family」のプロパティを使用して、例の見出し4に文字の形を指定する方法を解説します。

font-family

文字には様々な書式があります。これを一般的には「font」(フォント)と言います。一般的には何も指定しなければ、ブラウザの標準フォントが適用されます。これを変更するには、スタイルシートで「font-family」というプロパティを使用して変更できます。スタイルシートを以下のようにします。(赤線が追記部分)

h4.samplecolor {
color: #FF0000;
font-size: 14px;
padding: 1px 0px 0px 28px;
background: url("images/sample_h4.gif") no-repeat left center;
height: 23px;
font-family: "MS P明朝";
}

font-family」のプロパティで「MS P明朝」というフォントを値として指定しています。font-familyで指定する値は、ダブルクォーテーション(")で囲みましょう。また、指定したフォントが閲覧するパソコンに入っていない場合は表示出来ずに指定していない状態と同じ表示になります。複数フォントを指定する場合は、カンマで区切りましょう。では、実際に動作を見てみましょう。

見出し4

今までの書式を指定していなかった状態と比べてみましょう。

見出し4

おわかり頂けますでしょうか?文字の書体、font(フォント)が違います。

次は「font-weightで文字の太さ」です。

一番上に戻る

この「初めてのホームページ作成」の分類には以下のページがあります。

  1. ホームページとは
  2. ホームページ作成に必要なもの
  3. 拡張子の変更方法
  4. 拡張子「.html」ファイルの作成方法
  5. HTMLのルール
  6. HTMLタグ一覧表
  7. スタイルシートとは
  8. スタイルシートの書き方
  9. 文字を赤、下線、14ピクセル
  10. 色を16進数の#RRGGBBで求める
  11. カラーピッカー comin
  12. marginで空間作成
  13. paddingで空間作成
  14. backgroundで背景に画像
  15. font-familyで書式を変更現在のページ
  16. font-weightで文字の太さ
  17. スタイルシートのプロパティ一覧
自作パソコンのキモ

ここより下はホームページに関するメニュー

ここより下はホームページに関するメニュー

ここより下は自作パソコン基礎&組み立てメニュー

ここより下はパソコンを納得して選ぶにはメニュー

ここより下はレンタルサーバーに関するメニュー


スマフォ時代にWiMAXが熱い!キャッシュバック有りの月額3,880円。クレードル(1,490円)も買えば、家では据え置きの一台二役で家ネットもパケット定額も解約出来る!?