また、 Mac OS ( X ) 版の圧では、欧文フォントを指定する場合、 LANG 属性 ="en" ( P. 114 参照 ) を付加しておかないとフォントが切り替わらないようです。同じく safari で は、日本語フォントを指定すると、うまく切り替わらない場合かあります。 K N ロ W L E D G E ■複数のフォントを指定する font-family 属性には、カンマで区切ることでフォントを複数指定することができま す。ユーサによっては指定したフォントを所持していない場合があるので、フォントを複 数指定しておくことで、意図しないフォントで表示させるのを防ぐことができます。この ロ とき、最初に指定したフォントほど優先順位が高くなります。 T E X T . honbun { font-fami1y:"MS P ゴシック " "MS ゴシック ",sans-serif L 一 S T 田 A C K G R ロ LI N D ■ Windows のシステムフォントを指定する 正 5 以降のブラウサの場合、 Windows のシステム上で使われている、アイコンやステ ータスパーに設定されているフォントを指定することができます。フォント名と機能は以 下の通りです。 フォント名 caption B ロ X 機能 オブジェクトに指定しているフォントを指定する アイコンに指定しているフォントを指定する に on メニューに指定しているフォントを指定する menu message-box メッセージボックスに指定しているフォントを指定する status-bar ステータスパーに指定しているフォントを指定する P ロ S ITI ロ N T A B L E R E L A T E D P. 112 く FONT FACE="—"> p . 3 8 0 font ロヨ工 E R 366

FONT3-1 ・フォントを指定する 0 . font3 { font-family K N ロ W L E D ロ E " Os a k a " "MS UI Gothic" く / STY L E > く /HEAD> く BODY BGCOLOR="#CCFF99" TEXT = れ # 000000 " > く P CLASS="font1" LANG="en">An apple a day keeps the dOCtO 「 away く /P> く P CLASS="font2" LANG="en">An apple a day keeps the dOCtO 「 away く /P> く P CLASS="font3" > りんこを食べると医者要らすく / P > く / BODY> く /HTML> T E X T F ロ N T B A C K ロ R ロ匚 N D 機能 font-famiIy:"MS P ゴシック " 指定されたフォントで文字を表示する フォント名※ -1 font-family:sans-serif 指定されたフォントの種類で文字を表示する 総称フォント名※ -2 特徴 総称フォント名 明朝系のフォント serif ゴシック系のフォント sans-serif 筆記体系のフォント curSlVe 飾り文字 fantasy 等幅フォント monospace ※ - 1 Windows 版 NN4 では、文字コードセットが日本語になっている場合、欧文フォントが切り替わりません。 ※ -2 NN4(Windows 版、 Ma ( intosh 版とも ) では、文字コードセットの指定が日本語になっている場合は正しく動作 しません。また、 Ma ( intosh 版のでは , 総称フォントは動作しません。 入力例 田口 X P ロ 5 IT 一口 N T A L E font-family 属性にフォントを直接入力して指定する場合、フォント名の文字の全 角・半角・大文字・小文字に注意して正確に入力してください。さらに、フォント名にス ペース ( 空白 ) がある場合は、そのまま入力しても適用されません。その場合は、フォン ト名を「 " 」 ( ダブルクオーテーション ) または「・」 ( シングルクオーテーション ) で囲んで指 定する必要があります。 ロヨ工 E R 365

FONT3-8 ■フォント属性を一括で指定する 0 background darkturquoxse く /STYLE> く /HEAD> く BODY BGCOLOR="#FFFFFF" く H2 CLASS="tit1e" LANG= 'en">Yaeyama EXPIO 「 e 「 'sWeb く /H2> く / BODY> く /HTML> K N ロ W L E D G E T E X T F ロ N T 機能 文字を通常の状態にする ( 初期値 ) normal 指定した文字のイタリック体フォントを使用する italic norm 引のフォントを斜体に変形させる oblique 文字を通常の状態にする ( 初期値 ) normal 文字をスモールキャピタルに指定する small-caps 文字を通常の太さにする ( 数値指定の 400 と同じ太さ ) normal 文字の太さを 100 ~ 900 を 100 刻みした、段階で指定 太さの数値 する ( 400 が標準のサイズ ) 文字を太くする ( 数値指定の 700 と同じ太さ ) bo 旧 文字をより太くする bolder 文字をより細くする lighter 文字の大きさを数値で指定する フォントサイズの数値※ -4 文字の大きさをキーワードで指定する キーワード ブラウザ側で高さを指定する ( 初期値 ) normal 行の高さを数値で指定する 行の高さの数値※ -4 指定されたフォントで文字を表示する フォント名※ -5 指定されたフォントの種類で文字を表示する 総称フォント名※ -6 冖 font:italic 20PU700 Comic Sans Ms ※ -1 safari では日本語フォントは斜体で表示されません ※ -2 NN4 は、対応していません。 ※ -3 Windows 版の 5 以前、 Mac OS 版の 4 以前、および Safa ⅱは対応していません。 ※ -4 数値の単位には、 mm 、 cm 、 in 、 pt 、 pc 、 em 、 ex 、 px が利用できます。 ※ -5 Windows 版 NN4 では、文字コードセットか日本語になっている場合欧文フォントが切り替わりません。 ※ -6 NN4 では、文字コードセットが日本語になっている場合、総称フォント名は正しく動作しません。 また Mac OS 版のに 4 は総称フォントに対応していません。 属性 font-style BA 冂 K ロ R ロ匚 N D font-variant font-weight B ロ X P ロ S IT 一口 N font-size line-height T A B 「 E font-family F 一「 T E R ロ T 工 E R 3 日 1

flipv O/false l/true float left right none font font-style font-valiant font-size ⅱ ne-height font-family font-family フォント名 総称フォント名 font-va lia nt oblique italic no 「 m font-style font-size キ - ワード 数値 gray enabled grad ienttype endcolorstr sta 「 t ( OlO 「 st 「 Gradient enabled strength ( OIO 「 60W lig hter bo 旧 e 「 bo 旧 数値 font-weight small-caps 画像や文字を垂直に反転する フィルタを実行しない フィルタを実行する テキストの回り込みを設定する 要素を左側に配置し、続く要素を右側に回り込ませる 要素を右側に配置し、続く要素を左側に回り込ませる 左右への配置と回り込みをしない フォント属性を一括で指定する 文字を斜体にする 文字をスモールキャピタル指定する 文字の大きさを指定する 行送りを変更する フォントを指定する フォントを指定する 指定されたフォントで文字を表示する 画像を白黒写真にする フィルタを実行するかどうかを設定する グラデーションの向きを指定する グラデーション終了時の透明度と色を設定する グラデーション開始時の透明度と色を設定する 画像や文字にグラデーションをかける フィルタを実行するかどうかを設定する 1 ~ 255 までの整数でにじみの強さを設定する にじみの色を設定する 画像や文字を発光しているように見せる 文字をより細くする 文字をより太くする 文字を太くする 文字の太さを 100 ~ 900 ( 100 段階すっ ) で指定する 文字を通常の太さにする 文字の太さを指定する 文字をスモールキャヒ。タル指定する 文字を通常の状態にする 文字をスモールキャピタル指定する no 「 m のフォントを斜体に変形させる 指定した文字のイタリック体フォントを使用する 文字を通常の状態にする 文字を斜体にする 文字の大きさをキーワードで指定する 文字の大きさを数値で指定する 文字の大きさを指定する 指定されたフォントの種類で文字を表示する 518 519 5 1 9 474 475 475 475 380 381 381 381 381 381 364 365 365 369 370 370 374 375 375 375 376 377 377 372 373 373 373 373 373 513 514 514 514 540 541 541 541 541 523 621

FONT4-I ■フォントの種類を指定する 0 く TITLE> 英語のことわざく /TITLE> CONTENT="text/htm1; く META HTTP-EQUIV="Content-Type" Zcharset=Shift JIS"> く /HEAD> く BODY BGCOLOR="#FFFF99"> く P> く IMG SRC="tit1e . gif" WIDTH="413" HEIGHT="70"> く /P> く HR> く FONT FACE="Impact" SIZE="5">Byothe 「 sfaults wise men CO 「「 ectthei 「 own く /FONT> く P > 意味 : 他人の欠点から賢者は自分の欠点を直すく / P > く FONT FACE="Impact" SIZE="5">Onefoot is bette 「 thantwoc 「 utches く /FONT> く P > 意味 : 一本足でもニ本の松葉杖に勝るく / P > く HR> (C) 2003 英語で学ほうことわざ協会 く / BODY> く /HTML> K N ロ W L E D G E S TR 匚ロ T 匚 R E T E X T F ロ N T T A B L E 機能 文字の色を指定する 1 6 進数または カラーネーム 表示するフォントを指定する フォント名 文字の大きさを指定する 士数値 基準となる文字の大きさとの 相対的な大きさを指定する 属性名 COLOR 入力例 く FONT COLOR="red" <FONT FACE="Arial" <FONTSlZE="6"> <FONT ZE = " + 2 “ > F R A M E FACE ※ -1 SIZE 一 M A ロ E 共通属性 P. 14 参照 ※ - 1 Mac OS 版のでは、欧文フォントが正しく選択されない場合があります。 また safa ⅱでは、日本語フォントがうまく切り替わらない場合があります。 ■フォント指定の注意点 Windows では、 MS 明朝、 MS ゴシック、 MS p 明朝、 MS P ゴシックなどが一 般的に使用されるフォントです。 p のつかないものは等幅フォント、 P のつくものはプロ ボーショナル ( 幅が調整される ) フォントを意味しています。 Offi ( e などアプリケーショ ンをインストールすると使用できるフォントが増えることがありますが、誰もが使用でき るとは限らないので、選択には注意してください。 F ロ R M ロ B 」 E 冂ョ 1 1 3

またフォント名は、スペースを含めて正確に入力しないと反映されません。特に日本語 フォントでは、名前に含まれるアルファベットが全角の場合と半角の場合がありますので、 注意しましよう。 Mac OS ( X ) 版のにでは、 <META > タグによる文字コードの指定が日本語になってい ると、欧文フォントが切り変わりません。その場合 ( ほとんどの場合だと思いますが ) 、 次のように LANG 属性で " en " を指定して要素の中身が欧文であることを明示してやる と、反映されるようになります。 く FONT FACE="Impact" LANG="en">One foot is better than two crutches く /FONT> また Safari は、日本語に関する実装が甘く、場合によっては日本語フォントを指定して も切り替わらないことがあります。これについては現在のところ、対処方法がありません。 K N ロ W L E D G E S TR 匸ロ T 〔 R E T E X T F ロ N ョ T A B L E ■複数のフォントを指定する 指定したフォントがインストールされていなかったとき、あるいは異なる OS のユーザ のために、複数のフォントを指定しておくことができます。複数指定した場合は、先に記 述されているフォントから優先的に使用されます。 く P> く FONT FACE="MS ゴシック " ) " Osaka " > 大滝自然公園く / FONT > く / p > く P> く FONT FACE="M S 明朝 " , " 平成明朝 " > 大滝自然公園の山林地帯では、野生の鹿や熊などのさ まざまな動物が生息しています。これらの動物の中には、天然記念物として保護されているものもあります。 く /FONT> く /P> F R A M E 一 M A G E R E L A T E D >p. 364 参照 font ー family F ロ R M ロ B E ロ T

3-1 S E ロ TI ロ N 3 : F ロ N T フォントを指定する Ⅷ ( 0 IMAC ( 04 枩亟 ]CS 寘 font-family K N ロ W L E D G E font-family 属性は、文字列を表示するフォントを指定します。見出しにはゴシック 系のフォント、本文には明朝系のフォントというように、文章の見え方を設定することが できます。フォントを指定するときには、フォント名を直接指定する方法と、明朝系 (serif) ・ゴシック系 ( sans - serif ) といった総称フォント名で指定する方法があります。 F ロ N T ユりんこを食べると医者要らす一 Microsoft lnternet Explorer 回区 L 一 S T ファイル ( 日偏集 ( 日表示 C'J) お気に入りツールヘルプ旧 ) An a 叩佃 a 曲 y st れ 6 曲供町 away An 叩 p 厄 0 day keeps the doctor away りんこを食べると医者要らす 朝ページが表示されました BA 冂 K G R ロ IJ N D フォントの種類を 指定できる 、」イントラネット B ロ X S ロ LJ R C P ロ S IT 一口 N く HTML> く HEAD> く TITLE > りんこを食べると医者要らずく / T 工 TLE > く META HTTP-EQUIV="Content-Sty1e-Type" CONTENT="text/css"> く STYLE TYPE="text/css"> . fontl { font-family font - S 1 Z e T A B L E F 一 L T E R lmpact; 24px . font2 { font-family font -size ロヨ工 E R "Comic Sans MS" 24px 0 364

S E ロ T ーロ N 4 : F ロ N T フォントの種類を指定する Ⅷ e4 公Ⅱ MAC ( 04 肉亟住 <FONT FACE= ・ K N ロイく L E D G E S T R 匚 CT 匚 R E インライン要素 く FONT > タグの FA ( E 属性を使用すると、テキストの表示に使用するフォント ( 書体 ) の種類を指定することができます。 ただし、指定したフォントがインストールされていない場合は、ブラウサに設定されて いる標準フォントで表示されます。また、 Windows 同士、 Mac os 同士でも、 os のバ ージョンやアプリケーションによって使用できるフォントが異なる場合もあります。した がって、見る人によってレイアウトや見え方が極端に崩れないよう、フォントの種類の指 定は、最小限にとどめておいた方がよいでしよう。 T E X T F ロ N ョ TA B 「 E ユ英語のことわざー Microsoft lnternet Exp10rer 英語のことわざを学ほう 回区 ファイルの編集 ( 印表示 ) お気に入り ) ツールヘルプ ( 旦 ) F R A M E BY 0t れ s faults wise men correcttheir own 意味 : 他人の欠点から者は自分の欠点を直す On 師 00 ⅱ s than tWO crutches 意味 : 一本足でもニ本の松葉杖に勝る ℃ ) 283 英語で学はうことわさ協会 ページが表示されました 指定したフォントで表示される 一 M A ロ E 」マイコンビュータ F ロ R M ロ B J E ロヨ く ! DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitiona1//EN" Z"http://www.w3 ・ org/TR/REC-htm140/100se . dtd"> く HTML> く HEAD> 0 1 1 2

3- 日 S E C T ーロ N 3 : F ロ N T フォント属性を一括で指定する ( 寘 font K N ロ W L E D G E font 属性を利用すると、フォントに関連する属性を一括して設定できます。フォント のスタイル・スモールキャピタル・サイズ・太さ・行間・フォントの種類の指定をまとめ ることができます。 T E X T F ロ N ョ ユ Yaeyama ExpIorer's Web ー Microsoft lnternet Exp10rer ファイル ( 日編集 ( 印表示お気に入り囲ツール (1) ヘルプ ( 旦 ) 「一 S T 石財ス EA 0 秋姥石 8 BA C K G R ロ LJ N D 朝ページが表示されました 」マイコンビュ→ フォントの各種属性を一括で指定できる B ロ X P ロ S 一 TI ロ N S ロ凵 R C E く HTML> く HEAD> く TITLE>Yaeyama ExpIo 「 e 「 's Web く /TITLE> く META HTTP-EOUIV="Content-Sty1e-Type" CONTENT="text/css"> く STYLE TYPE="text/css"> . title { font C010r text-align border-bottom border-top F 一「 T E R italic Sma11-Caps bold 2em sans-serif; white; center; 5px SOIid mediumseagreen; 5px SOIid mediumseagreen; ロ T 工 E R 0 3 日ロ

3-15 3-16 3-17 3-18 4-2 4-3 4-4 4-6 4-7 4-8 4-9 H 〒 M L 5-8 4-1 1 4 ー 10 5-6 5-4 H T M L 5-18 5-17 5 ー 16 5-15 5-14 5-13 5-12 5-10 H T M L 文字にルビをふる・・ リストを作成する・・ 番号つきのリストを作成する 定義リストを作成する・ フォントの種類を指定する フォントの大きさを指定する 文字色を指定する・・ 文字を一回り大きくしたり小さくしたりする フォントの基準を設定する 文字を上付・下付で表示する 文字に下線を引く・・ 文字を太字にする・・ 文字を斜体にする・・ 等幅フォントで表示する 文字に打ち消し線を引く S E ロ T ーロ N 4 : F ロ N T S E CTI ロ N 5 : TA 日 L E 表を作成する 表のサイズを指定する・ 外枠の幅や余白を設定する 枠線の色を指定する・・ 表の位置を指定する・・ 表の行を設定する・・ 表のセルのデータを設定する 行や列に見出しをつける・ セル内のデータの表示位置を指定する・ セル内のテキストの折り返しを禁止する・ セルの大きさを設定する・ 表の背景色を指定する・ 表の背景に画像を使用する 表のセルを連結する・・ 表にキャプションをつける 表のヘッダ・フッタ・本体をグループ化する 列をグループ化して属性をまとめて設定する 複数の列の属性をまとめて設定する・・ S E CTI ロ N 6 : F R A M E フレーム表示領域を設定する ・・ 100 ・・ 102 ・・ 104 ・・ 107 ・・ 123 ・・ 1 2 5 ・・ 127 ・・ 129 ・・ 1 33 1 3 5 ・・ 1 36 ・・ 140 ・・ 142 ・・ 144 ・・ 146 ・・ 149 ・・ 153 ・・ 1 56 ・・ 159 ・・ 1 65 ・・ 167 ・・ 169 ・・ 1 72 ・・ 174 ・・ 178 ・・ 182