スタイル適用前
見出しスタイル適用後
① 前のステップからの XHTML ページを 「ページ編集」 で開きます。
② 文字列 ”見出し1です 見出し1です" をクリックしフォーカスします。
③ 「タグ一覧」 ビューで、文字列 ”見出し1です 見出し1です" を内容とする h1 タグを選択し、右クリックします。
④ 表示されるポップアップメニューから <ルールの新規作成...> をクリックします。
「ルールの追加」ダイアログが表示されます。
⑤ <追加するルール> では、[タグ] にチェックが入り、<テキスト入力フィールド> には "h1" が入力されていることを確認し、<追加する場所> は外部スタイルシートファイルを選択し、[OK] ボタンをクリックします。
「スタイルの設定 - h1」 ダイアログが表示されます。
⑥ タグ h1 のスタイルを設定します。
⑦ 「OK」 ボタンをクリックします。
スタイルが適用された XHTML ページが 「ページ編集」 で表示されます。
⑧ 「上書き保存」 をクリックします。
この時点でブラウザでの見え方は hpb65_sample01.html のようになります。
⑨ 文字列 ”見出し2です 見出し2です" をクリックしフォーカスします。
⑩ 「タグ一覧」 ビューで、文字列 ”見出し2です 見出し2です" を内容とする h2 タグを選択し、右クリックします。
⑪ 表示されるポップアップメニューから <ルールの新規作成...> をクリックします。
「ルールの追加」ダイアログが表示されます。
⑫ <追加するルール> では、[タグ] にチェックが入り、<テキスト入力フィールド> には "h2" が入力されていることを確認し、<追加する場所> は外部スタイルシートファイルを選択し、[OK] ボタンをクリックします。
「スタイルの設定 - h2」 ダイアログが表示されます。
⑬ タグ h2 のスタイルを設定します。
⑭ 「OK」 ボタンをクリックします。
スタイルが適用された XHTML ページが 「ページ編集」 で表示されます。
⑮ 「上書き保存」 をクリックします。
この時点でブラウザでの見え方は hpb65_sample02.html のようになります。
⑯ 文字列 ”見出し3です 見出し3です" をクリックしフォーカスします。
⑰ 「タグ一覧」 ビューで、文字列 ”見出し3です 見出し3です" を内容とする h3 タグを選択し、右クリックします。
⑱ 表示されるポップアップメニューから <ルールの新規作成...> をクリックします。
「ルールの追加」ダイアログが表示されます。
⑲ <追加するルール> では、[タグ] にチェックが入り、<テキスト入力フィールド> には "h3" が入力されていることを確認し、<追加する場所> は外部スタイルシートファイルを選択し、[OK] ボタンをクリックします。
「スタイルの設定 - h3」 ダイアログが表示されます。
⑳ タグ h3 のスタイルを設定します。
㉑ 「OK」 ボタンをクリックします。
スタイルが適用された XHTML ページが 「ページ編集」 で表示されます。
㉒ 「上書き保存」 をクリックします。
この時点でブラウザでの見え方は hpb65_sample03.html のようになります。
㉓ 文字列 ”見出し4です 見出し4です" をクリックしフォーカスします。
㉔ 「タグ一覧」 ビューで、文字列 ”見出し4です 見出し4です" を内容とする h4 タグを選択し、右クリックします。
㉕ 表示されるポップアップメニューから <ルールの新規作成...> をクリックします。
「ルールの追加」ダイアログが表示されます。
㉖ <追加するルール> では、[タグ] にチェックが入り、<テキスト入力フィールド> には "h4" が入力されていることを確認し、<追加する場所> は外部スタイルシートファイルを選択し、[OK] ボタンをクリックします。
「スタイルの設定 - h4」 ダイアログが表示されます。
㉗ タグ h4 のスタイルを設定します。
注1:ホームページ・ビルダーに付随している画像を使います。エクスプローラで、Cドライブ → Program Files → IBM Homepage Builder V14 → Sample → Image → bullet → bullet199.gif で見つけます。
㉘ 「OK」 ボタンをクリックします。
スタイルが適用された XHTML ページが 「ページ編集」 で表示されます。
[背景画像] と [背景色] を両方指定した場合、背景色が反映されない場合
[背景画像]を挿入し、また[背景色]も指定した場合、背景色がプレビュー (および Internet Explorer ブラウザ) で表示されないことがあります。この時展開されているスタイルシートでは、背景色の指定の記述 (background-color) が背景画像の指定の記述 (background-image) の前に記述されています。
回避策は、背景色の指定の記述 (background-color) を背景画像の指定の記述 (background-image) の後に記述します。
当ステップの場合は、次の3つの background の記述が示された順になるように、CSS エディタを使って直接 CSS ファイルを編集し直す必要があります。
㉙ 「上書き保存」 をクリックします。
この時点でブラウザでの見え方は hpb65_sample04.html のようになります。
㉚ 文字列 ”見出し5です 見出し5です" をクリックしフォーカスします。
㉛ 「タグ一覧」 ビューで、文字列 ”見出し5です 見出し5です" を内容とする h5 タグを選択し、右クリックします。
㉜ 表示されるポップアップメニューから <ルールの新規作成...> をクリックします。
「ルールの追加」ダイアログが表示されます。
㉝ <追加するルール> では、[タグ] にチェックが入り、<テキスト入力フィールド> には "h5" が入力されていることを確認し、<追加する場所> は外部スタイルシートファイルを選択し、[OK] ボタンをクリックします。
「スタイルの設定 - h5」 ダイアログが表示されます。
㉞ タグ h5 のスタイルを設定します。
㉟ 「OK」 ボタンをクリックします。
スタイルが適用された XHTML ページが 「ページ編集」 で表示されます。見出しの左側にボーダーで作られたマークが入ります。
㊲ 「上書き保存」 をクリックします。
この時点でブラウザでの見え方は hpb65_sample05.html のようになります。