[フォント] ([スタイル ビルダ] ダイアログ ボックス)
更新 : 2007 年 11 月
[スタイル ビルダ] ダイアログ ボックスの [フォント] ページでは、カスケード スタイル シート (CSS) のフォント属性を定義できます。これらの属性を HTML 要素に直接適用することも、CSS スタイル規則に追加することもできます。
フォント属性をページの HTML 要素のテキストに直接適用するには
HTML デザイナのデザイン ビューで HTML ドキュメントを開き、書式を指定するテキストを選択します。
[書式] メニューの [スタイル] をクリックし、[スタイル ビルダ] ダイアログ ボックスを表示します。
[スタイル ビルダ] ダイアログ ボックスの左側のペインで [フォント] をクリックします。
右側のペインに [[フォント] ([スタイル ビルダ] ダイアログ ボックス)] が表示されます。
デザイン ビューで選択されているテキストにフォント スタイルを適用すると、ページの HTML マークアップにスタイル属性がインラインで挿入されます。HTML ビューに切り替えて、挿入された新しいスタイル属性を確認します。
外部スタイル シートで定義された CSS スタイル規則にフォント属性を追加するには
既存の外部スタイル シートを開き、該当するスタイルのセレクタに続く中かっこ ({ }) の中にカーソルを移動します。
[スタイル] メニューの [ビルド スタイル] をクリックし、[スタイル ビルダ] ダイアログ ボックスを表示します。
[スタイル ビルダ] ダイアログ ボックスの左側のペインで [フォント] をクリックします。
右側のペインに [[フォント] ([スタイル ビルダ] ダイアログ ボックス)] が表示されます。
.gif "メモ") メモ : |
|---|
[スタイル] メニューは、外部 CSS スタイル シートを開いて編集するときに表示されます。スタイル ルールのセレクタに続く中かっこの中にカーソルを移動すると、[スタイル] メニューの [ビルド スタイル] オプションを使用できるようになります。 |
CSS スタイル セレクタを目的の要素の CLASS プロパティとして割り当てると、外部スタイル シートで定義されている CSS スタイル クラスを Web ページの <BODY> 要素内の要素 (この場合は <BODY> 要素自体) に適用できます。
[スタイル ビルダ] ダイアログ ボックスの [フォント] ページでは、次のオプションを使用できます。
処理手順
UI 要素
[フォント名]
[ファミリ]
このスタイルで表示されるテキストに使用するフォントの選択項目の一覧が用意されます。インターネット用のドキュメントをデザインしている場合は、ユーザーの多くが使用しているフォントを選択してください。インターネットにはさまざまな閲覧者がいて、多くの種類のフォントをインストールしている人だけとは限りません。[ファミリ] を選択した場合は、その横にある省略記号ボタン (...) ボタンをクリックして [フォント ピッカー] ダイアログ ボックスを表示し、フォントを選択できます。詳細については、「[フォント ピッカー] ダイアログ ボックス」を参照してください。一般的には、フォントの一覧を作成し、その中から選択できるようにします。たとえば、[フォント ピッカー] で Verdana (Web 表示用にデザインされた Windows システム フォント) を選択し、手作業で Arial、Helvetica (Macintosh ブラウザ用)、および Sans-Serif (一覧にあるフォントを持たないユーザー用の汎用フォント) を追加できます。この場合、FONT-FAMILY の CSS スタイル マークアップは、次のようになります。FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
[システム フォント]
このオプションを選択すると、スタイルでは、ページが表示されているユーザーのコンピュータで定義されたシステム フォントの選択項目が適用されます。たとえば、[ウィンドウ キャプション] を選択した場合、スタイルで書式化されたページのテキストが Web ブラウザで表示されるときに、表示しているコンピュータの [ウィンドウ キャプション] に割り当てられているフォントが使用されます。[ウィンドウ キャプション] で指定するこのフォントは、あるコンピュータでは Times、別のコンピュータでは Verdana になります。CSS スタイル マークアップには、[ウィンドウ キャプション] システム フォントが適用されます。例は次のとおりです。FONT: caption
[フォント属性]
[色]
スタイルで表示されるテキストの色を設定します。色を指定するには、次のような方法があります。色名を入力します。
有効な RGB カラーの値を入力します。たとえば、#FF0000 は赤です。
ドロップダウン リストでオプションを選択します。
省略記号ボタン (...) をクリックして [カラー ピッカー] ダイアログ ボックスを表示し、追加する色を選択します。
たとえば、赤を選択すると、次のような CSS の属性と値のペアが挿入されます。
COLOR: red
メモ :ドロップダウン リストではなく [カラー ピッカー] ダイアログ ボックスで色を選択した場合は、色名の代わりに 16 進形式の RGB カラー値が挿入されます。たとえば、[カラー ピッカー] ダイアログ ボックスで赤を選択すると、次のような CSS の属性と値のペアが挿入されます。COLOR: #ff0000
[斜体]
このスタイルで表示されるテキストの FONT-STYLE 属性を設定します。[<設定なし>] (オプションを選択しない)、[標準] (イタリック体にしない)、または [斜体] のいずれかを選択します。たとえば、[斜体] を選択すると、次のような CSS 属性と値のペアが挿入されます。FONT-STYLE: italic
メモ :属性が [<設定なし>] の場合、コードはスタイルに追加されません。Italics 属性は、システム フォントに適用できません。
[小型英大文字]
このスタイルで表示されるテキストの FONT-VARIANT 属性を設定します。[<設定なし>] (オプションを選択しない)、[標準] (小文字サイズの大文字にしない)、または [小型英大文字] のいずれかを選択します。たとえば、[小型英大文字] を選択すると、次の CSS マークアップが挿入されます。FONT-VARIANT: small-caps
メモ :Small Caps 属性は、システム フォントに適用できません。属性が [<設定なし>] の場合、コードはスタイルに追加されません。
[サイズ]
Specific、Absolute、または Relative という 3 つの属性のうちの 1 つを使用して、スタイルのフォントのサイズを設定します。
| メモ : |
|---|
属性が [<設定なし>] の場合、コードはスタイルに追加されません。Size 属性は、システム フォントに適用できません。 |
[特定サイズ]
フォントの特定のサイズを設定します。横のドロップダウン リストには、px、pt (既定)、pc、mm、cm、in、em、ex、% などの単位オプションが表示されます。たとえば、「20」と入力し、既定の単位を受け入れた場合は、次の CSS マークアップが挿入されます。FONT-SIZE: 20pt
メモ :属性が [<設定なし>] の場合、コードはスタイルに追加されません。ピクセル単位で書式化されたテキストは、表示サイズよりもかなり小さく出力されるため、ピクセル (px) は使用しないでください。
[絶対サイズ]
フォントの絶対表示サイズをオプションの一覧で選択して設定します。[<設定なし>] (値を指定しない)、[最小]、[より小さく]、[小]、[中]、[大]、[より大きく]、または [最大] のいずれかを選択します。たとえば、[より小さく] を選択すると、次の CSS マークアップが挿入されます。FONT-SIZE: x-small
メモ :属性が [<設定なし>] の場合、コードはスタイルに追加されません。
[相対]
フォントの相対表示サイズをオプションの一覧で選択して設定します。サイズは、カスケード スタイルの親を基準にします。たとえば、<BODY> 要素のテキストを 8pt、<BODY> 要素の <SPAN> 要素内のテキストを [より小さく] に指定した場合、<SPAN> テキストは 8pt.より小さくなります。[<設定なし>] (値を指定しない)、[より小さく]、または [より大きく] を選択してください。たとえば、[より大きく] を選択すると、次の CSS マークアップが挿入されます。FONT-SIZE: larger
メモ :属性が [<設定なし>] の場合、コードはスタイルに追加されません。
[効果]
スタイルに定義済みの効果を設定します。[なし] (効果なし)、[下線]、[取り消し線]、および [重線] チェック ボックスを使用できます。
[なし] を選択した場合、効果は利用できません。[なし] を選択しない場合は、それ以外の効果を任意に組み合わせて選択できます。たとえば、[下線] と [取り消し線] を選択すると、次の CSS マークアップが挿入されます。
TEXT-DECORATION: underline line-through
[太字]
このオプションは、[絶対サイズ] または [相対] の値に基づいて、FONT-WEIGHT 属性を設定します。
[絶対サイズ]
スタイルの絶対太字属性で、フォントに関連付けられている太字属性を指定します。[<設定なし>] (オプションを選択しない)、[標準] (太字にしない)、または [太字] のいずれかを選択します。たとえば、[太字] を選択すると、次の CSS マークアップが挿入されます。FONT-WEIGHT: bold
メモ :Absolute Bold 属性と Relative Bold 属性は、システム フォントに適用できません。
[相対]
スタイルの相対太字属性で、フォントの既定の太字値を基準に濃さが異なる太字属性を指定します。[<設定なし>] (オプションを選択しない)、[細く] (既定の太字よりも細い太字)、または [太く] (既定の太字よりも濃い太字) のいずれかを選択します。Lighter 属性と Bolder 属性は、個別のフォントを基準とするため、太字の濃さは適用されているフォントに応じて異なります。たとえば、[太く] を選択すると、次の CSS マークアップが挿入されます。FONT-WEIGHT: bolder
[大文字/小文字の設定]
スタイルに TEXT-TRANSFORM 属性を設定します。[<設定なし>] (オプションを選択しない)、[なし] (入力されたとおり)、[先頭文字のみ大文字]、[小文字形式]、または [大文字形式] のいずれかを選択します。たとえば、[大文字] を選択すると、次のコードが追加されます。
TEXT-TRANSFORM: uppercase
| メモ : |
|---|
属性が [<設定なし>] の場合、コードはスタイルに追加されません。 |