ホームページの入り口“トップページ”を自由に作ってみましょう。トップページは、自分のホームページのテー マや内容が明解かつ個性的に伝わるように工夫しましょう。
トップページを保存する
ページタイトル設定、
背景 / 文字色設定をする
文字入力、文字サイズ / 書式
変更をする
メイン画像を
挿入する
メニューボタンを
作成する
罫線を挿入する
①デスクトップ上にある【ホームページ・ ビルダー】をクリック。
自分なりのテーマと構成を決めて、
トップページを作りましょう。
あなたは
どんなホームページを
作りますか？
自分が発信したいホームページのテーマとアイデアは身近にたくさんあります。自分の趣味やクラブ活動、サークルな■ページタイトルと背景を作る
かんたんナビバーの［新規作成］を クリックします。 1 5 10 15 20 25 30 35 ［白紙から作成する（B）］を選びます。 編集領域が白くなったことを確認し ます。 かんたんナビバーの［ページの属性］ をクリックすると、ページのプロパ ティを設定するための画面が表示さ れます。 ［ページ情報］タブの［ページタイト ル（P）］にタイトルを入力します。 タイトルとは作成した本人が一見 して分かるよう漢字、かな、カタ カナで記入し、ファイル名は英数半角文字 で記入するのが一般的です。 トップページのタイトル（例：ひかるの部 屋）、トップページのファイル名（例：index. html）。引き続き、背景や文字の色を決める 方法を選びます。 ［背景 / 文字色］タブをクリックし、 ［カラー ギャラリー（G）］をクリッ クします。 カラーギャラリーからページ内の背 景や文字色の組み合わせを選べます。 ［色のカテゴリ（C）］から好きな色 を選び（例：黄色）、［背景と文字色 の組み合わせ（B）］から好きな組み 合わせを選び、［
OK
］をクリックし ます。 ［背景 / 文字色］タブの画面に戻り ますので、［OK］をクリックします。 1 5 10 15 20 25 30■文字を入力、文字サイズ / 色 / 書体を変える
トップページのタイトル文と挨拶文 を入力します。 ナビメニューの［文字の挿入］をク リックすると、文字の挿入領域が表 示されます。 タイトル文（例：ひかるの部屋）を 入力します。 中央に配置するためにツールバーか ら［中央揃え］をクリックします。 続いて挨拶文です。ナビメニューの ［文字の挿入］をクリックします。 文字を入力します。（例：私のホーム ページへようこそ［改行（Enter
）］ 高校１年生ひかるのおしゃべりにお つきあいください。） 挨拶文も中央に配置したいので、ツ ールバーから［中央揃え］をクリッ クします。 タイトル文をタイトルらしくするた めに、文字サイズを変更します。 タイトル文をダブルクリックして文 字が反転したことを確認したあと、 ツールバーの［ （文字サイズ拡 大）］をクリックします。クリックす るごとに文字が大きくなります。 文字が大きくなりすぎたときは右隣 りの［ （文字サイズ縮小）］をク リックします。 1 5 10 15 20 25 30 35 ツールバーのアイコンにマウスのポインター ( ) を当てると、そのボ タンがどんな機能を持っているかが自動的に表示されますので、自分の やりたいことが確認できるとともに、いろいろなボタンの機能を自然と 覚えていくことができます。文字の色 / 書体を変更してみましょう。 まず変更したい文字が選ばれて、反 転していることを確認してください。 反転していない場合は文字をダブル クリックすると反転します。 ツールバーの［ （フォントの変 更）］をクリックすると、フォントの 色 / サイズ / 書体を変更するための 画面が表示されます。 ［色指定（
C
）］のバー（上から２つ目） をクリックし、［その他（O
）］をク リックすると、色設定の詳細なパレ ットが表示されます。 その中から好きな色を選んで［OK
］ を ク リ ッ ク し て く だ さ い。（ 例： #ff8000） ［書体（F）］の項目の中から好きな 書体を選んでください。［▼］をクリ ックしてスクロールさせ好きな書体 を見つけましょう。（例：MS P ゴシ ック） 最後に［OK
］をクリックし、 編集画面に戻ったら、反転している タイトル文を元に戻すため、タイト ル文の枠外で一度クリックします。 1 5 10 15 20 25 30■トップページに画像を入れる
画像ファイルを選ぶ画面が表示され ますので、イラスト素材のフォルダ の中から好きな画像を探し出して、 選んだ画像（例：hikaru.gif）をクリ ックし、［開く（O
）］をクリックし ます。 画像を中央に配置するため、ツール バー内の［中央揃え］をクリックし ておきます。 ナビメニューの［写真や画像の挿入］ をクリックし、［ファイルから］を選 びます。 自分らしい個性を出すために画像を入れてみます。 1 5 10 15 20 25 30 35 画像を選ぶ方法としては、画面右端の ［フォルダ］タブをクリックし、イラス ト素材のフォルダを開き、その中から 画像を選ぶこともできます。 また、選びたい画像を間違った場合や、 画像を変更したい場合は、メニューバ ーの［編集（E）］から［元に戻す（U）］を 選ぶと、選ぶ前の画面に戻すことがで きます。※上記フォルダ、および画像は、サンプルです。お手持
ちの画像から、好きな画像を選択してください。素材集
から選択する場合は、手順①で「素材集から」を選択し
てください。
■サブページのメニューを作る
ナビメニューの［文字の挿入］を クリックして、空白の文字挿入枠 が表示されているのを確認したあ と、ナビメニューの［写真や画像の 挿入］をクリックして［ファイル から］を選び、好きな画像を選ん で［開く（O
）］をクリックします。 （例：mark.gif） 自分のホームページにどのようなサブページがあるのかを、メニューで伝えましょう。 続いてサブページのテーマを入力し ます。（例：趣味） そして［改行］により新しい行を作成 し、引き続き“日記”と“アンケート” のメニューを入力してください。 バランスと使いやすさを考えて、［中 央揃え］を忘れずに！ 1 5 10 15 20 25 30※上記フォルダ、および画像は、サンプルです。お手持
ちの画像から、好きな画像を選択してください。
メニューの文字をダブルクリックし て文字を反転させ、ツールバーの ［ （フォントの変更）］をクリッ クして、［文字装飾］の中から［太字 （B）］にチェックをつけて（ ）、［
OK
］ をクリックします。同様に、“日記”、 “アンケート”も太字に変更します。 1 5 10 15 20 25 30 35■トップページを飾る
タイトル文と挨拶文の間にカーソル を移動し、ナビメニューの［レイア ウト部品の挿入］をクリックし、［水 平線］を選びます。「水平線の挿入」 画面が表示されますので、そこで線 の太さと幅を決めます（例：太さ 6 ピクセル、幅 60%）。水平線に模様 を付けるため、［水平線に模様をつ ける（A）］にチェックをつけて（ ）、 ［ファイルから（F
）］をクリックし ます。 イラスト素材のフォルダの中から水 平線（例：sima.gif）を選んで［開 く（O
）］をクリックします。 ［水平線に模様をつける（A）］の入 力欄に、選んだ（例：sima.gif）が 見栄えを良くし、ページ全体のレイアウトを引き締めるため、水平線を挿入します。 1 5 10 15 20 25 30同様にして、ページ下部にも水平線 を挿入しましょう。 1 5 10 15 20 25 30 35 水平線の太さや幅を間違った場合や、変更したい場合は、該当する水平 線上を右クリックし、［属性の変更（A）］を選んで、数値を変更できます。 ただし、模様は変更できません。模様まで変更したいときは、該当する 水平線をクリックし、メニューバーの［編集（E）］から［元に戻す（U）］を 選んで水平線を消去し、最初からやり直してください。
ページは自分専用のフォルダに保存 します。そのために新しいフォルダ を用意しましょう。 かんたんナビバーの［上書き保存］ をクリックし、［保存する場所（I）］ で新しいフォルダを用意する場所を 選びます。［■新しいフォルダの 作 成］ボタンをクリックして新しいフ ォルダを作成し、フォルダ名を書き 換えます（例：hikaru_hp）（英数半 角文字）。 自分用のフォルダの名前に変わった ら、そのフォルダをダブルクリッ クします。［保存する場所（I）］の フォルダが自分のフォルダ名（例： hikaru_hp）に変わっていることを確 認します。これから作成するサブペ ージもこのフォルダに保存します。 続いて、［ファイル名（N）］が 「newpage1.html」になっています ので、トップページのファイル名で あることが分かる文字（例：index. html）を入力し、［保存（
S
）］をク リックます。■トップページを保存する
次の作業としてサブページを用意するため、完成したトップページを保存します。 1 5 10 15 20 25 30「素材ファイルをコピーして保存」画 面が表示されています。そのまま［保 存］をクリックしてトップページを 保存します。 1 5 10 15 20 25 30 35 ホームページのしくみで、ホームページは１つの HTML ファイルと複数 の素材ファイルで構成されている説明をしました。そのことがこの画面 を見れば分かります。
