3 STEP 第 章 Web サイトとトップページの作成 3 作成するトップページを確認する 1 作成するトップページの確認 基本的な機能を使って、次のようなトップページを作成しましょう。 ●index.html 文字サイズの変更 中央揃え 書体の設定 見出しの設定 文字サイズの 変更 太字 書体の設定 文字色の設定 箇条書きの 設定 文字サイズの変更 右揃え この章では、 トップページを作成します。 トップページ (index.html) 新規講座紹介 (new.html) 講師紹介 (koushi.html) 43 講座一覧 (kouza.html) イベント紹介 (event.html) 教室案内 (class.html) 4 STEP Webページの属性を設定する 1 Webページの属性の設定 1 新規にW ebページを作成したら、 最初に、 ページタイトルやページ言語、 文書型宣言などの ページ情報、 ページの基本色となる背景色や文字色といったWebページの属性を設定します。 2 ページ情報の設定 2 3 ページタイトルやページ言語、文書型宣言を設定します。 ●ページタイトル 4 のことです。このタイトルは、Webページに書かれている内容を端的に表す言葉にします。 5 「ページタイトル」とは、ブラウザーでWebページを表示したときにタブに表示される言葉 ●ページ言語 「ページ言語」とは、日本語や英語など、Webページ内の本文に使用する言語のことです。 ページ言語を設定しておくと、音声ブラウザーで正しくWebページの内容を読み上げられ るため、読み間違いを防止でき、アクセシビリティが向上します。 ※アクセシビリティについては、P.162「第7章 STEP3 Webページの使いやすさをチェックする」を参照 してください。 6 7 ●文書型宣言 8 れているかを宣言するものです。 「DOCTYPE」ともいいます。 9 「文書型宣言」とは、 Webページの先頭に、 WebページがどのHTMLのバージョンで記述さ ※文書型宣言については、P.260「第9章 参考学習 2 Webページの構造」を参照してください。 Webページのページタイトルとページ言語、DOCTYPEを次のように設定しましょう。 ページタイトル：日比谷カルチャーセンター ページ言語 ：日本語 DOCTYPE ：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> （DOCTYPEは、 HTML4.01で推奨されている要素や属性だけを使う） ①《編集》をクリックします。 11 12 13 総合問題 ②《ページの属性》をクリックします。 10 解答 索引 44 《属性》ダイアログボックスが表示されます。 ③《タグ》が《ページのプロパティ》になって いることを確認します。 第 章 Web サイトとトップページの作成 ④《ページ情報》タブを選択します。 ⑤《DOCTYPE》の 3 をクリックし、一覧か ら《<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ strict.dtd">》を選択します。 ⑥《ページタイトル》に「日比谷カルチャーセ ンター」と入力します。 ⑦《ページ言語》が「日本語」になっているこ とを確認します。 ⑧《OK》をクリックします。 タイトルバーに「index.html（日比谷カル チャーセンター）-日比谷カルチャーセンター* ＜標準モード＞」 と表示されます。 ※Webページの編集中は、タイトルバーに「＊」が表示 されます。 POINT ページタイトル ブラウザーで「お気に入り」や「ブックマーク」にWebページを登録するとき、 《ページタイトル》の内容 がそのまま反映されます。 その他の方法 （Webページの属性の設定） STEP UP ◆ （属性の変更）→《ページのプロパティ》 ◆ページ編集領域を右クリック→《属性の変更》→《ページのプロパティ》 ◆ 45 ＋ →《ページのプロパティ》 POINT HTML5対応 《D O C TY P E》の一覧から「< ! D O C TY P E h t m l >」を選択すると、We bページの文書型宣言が HTML5になり、WebページがHTML5で記述されます。 1 3 背景色と文字色の設定 2 W e bページを作成する場合にどのような色を使っていくかをひとつずつ考えるのは大変 です。背景の色や文字の色、 リンクの色など、色を設定する要素はたくさんあります。好き な色ばかりを設定していると、全体の統一感や見やすさなどがおろそかになってしまう場 合もあります。 ホームページ・ビルダー19クラシックでは、あらかじめいくつかの色を組み合わせた「カ ラーギャラリー」が用意されているので、簡単に統一感のある配色でWebページを作成で きます。 Webページの基本色となる文字や背景などの色を設定しましょう。 ①《編集》をクリックします。 ②《背景/文字色の設定》をクリックします。 3 4 5 6 7 8 9 10 《属性》ダイアログボックスが表示されます。 ③《タグ》が《ページのプロパティ》になって いることを確認します。 ④《背景/文字色》タブを選択します。 ⑤《カラーギャラリー》をクリックします。 11 12 13 総合問題 解答 索引 46 《カラーギャラリー》ダイアログボックスが 表示されます。 ⑥《色のカテゴリ》の一覧から《白》を選択し 第 章 Web サイトとトップページの作成 ます。 ⑦《背景色と文字色の組み合わせ》の一覧 3 から図の配色を選択します。 ⑧《OK》をクリックします。 《属性》ダイアログボックスに戻ります。 ⑨《色指定》の《背景》 《文字》 《リンク》 《既 読リンク》 《選択リンク》が指定した配色 になっていることを確認します。 ※ の右側に指定した色のR G B値が表示され ます。 ⑩《OK》をクリックします。 基本色が設定されます。 POINT オリジナルの色にする オリジナルの色を設定する方法は、 《色指定》の各項目の をクリックし、パレットから色を選択し ます。パレットに好みの色がない場合は《その他》をクリックし、 《色の設定》ダイアログボックスから選 択します。 POINT RGB値 We bページを作成するとき、色を「赤（R）」 「緑（G）」 「青（B）」の3色の割合で指定する方法があり ます。これを「RGB」といい、画面上で色を表現するのに適した方法です。 RGBの色を画面上に表現するときに使う値が「RGB値」です。RGB値で3色の割合を指定するには、 「＃（シャープ）」に続けて、赤（R）、緑（G）、青（B）の各色の分量を「00」から「ff」の2桁ずつで指定 します。色の明暗は「0123456789abcdef」の16進数で表し、 「00」が最も暗く、 「ff」が最も明 るくなります。 #○○ ○○○○ 赤 47 緑 青
© Copyright 2026 Paperzz