トップページ作成　～ フォントの種類設定 ～

CSS を使って、文書の書体を設定します。１つのフォントだけでなく、代用できるように複数のフォントを設定します。

ページ全体のフォントの種類を設定する

［スタイルエクスプレス］を起動する

➊ ページtop.htmlを開きます。ページ編集領域内をクリックします。

➋［スタイルエクスプレス］ビューを起動する

• ビューにある［スタイルエクスプレス］アイコンをクリックする。
  • 
• ▶［スタイルエクスプレス］ビューが表示される。

［スタイルエクスプレス］ビュー

➌ body タグへのスタイル ルール作成を起動する。

• ［スタイルエクスプレスビュー］の［カーソル位置］タブを選択する。
  • 
• body タグにルール新規作成を起動する
  • 
  • ①［body］タグを右クリックして、②［ルールの新規作成］を選択する。

• ►［ルールの追加］ダイアログが表示される。

［ルールの追加］ダイアログボックス

• CSS ファイルを選択し、スタイル設定するタグを指定
  • 
  • ［ルールの追加］ダイアログボックスで、❹ルールの追加をするファイルを選択する。ここでは先に作成した外部 CSS ファイルstyle01.cssを選択する。❺追加するルールの［タグ］が［body］になっていることを確認し、［OK］ボタンをクリックする。

❹ ルールの記述をするファイルを選択します。

• ここでは先に作成したCSS ファイルstyle01.cssを選択します。

❺［タグ］が［body］になっていること、［属性も設定する］にチェックが入っていることを確認し、［OK］ボタンをクリックする。

• ▶［外部CSSファイルの更新確認］ダイアログが表示される。

• ［外部CSSファイルの更新確認］ダイアログ
  • 
  • 外部CSSファイルに指定されているスタイルを変更すると、スタイルを元に戻せない。そのことの確認を求められる。

❻［はい］ボタンをクリックする。

• ▶このあと、［スタイルの設定］ダイアログが表示される。

［スタイルの設定］ダイアログボックス

❼ フォントのスタイル設定を開始する。

• ［スタイルの設定 - body］ダイアログボックスが表示されるので［フォント］タブを選択します。
  • 
  • ［フォント］タブを選択する。［フォントの候補］ボックスにフォント名を入力し、たくさんのフォントリストから絞り込むことになる。

❽ フォントの絞りこみ

• ［フォントの候補］ボックスにフォント名あるいはフォント名の頭文字を入力し、絞り込みます。
  • 
  • ❽絞り込みに「メイリオ」と入力したので絞り込まれたフォント候補が表示される。❾絞り込まれたフォントのリストから該当のフォントを選択する。ここでは「メイリオ」を選択する。❿［追加］ボタンをクリックすると、選択されたフォントは、［使用するフォント］に移動する。

❾ 絞り込まれたフォントのリストから該当のフォントを選択します。

• ここでは「メイリオ」を選択します。

❿［追加］ボタンをクリックします。

• ▶フォントが追加されます。

⓫ 他のフォントも追加します。

• フォントの追加
  • 
  • ⓫他のフォントを追加する。ここでは「ＭＳ Ｐゴシック」を追加する。ボックスに直接「ＭＳ Ｐゴ」と入力する。この時英字は全て全角にし、空白文字は半角とする。表示されるフォントから「ＭＳ Ｐゴシック」を選んで［追加］ボタンをクリックする。［使用するフォント］に選択したフォント名が追加される。

⓬［OK］ボタンをクリックします。

• ［使用するフォント］への追加が完了したら、［OK］ボタンをクリックする。
  • 
• ▶［ページ編集］画面に戻る

フォントが設定されます

• ［スタイルエクスプレス］ビューの下部パネル
  • 
  • 設定されたスタイルは、［スタイルエクスプレス］ビューの下部パネルで確認できる。

［スタイルエクスプレス］ビューでの詳細情報

• ［カーソル位置］パネル下部でのルール詳細情報
  • 

設定したフォントの種類を変更する

設定したスタイルを変更するには、［スタイルエクスプレス］ビューの［カーソル位置］パネル下部の詳細情報を右クリックすることでスタイル設定を起動することができます。

• 設定したスタイルの再編集を起動する
  • 
  • 再編集するスタイルを右クリックし、［セレクタ（body）の編集］をクリックすることで、再編集が起動される。

設定された CSS を確認する

• CSS ソースを表示してスタイルの設定を確認する。

➊ CSS エディターを起動してCSS ソースを表示します。

• ［スタイルエクスプレス］ビューで外部 CSS ファイルの編集を選択する
  • 
  • ①［スタイルエクスプレス］ビューの［スタイル構成］パネルで、外部 CSS ファイルを右クリックする。ここでは、<link>styles/styles01.css の行を右クリックする。
  • ②コンテクストメニューで［編集］を選択する。
• CSS エディターが起動するので、スタイル記述を表示する。
  • 
  • ③左側ビューで、タイプセレクタ傘下の［body］を選択すると、④右側ビューには設定されているスタイル記述が表示される。
  • ⑤記述内容を以下にて確認する。

• 解説
  • body に対し、font-family プロパティでフォントを指定している。
  • 複数指定した場合は、前から順番に探し、見つかったフォントで表示する。空白を含むフォント名の時だけは " " で囲まれる。上の例では、ＭＳ Ｐゴシックが半角の空白を含むフォント名である（ＭＳＰの英字は全角）。
  • 詳細は文字フォントの指定を参照する。

次に中央に配置に進みます。