こちらでは簡単格安ホームページ作成サイト - FunMaker[ファンメイカー]で作成したホームページの文字フォントに対してのデザイン変更方法を解説します。
![CSSマニュアル:文字フォント - FunMaker[ファンメイカー]](https://funmaker.jp/img/css-m/ippan/zentai/moji-font/home.jpg)
対象セレクタとCSSプロパティ
FunMakerにおいて、文字フォントを指定するセレクタは、『body』になります。背景変更するにはCSSプロパティに『font-family: 値;』を記述します。
body { font-family: 値; }
値には『総称名』と『フォント名』があり、『総称名』の場合はそのまま値に入力しますが、フォント名の場合は『'フォント名'』と『'』を左右に入力します。いくつか並べたい場合は、『, 』の後に次の値を入力します。
body { font-family: 総称名; } body { font-family: 'フォント名', 'フォント名'; }
『font-family』の値一覧
『font-family』の値の総称名と代表的なフォント名を紹介します。
総称名
- serif
- 意 味:明朝体のようなヒゲのある書体。
- 文字例:あいうえお。 ABCD abcd 12345
- sans-serif
- 意 味:ゴシック体のようなヒゲのない書体。
- 文字例:あいうえお。 ABCD abcd 12345
- cursive
- 意 味:手書き風の書体。
- 文字例:あいうえお。 ABCD abcd 12345
- fantasy
- 意 味:装飾系のフォント。
- 文字例:あいうえお。 ABCD abcd 12345
- monospace
- 意 味:等間隔の幅になるフォント。
- 文字例:あいうえお。 ABCD abcd 12345
総称で指定した場合、関連する適切なフォント名で表示されます。ただし、"cursive" と "fantasy" については具体的なフォントが割り当てられていないため、指定されても効果がない場合もあります。
確実に表示させるには、まずフォント名をいくつか入力し、最後に総称名を割り当てるのが一般的です。
body { font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; }
フォント名
- ヒラギノ角ゴ ProN W3
- 英数字:ABDCEFG abcdefg 1234567890
- 日本語:あいうえお かきくけこ さしすせそ たちつてと
- メイリオ
- 英数字:ABDCEFG abcdefg 1234567890
- 日本語:あいうえお かきくけこ さしすせそ たちつてと
- Arial
- 英数字:ABDCEFG abcdefg 1234567890
- 日本語:あいうえお かきくけこ さしすせそ たちつてと
- Lucida Grande
- 英数字:ABDCEFG abcdefg 1234567890
- 日本語:あいうえお かきくけこ さしすせそ たちつてと