02 フォントの指定


 このページではフォント(書体)の指定をしてみましょう。

 フォントの指定をしなければ、次のように指定したことになります。

サイズ3
書体MS Pゴシック
スタイル標準

 フォントを指定をする文字の前後を <FONT> </FONT> で囲み、<FONT の後ろに半角スペースを空けて指定するタグを記述します。

 では【ホームページ作成の第一歩】で作成したページに表示された文字「私のホームページ」にフォントの指定をしましょう。

  1. index.html をダブルクリックして画面を表示します。

  2. 「メニューバー」の「表示」→「ソース」とクリックをして「メモ帖」に記述された「ソース」を表示します。

  3. 私のホームページ の前に <FONT SIZE="6" FACE="MS 明朝" COLOR="#FF0000"> 、後ろに </FONT> を記述します。



    <HTML>
    <HEAD>
    <TITLE>初めてのホームページ</TITLE>
    </HEAD>
    <BODY>
    <FONT SIZE="6" FACE="MS 明朝" COLOR="#FF0000">私のホームページ</FONT>
    </BODY>
    </HTML>




  4. 次は「スタイル」の「太字」と「斜体」を指定するタグ <B><I> </I></B> を「私のホームページ」の前後に記述します。



    <HTML>
    <HEAD>
    <TITLE>初めてのホームページ</TITLE>
    </HEAD>
    <BODY>
    <FONT SIZE="6" FACE="MS 明朝" COLOR="#FF0000"><B><I>私のホームページ</I></B></FONT>
    </BODY>
    </HTML>




  5. 入力が終わったら、→「ファイル」→「上書き保存」とクリックして、→「メモ帳」を閉じます。

  6. ブラウザの「更新」アイコンをクリックします。文字が変わりましたか?

    文字が大きくなり、書体が変わり、赤い色になったでしょう。
 では、フォントを指定するタグの説明をしましょう。

サイズSIZE=" の次に 1 から 7 までの数字を入れ、" で閉じます。

1 が最小、3 が標準、7 が最大です。サイズの指定をしなければ 3 で表示されます。
書体FACE="MS 明朝" のように FACE=" の後に 書体名を入れ、" で閉じます。

あなたのパソコンにインストールされているフォントは、「メモ帳」の「メニューバー」の「編集」→「フォントの設定」とクリックすると、→「フォント名」欄に表示されます。

指定したフォントがホームページを見る人のパソコンにインストールされていない場合は他の書体で表示されます。使用する書体は一般的なものを指定しましょう。
COLOR="#FF0000" のように"#"の後に6桁の英数字(16進数)を入れ、" で閉じます。

カラーサンプルは、ここをクリックしてご覧ください。

16進数の説明は、ここをクリックしてご覧ください。

COLOR="red" のように英語の色名でも指定できます。この場合は頭の # は不要です。
スタイル<FONT SIZE="5" FACE="MS 明朝" COLOR="#D5008B"><B><I>私のホームページ</I></B> のように表示する文字を <I> と </I> で囲います。

<B>太字</B>
<I>斜体</I>
<U>アンダーライン</U>

<FONT SIZE="6" FACE="MS 明朝" COLOR="#FF0000"><B><I><U>「私のホームページ」</U></I></B></FONT> のように複数のスタイルタグを用いることができます。

 文字のサイズ、書体、色、スタイルを、いろいろと変えて表示してみましょう。