はじめてのホームページ · 1.2. ホームページの作り方 HTMLなどの技術的な知識を持たない個人がホームページを作るには、大きく分けて3通りの方法があ

はじめてのホームページ

（ホームページ・ビルダー）

明治大学

教育の情報化推進本部

(和泉)

はじめてのホームページ（ホームページ・ビルダー）

1

目次

1. はじめに ....................................................................................................................................................... 2

1.1. この講習会でマスターすること .................................................................................................................... 2

1.2. ホームページの作り方 .................................................................................................................................. 2

1.3. HTML とタグ ............................................................................................................................................... 3

1.4. ページ公開の仕組み ...................................................................................................................................... 4

1.5. ホームページ・ビルダー21 の紹介 ............................................................................................................... 5

2. コンテンツ（素材）の作成 ........................................................................................................................... 6

2.1. 準備 ............................................................................................................................................................... 6

2.2. ホームページ・ビルダー21 の起動 ............................................................................................................... 7

2.3. 新たにページを作成する .............................................................................................................................. 7

2.4. ページを保存する ......................................................................................................................................... 9

2.5. ページにタイトルを付ける ......................................................................................................................... 11

2.6. 文字の入力（見出しの作成） ..................................................................................................................... 12

2.7. 文の入力（段落の作成） ............................................................................................................................ 13

2.8. 文字のフォント（書式）の変更 .................................................................................................................. 14

2.9. 水平線の入力 ............................................................................................................................................... 16

2.10. 壁紙の挿入 ................................................................................................................................................ 16

2.11. リンクの設定 1 （ページ内のリンク） ..................................................................................................... 18

2.12. リンクの設定 2（URL を指定） ............................................................................................................... 21

2.13. 画像の挿入 ................................................................................................................................................ 22

2.14. ページの保存（画像ファイルも合わせて保存する） ............................................................................... 24

3. 付録 ............................................................................................................................................................ 25

A. 表の挿入 ........................................................................................................................................................ 25

B. ロゴの作成 ..................................................................................................................................................... 25

C. 箇条書きの作成 ............................................................................................................................................. 27

D. サイト機能を使ってホームページを作成する .............................................................................................. 27

E. ヘルプ ............................................................................................................................................................ 32

・本テキスト内に取り上げた商品名・サービス名等は、それぞれ各社の商標または登録商標です。

・本テキストは「Windows 10」と「ホームページビルダー21 クラシック」での実習を想定して制作

されています。


2

1. はじめに

1.1. この講習会でマスターすること

1.2. ホームページの作り方

HTMLなどの技術的な知識を持たない個人がホームページを作るには、大きく分けて３通りの方法があ

ります。

(1) ホームページ作成ソフトを利用して作る

(2) Webサービスを利用して作る

(3) テンプレートを利用して作る

それぞれのメリット・デメリットなどを以下に紹介します。

ホームページ作成ソフト Webサービステンプレート

概要

市販ソフトを購入して使う

方法です。初心者向け・プ

ロ向けなど様々なソフトウ

ェアが販売されています。

インターネット上で公開さ

れている「ホームページを

作るサービス」を使う方法

です。

インターネット上で公開さ

れている「無料のテンプレ

ートファイル」を使う方法

です。

メリット

・技術的な知識がなくても

作成できる

・マウス操作で部品を貼り

付けるだけで様々な機能

を追加できる

・たくさんの素材が付属し

ている

・技術的な知識がなくても

作成できる

・テンプレートを切り替え

によりサイトのデザイン

を簡単に変更できる

・作成から公開まで、ブラ

ウザだけで完結できる

・デザイン性に優れたテン

プレートが揃っている

・基本的な構成やメニュー

が最初から完成している

ため、素早く作成できる

・会員登録不要

（サイトによっては必要）

デメリット

・購入にお金がかかる

（特にプロ向けのソフトは

価格が高い）

・ソースがそのソフト流の

記述に修正されるため、

直接編集しにくい

・カスタマイズする場合は

HTMLや CSSに関する知

識が必要

・インターネットに接続し

ていないと使えない

・会員登録が必要

・カスタマイズする場合は

HTMLや CSSに関する知

識が必要

・好みのデザインが見つか

らない場合がある

具体例

・ホームページ・ビルダー

・Dreamweaver

・Expression Webなど

・FC2ホームページ

・Yahoo!ジオシティーズ

・Amebaブログなど

・Flash Natural

・Nikukyu-Punch

・Design Templateなど

◆ホームページの仕組みを理解します

◆ホームページ作成ソフト「ホームページ・ビルダー」を利用して、

自分のホームページをつくります

◆作成したホームページを、明治大学学内のネットワークで公開します


3

※ ３つの方法を併用して作る

上記３つの方法は、併用して使うこともできます。例えば、

① 基本部分は無料テンプレートを利用して作るが、

② 細かい変更やカスタマイズにはホームページ作成ソフトを使う

③ ブログ部分に関しては、Webサービスを利用する・・・といったこともできます。

本テキストでは、「ホームページ作成ソフト」の内容について説明しています。

1.3. HTML とタグ

ホームページは HTML（Hyper Text Markup Language）というテキスト形式のファイルを核として、

ほか画像・音声ファイルなど様々なファイルから構成されています。

HTML ファイルには、文書構造や見栄え、ハイパーリンクなどを指定する、「タグ」と呼ばれる

標識が埋め込まれています。

テキストエディタでタグを直接入力して HTML 文書を作成しようとすると、タグの種類と役割を

理解している必要があります。この講習で使う「ホームページ・ビルダー」は、タグの意味を

知らなくても、マウスの操作でデータにタグを自動的に埋め込みながら、直感的にホームページの

作成が可能なソフトです。

HTML文書の作成 Webブラウザで閲覧

（テキストエディタで作成）（Internet Explorerで閲覧）

タグ


4

1.4. ページ公開の仕組み

ホームページを作成しただけでは、自分のパソコン上でしかそのページを見ることができません。

WWW(World Wide Web・ワールドワイドウェブ)というシステムに基づき、インターネット上のサーバに

データを転送すれば、そのページはインターネットに接続しているどのパソコンからでも閲覧できる

ようになります。

データの所在は、「http://」もしくは「https://」で始まる URL（Uniform Resource Locator）によって、

インターネット上のどこにあるのか表わされます。

駿河台・和泉の利用者がホームページを公開する場合、下記の４つの手順が必要です。

1.リムーバブルディスク等に local_html（学内公開）、または public_html（学外公開）

というフォルダを作成します。

2.そのフォルダの中に、作成したホームページのファイルや画像を保存します。

3.local_html または public_html フォルダを FFFTP ソフト等を利用してサーバに

転送(アップロード)します。

4. web ブラウザ上で下記の URL を入力し、公開されていることを確認します。

公開方法アップロード先転送したデータのURL

「学内のみ公開」 Samba00のlocal_htmlへ http://local.isc.meiji.ac.jp/~ユーザーID/ファイル名

「学外へも公開」 Samba00のpublic_htmlへ http://www.isc.meiji.ac.jp/~ユーザーID/ファイル名

ホームページを公開するに当たっては、「MIND 利用基準」を遵守しなければなりません。

以下のサイトを参照してください。

◆学校法人明治大学総合情報ネットワーク(MIND)利用基準

http://www.meiji.ac.jp/mind/rule/mind-riyoukijun.html

◆MIND 利用上の遵守事項ガイドライン～インターネットを使う上で～

http://www.meiji.ac.jp/mind/guideline/index.html


5

1.5. ホームページ・ビルダー21 の紹介

本テキストでは、ホームページ作成ソフトの中の「ホ―ムページ・ビルダー21」を使用します。

このソフトを使用することで、ホームページ作成の知識がなくてもホームページ作成が可能です。

またホームページ・ビルダー21 には２つのソフトが入っています。

＊ホームページ・ビルダー21 SP

テンプレートを元に様々なパーツを配置していくことで簡単にホームページが作成できるソフトです。

ただし、必ずテンプレートを使用しないといけないため、自由度が損なわれます。

短時間で洗練されたデザインのホームページを作るためには向いています。

＊ホームページ・ビルダー21 クラシック

何もない白紙の状態から自由なホームページの作成ができます。

従来のホームページ・ビルダーの機能をそのまま引き継いだソフトです。

HTML や CSS の編集機能も充実していて、Dreamweaver に引けを取らない仕様です。

※ただし、２つのソフトに互換性はないため注意。

＊本テキストでは主に「ホームページ・ビルダー21 クラシック」を使って、ホームページ作成の基礎を

勉強していきます。

＊ホームページ作成からアップロードまでを行い、今後一人で簡単なホームページが作れるようになるこ

とを目標として作業していきます。


6

2. コンテンツ（素材）の作成

学内用に公開するホームページ（ホームページで表示される文章ファイル・画像・等）の作成を行います。

注意することは、コンテンツ（素材）やフォルダの名前は全て半角英数で入力するということです。

全角・日本語等で名前を入力するとホームページを公開した時に正しく表示されないことがあります。

2.1. 準備

最初に「MyDocs(X：)」に local_html （学内に公開するためのフォルダ）を作成してください。

・上部にある[新しいフォルダ]を左クリック

（またはフォルダ上で右クリック→「新規作成」→「フォルダー」をクリック）

→「local_html」（半角英数）という名前をつける

※ 「 _ 」(アンダーバー) Shift ＋ろろは Enter の左下にあります。

USB メモリなどのリムーバブルディスクの中に local_html を作成することもできます。

以後、作成したページや画像は全てこのフォルダに保存します。

また、サーバへの転送もこのフォルダごと行います。

注意：

一つのフォルダにすべてのコンテンツが入っていないとホームページを更新した時に

画像が表示されないなどの不具合が生じます。

サイト機能の紹介：

ホームページ・ビルダーには、上記でフォルダを作成するのと同じ目的で「サイト作成」という機能を

利用することもできます。サイト作成をするとサイト単位でファイルの読み込みができ、またサイト内の

ファイルのツリー構造が確認できます。詳細は「付録 D.サイト機能を使ってホームページを作成する」を

参考にしてください。

左上のショートカットボタンからフォルダ作成（local_html）

右クリックでフォルダ作成の例


7

起動画面

2.2. ホームページ・ビルダー21 の起動

ホームページ・ビルダー21 を起動してください。

2.3. 新たにページを作成する

(1) 様々な新規作成

①ホームページ・ビルダーが起動します。

②また、「かんたんナビ」が表示されていない場合は、メニューより「表示(V)」→「かんたんナビ(N)」

をクリックします。

④ すると画面が変わり、初めての方には使いやすくなります。

ホームページ・ビルダー21 の起動

かんたんナビ表示後の画面

[表示]から[かんたんナビ]へ

1

2

3

「スタート」ボタンから

→「すべてのプログラム」クリック

→一番下の「ホームページ作成」クリック

→「ホームページ・ビルダー21 クラシック」を

選択して下さい。


8

(2) ホームページビルダーの画面

タイトルバー

かんたんナビバー

メニューバー

ツールバー

かんたんナビメニュー

パレットスタイル

ステータスバー

操作方法は一通りではない

ホームページ・ビルダーの全ての機能は、「メニューバー」から実行できます。

それに加えて、よく使う機能は「ツールバー」などや「ナビメニュー」などに、

アイコンの形で分かりやすくまとめられています。

つまり操作方法は一通りではなく、何通りも存在するということです。

この講習会では、メニューバーからの操作を中心にして、操作方法を説明しています。

ページ編集領域


9

(3) 新規作成

ホームページ・ビルダーでは、様々なホームページの形式を設定することができますが、ここでは、

白紙の状態からホームページを新規作成していきます。

画面内の「ファイル」ボタンをクリックして、「標準モードで新規作成(B)」を選択してください。①

「白紙ページの作成」画面が表示されます。（図 1）

ホームページを編集する領域を「ページ編集領

域」と呼びます。

「ページ編集領域」は、[ページ編集]・[HTML

ソース]・[ページ/ソース]・[プレビュー]の 4

つの表示方法があります。（図 2）

ページを編集するときは[ページ編集] タブを、

実際のページ表示を確認するときは[プレビュ

ー] を、HTML を直接編集するときなどは

[HTML ソース]や[ページ/ソース]を利用しま

す。

標準モードで新規作成

図 1 白紙の新しいページが開く

ページ編集領域

表示タブ

ページ編集

HTMLソース

1

図 2「ページ編集領域」の表示タブ（左）と[ページ/ソース]タブ選択時の表示画面（右）

参考：「フル CSS テンプレート」からの作成「ホームページ・ビルダー」でホームページを作る方法は、真っ新な状態から自由に作成していく方法と、あらか

じめ用意されたテンプレート（ひな形）を元に作成していく方法の 2 つがあり、ここでの「標準モードで新規作

成」は前者の方法となります。ただし、一からデザインの整ったホームページを作るとなると、画像素材の用意、

レイアウトや色彩の設定、文章の作成など、非常に手間がかかるのに対し、テンプレートを用いるとセンスの良い

デザインを土台とした効率的なホームページ作成が可能です。とくに「ホームページ・ビルダー16」には、ページ

内デザインが細かく設定された CSS（Cascading Style Sheet）ファイルとともに構成される「フル CSS テンプレー

ト」が加わっています。現在では Web サイトの多くが CSS ファイルを用いて構成されており、「ホームページ・ビ

ルダー」での作成も CSS テンプレートからの作成が主流にあるといえます。基礎を学んだ後には、この「フル CSS

テンプレート」からの作成にチャレンジしてみましょう。


10

2.4. ページを保存する

「ファイル(F)」メニュー→「名前を付けて保存(A)」を選択します。

2.1. 準備で作成した「local_html」フォルダの中へ、

「 index.html 」という名前を

半角英数で入力して保存してください。

index.html というファイル名について

明治大学のWWWサーバでは、ある閲覧者からアクセスが来た際、URLにサーバ名（例：www.meiji.ac.jp）やディ

レクトリ名（例：www.meiji.ac.jp/kisc/）が指定された場合、つまりファイル名が指定されない場合、index.html または

index.htm というファイルを発信します。これにより、同階層にある他のファイルやディレクトリが丸見えになるのを防

ぐ働きがあります。インターネット上の多くのWWWサーバはそのような設定になっています。トップページ以外の

ファイルには、半角英数であればどのような名前をつけても構いませんが、

「トップページのファイル名は必ず index.html として下さい」

index.htmlファイルがない場合、作成したホームページは、正しくアップロードがされません。

ページに付けるファイル名は必ず半角英数で

パソコンではファイルやフォルダの名前には、アルファベットや数字だけでなく、ひらがな、カタカナ、漢字等様々

な文字を使うことが可能です。しかし、ファイル名に漢字等を使用すると、FTP ソフトによっては正しく表示されない

場合や、ページを公開する際にページ名が文字化けを起こしたり、別の形式の文字列に変換されてしまうことがよ

くあります。よって、ページや画像・写真に付ける

「ファイル名は必ず半角の英数字のみとして下さい」

全角や漢字などの名前をつけた場合、作成したホームページは、正しくアップロードがされません。

名前を付けて保存


11

保存時から何か変更した、編集した場合は“*”マー

クがついています。

保存すると消え、また編集し始めると*が付きます。

2.5. ページにタイトルを付ける

「タイトル」とはホームページ上の名前のことで、Web ブラウザで閲覧した際に「タイトルバー」やタブ

に表示されます。タイトルはページごとに設定できます。「見出し」（本文の文頭）とは異なります。

（見出しは、13 ページで作成します）

画面上何も選択されていない状態で、「編集(E)」①→「属性の変更(A)」②を選択してください。

なお、この操作は、画面右上に

ある「[編集]ツールバー」の

「属性の変更」ボタンからも

行うことができます。

｢属性｣ダイアログボックスの「ページ情報」タブにある「ページタイトル

(P)」に名前を入力し（ここでは、例として「花」と入力します）、

「OK」をクリックしてください。③

ここで入力した文字列が、編集中のページのタイトルになります。④

属性の変更

[編集]ツールバー

例

Internet Explorer で明治大学の公式ウェブ

サイトを閲覧した場合。

ここに表示されるのが「タイトル」です。

1

2

ページタイトルを入力

ページタイトルが表示される

4

3

[編集]ツールバーからの操作


12

2.6. 文字の入力（見出しの作成）

次にページに見出しをつけましょう。「ページ編集」の画面内で適当な個所をクリックしてください。

文字を入力すると、ピンクの「フォーカス枠」が表示され（①）、現在編集している部分（段落）である

ことを示しています。ホームページ・ビルダーではこの枠内の文章が一まとまりのパーツとして扱われ、

枠単位で様々な設定をすることも可能です。

最初に「初めての作成★」と文字を入力してください。

文字を入力したら、〔編集〕ツールバーに表示

されている「属性の変更」ボタンを

クリックしてください。

表示される「段落」の中で「見出し 1」を

選択してください。

すると、選択されている部分の文字が「見出し」の

「レベル１」に設定されます。②

＊「見出し」設定は、文字のフォントや大きさなどを

指定するものではありません。インターネット上で

どのように表示されるかは基本的に各ブラウザ

（InternetExploer、FireFox、GoogleChrome など）の

設定に委ねられています。

通常の文を入力している際に、単純に文字の大きさを

変更したい場合は、「書式」メニューの「サイズ」を

選択し、文字の大きさを変更してください。

なお、この「見出し」の変更の操作は、画面左上の

[書式ツールバー]にあるプルダウンリストからも

同じように変更が可能です。③

標準モードでは画面ではピンクの枠

（どこでも配置モードでは水色の枠）

[書式ツールバー]からの選択でも同じ

属性タグで見出しを設定

1

2

3


13

2.7. 文の入力（段落の作成）

見出しの設定ができたら、通常の文章を入力し

てみましょう。

見出し「初めての作成★」の下をクリックする

か、カーソルの下向き矢印↓キーを押します。

（このとき見出し「初めての作成★」編集時に表示

されていたピンクの枠が消えていることを確認しま

しょう。）

そこに「これからホームページを作ります。」

と入力します。

文字を入力すると、新たにピンクの枠が表示さ

れ、新しい段落で編集していることが確認できます。

注意：下記の文字はコンピューターの機種によって表示できない場合があります。

使用はできるだけ避けましょう。

半角ｶﾅ文字：№ ㏍ ℡ ㍉㌔㌢㍍㌘㌧㌃㌶㍑㍗㌍㌦㌣㌫㍊㌻など

丸付きの数字：①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳㊤㊦㊧㊨など

その他：㈱㈲㈹㍾㍽㍼㍻㎜㎝㎞㎎㎏㏄など

「段落分け」（↓キー）と「改行」（Enter キー）

「段落」は文章の一まとまりで、「行」はその段落内を構成するものです。ホームページ・ビルダーで

編集する際には「段落」と「行」の違いを明確にし、下記の操作も区別しなくてはいけません。

段落分け：下向き矢印↓キーを押す

改行：Enter キーを押す

＊実際に HTML ソース表示をしてみると、段落で囲まれる文章は「<P>…</P>」というタグで囲まれていること、改行し

た箇所には<br>というタグが埋め込まれていることを確認できます。

新しい段落での入力


14

2.8. 文字のフォント（書式）の変更

文字の色や大きさ、形を変更します。

「初めての作成★」の文字列のうち、「作成」の文字だけ大きくし、色を変えてみましょう。

変更したい文字列がある段落をクリックします。①

「作成」の文字列のみを選択（ドラッグ）します。②

メニューの「書式(O)」→「フォント(F)」を選択します。③

「フォント」ダイアログボックスが表示されます。

ここで、色指定やサイズ、書体、文字飾りなどを

変更することができます。

サンプル欄には、変更した場合の文字が表示されます。

④では、「色指定：Red」、「サイズ：+4」、

「文字飾り：斜体」の設定をしています。

サンプル画面で表示を確認した後、

「OK」をクリックしてください。

右図のように文字のフォントの変更ができました。⑤

フォントを選択

1

2 3

4

文字列をクリック

「作成」の文字列のみを選択（ドラッグ）

フォント内容を変更

フォントの変更

5


15

書式ツールバーからの変更

●文字書式の変更：

文字の書式は書式ツールバーにある、以下のボタンでも同様の操作ができます。

左から、「太字」、「斜体」、「取り消し線」（▼をクリックすることで下線なども設定可能）、

「文字サイズ拡大」、「文字サイズ縮小」、「文字色の変更」、「フォントの変更」などの

ボタンが配置されています。

●段落内の文字列配置設定

段落内での文字列の配置についても、書式ツールバーにある、以下のボタンで操作ができます。

左から、「左揃え」、「中央揃え」、「右揃え」となります。

文字を選択する時の注意：

文字列を囲うピンクの「枠」のみが表示されている（段落選択）状態で右クリックし、

メニューの「属性の変更(A)」を選択すると「段落」に対しての属性指定になってしまい、

文字の色や形状の変更はできません。

必ず文字をドラッグ（選択）してからフォント設定を行ってください。

文字の大きさの指定について：

文字の大きさは、１～7 までの数字、あるいは、-2～+4 の割合で指示します。

特に指示がない場合、文字の大きさは３(0)になります。ただし、大きさの違いは

実際にブラウザで表示しないとわかりませんので、注意してください。


16

2.9. 水平線の入力

次は、水平線（区切り線）を引いてみましょう。

（下向き矢印）を一回押してください。

「挿入(I)」メニューの「水平線」を選択してください ①。

これで水平線の入力ができました ②。

なお、かんたんナビ表示時は、画面左側のナビメニューから[レイアウト部品の挿入]をクリックして、

「水平線」を選択することで、水平線の入力を行うこともできます ③。

水平線を選択

1

2

3

水平線の入力

水平線の入力（かんたんナビ表示）

時）


17

壁紙設定後

2.10. 壁紙の挿入

背景にホームページの内容にふさわしい壁紙をつけます。

「挿入(I)」→「画像ファイル」→「素材集から壁紙として」を選択してください ①。

すると、図 3 のように「素材集から開く」ダイアログ

ボックスが開きます。

この中から好きなデザインを選択して「開く」をクリック

します。（今回は wallppr016.gif を選択します）②

背景に壁紙が設定されました。③

図 3 壁紙のデザインを選択

[素材集から壁紙として]を選択

3

2

1


18

2.11. リンクの設定 1 （ページ内のリンク）

(1)リンク先の用意

次はリンクの設定をします。まず初めにリンク先のページを用意します。

リンクとは、複数の文書を結び付ける役割を担う「参照」のことであり、ジャンプ先を指定して別ページ

に行くことを指します。

「ファイル(F)」メニューから、「標準モードで新規作成(B)」を選択し新しい画面を開いてください。

（2.3.(1)の様々な新規作成を参照してください→I8）

これから作成するページは index.html からの

リンク先として用意するページです。

新規画面が開いたら編集領域に

「リンク先のページ」と入力してください。

sub.html という名前を付けて、先程と同じ

「local_html」フォルダ内に保存してください。

（2.1.準備を参照してください）

保存できたら、右側の「ページ一覧」タブを

クリックしてみましょう。①

現在開いているページの一覧が表示されます。

（編集中のページ欄に index.html と sub.html

という２つのファイルが表示されています。）

＊複数のページを開いている場合は、この中から編集したいページを選択することができます。

では、この中の「index.html」をクリックしてください。

ページ一覧 1


19

リンク設定

(2)設定

「index.html」から「sub.html」へファイル移動するためのリンクを設定しましょう。

現在開いている「index.html」の画面上で、先ほど入力した水平線の下に下向き矢印（↓）でカーソルを移

動してください。

そこに、「次のページへ」と入力してください。②

次に、「次のページへ」の部分をドラッグ（選択）します。

（この「次のページへ」のどこかをクリックした時、別のページへ

移動する設定をリンクと言います。）

「挿入(I)」メニューの「リンク(L)」を選択してください。③

「属性」ダイアログボックスで「ファイルへ」タブの「参照」を

クリックして表示されるメニューから、「ファイルから…」を

クリックします。④

「開く」ダイアログボックスが開くので、sub.html を選択し、

「開く」をクリックします。⑤

「属性」ダイアログボックスに戻りますので、

「OK」をクリックします。

すると、先ほど選択した「次のページへ」の箇所に下線が

引かれ、青く表示されます。

これで、リンクの設定ができました。⑥

リンク先の設定

リンクする文字の入力

属性の参照

2

3

4

sub.html をリンク先に選択 5

6


20

正しく設定できたか確認するために「プレビュー」タブ

をクリックしてください。⑦

「プレビュー」タブでは、編集中のページがブラウザで

どのように見えるかを確認することができます。

この画面上で「次のページへ」をクリックします。

この時、先ほど作った sub.html ファイルの画面が表示さ

れれば OK です。

（図 4 のようにリンク部分をポイントすると、

ページ編集領域の上にリンク先のファイルの場所が表

示されます。）

なお、かんたんナビ表示時は、画面左側のナビメニューから

[リンクの挿入]をクリックして、リンクの設定を行うことも

できます。⑧

参考：リンクは文字や画像を選択し、マウスの右クリック→メニュー→「リンクの挿入(L)」を

選択しても同様の設定ができます。

注意：ページ編集を続けるにはページ編集画面に戻ってください。

プレビュー画面では編集することはできません。

図 4 リンクの確認

プレビュー画面でリンク設定を確認

リンクの挿入

（かんたんナビ表示時）

7

リンク先の場所

8


21

2.12. リンクの設定 2（URL を指定）

リンク先にインターネット上の別のホームページを指定することもできます。

ここでは「明治大学へ」の部分にインターネット上の明治大学のホームページをリンクしてみましょう。

「次のページへ」の下に「明治大学へ」と入力をします。

リンクを設定する文字列「明治大学へ」をドラッグして

選択し、右クリックして表示されるメニューから

「リンクの挿入(L)」を選択します。①

「属性」ダイアログボックスが表示されるので、

上部にあるタブから、「URL へ」タブをクリックします。

http(P): にチェックが入っているのを確認し、

URL(R)欄にリンク先の URL を入力してください。

(ここでは、「htttp://www.meiji.ac.jp/」と入力します)

最後に OK をクリックします。②

＊「プレビュー」タブをクリックして、編集中のページでリンク先のホームページに飛べることを確認し

ておきましょう。

なお、かんたんナビ表示時は、画面左側のナビメニューから[リンクの挿入]をクリックして、

リンクの設定を行うこともできます（I21 ページ図 ⑧）。

参考：

リンク先の URL はブラウザのアドレスを事前にコピーしておくとよいでしょう。

その際下記のショートカットを使うと便利です。

コピー：[Ctrl] キー＋ [C] （コントロールキーを押しながらアルファベットの C を押す）

貼り付け：[Ctrl]キー＋ [V] （コントロールキーを押しながらアルファベットの V を押す）

右クリックからリンクの設定

URL を指定

1

2


22

2.13. 画像の挿入

次は画像を挿入しましょう。

今回はホームページ・ビルダーに添付されている素材集の

画像を使用します。

画像を挿入したい場所にカーソルを移動し、ピンクの

「枠」が表示されていない状態にしてください。

（ここでは、「次のページへ」の下に画像を挿入

してみます。）

「挿入(I)」メニューの「画像ファイル(I)」から「素材集から

(G)」を選択してください。①

なお、かんたんナビ表示時は、画面左側のナビメニューから

[写真や画像の挿入]をクリックして、「素材集から」を選択する

ことで、同様の操作を行うこともできます。②

次に、「素材集から開く」ダイアログボックスが

開きます。

左側のフォルダから、「イラスト」→「植物」を

クリックし、好きな画像を選択してください。

「開く」をクリックします。

（③では、img_h015.gif を選択しています）

素材集から画像を選ぶ

画像の挿入

（かんたんナビ表示時）

画像を選択

1

2

3


23

カーソル位置に画像が挿入されます。④

※画像の大きさを変えたい時

画像の挿入

画像の拡大・縮小

ホームページ・ビルダー21 で使用できる画像ファイルは

GIF(拡張子 .gif) JPEG(拡張子 .jpg)

PNG(拡張子 .png) BMP(拡張子 .bmp) など

ホームページに画像を掲載する際の注意

ホームページ作成時には使用する画像データの「著作権」に十分ご注意ください。

また、自分で撮影した写真でも個人を特定できる第三者が写っている場合は、

「肖像権」に触れることがあります。

4

5


24

2.14. ページの保存（画像ファイルも合わせて保存する）

では、ここまでの作業の結果をすべて保存しましょう。

「ファイル(F)」メニューの「すべて保存(V)」を選択してください。すると、図 5 の画面が表示され、

先ほど挿入した壁紙とイラストの画像ファイルをどこに保存しますか？と尋ねてきます。

HTML ファイルはテキストのみで構成されるファイル

で、ホームページ・ビルダー編集画面でページ内に

挿入されたかのように見える画像は、HTML ファイル

上ではその画像ファイルを表示する、という内容が

書き込まれているにすぎません。

そのため、挿入した画像ファイルを別に保存する必

要があります。

図 5 の画面はその保存実行のためのダイアログボッ

クスです。基本的にページ内で用いる画像等の素材

ファイルも、html ファイルと同じフォルダの中に保

存します（ここでは保存場所が「HTML ファイルと

同じフォルダ」と指定してあります）。

図５のファイル名と保存場所を確認し、変更する必要がある場合には、その下の「選択項目の変更」で変

更します。ファイル名は半角英数字のみです。また保存場所は参照（B）ボタンから選びましょう。

最後に、下部の「上書き時に自動的にファイル名を変更する」にチェックをして保存をクリックします。

以上でホームページの作成は完了です。

あとは、これらのページをサーバへ転送し、ネット上に公開します。

別冊のアップロード編を参照ください。

図 5 素材ファイルをコピーして保存

「名前をつけて保存」「上書き保存」と「すべて保存」の違い

「名前を付けて保存」や「上書き保存」は、現在編集中の HTML ファイル（およびそれに関わる画像

等の素材ファイル）のみを保存します。これに対し「すべて保存」は開いているすべての HTML ファ

イル（およびそれに関わる画像等の素材ファイル）を保存します。


25

3. 付録

A. 表の挿入

表を挿入したい場所にカーソルを移動してください。

（ここでは、桜の画像の下にカーソルを移動しています）

「表(A)」メニューの「表の挿入(B)」を選択します。①

かんたんナビ表示時は、画面左側のナビメニューから[表の挿入] をクリックして、

挿入することも可能です。

「表の挿入」ダイアログボックスが表示されます。

ここで行数、列数を指定して OK をクリックします。②

（ここでは、４行×４列と指定しています）

画面上に表が挿入されました。③

最初にクリックしたカーソル位置に四角い枠が指定した

数だけ表示されます。

枠をクリックすることで、その表の中に文字や画像を挿入することが

できます。

図 63 行数、列数を指定

図 62 表の挿入

表の挿入

3

1

2

3


26

B. ロゴの作成

「ロゴ」は以下の手順で作成します。

ロゴを入れたい箇所にカーソルを移動してください。

（ここでは「はじめて作成☆」の下にカーソルをおきます。）

メニューから挿入→ロゴを選択してください。①

かんたんナビ表示時は、画面左側のナビメニューから

[ロゴ（飾り文字）の挿入] をクリックして挿入することも可能です。②

すると、「ロゴの作成」ダイアログボックスが

表示されます。③

文字（T）欄に適当な文字を入力し、

文字の大きさ、文字の形状を選択してください。

プレビューで確認し、よければ完了をクリックしてくださ

い。

カーソル位置にロゴが挿入されました。④

ロゴの挿入

ロゴの作成画面

ロゴの挿入

ロゴの挿入

（ナビメニューから）

1

2

3

4


27

ロゴの再編集のために作成されるフォルダ

ロゴを作成した場合には、保存した際に下記メッセージが出てきて、「_HPB _Recycled」という名前のフ

ォルダが local_html フォルダ内に作成されます。挿入したロゴを再編集するためのもので、このフォルダ

を削除してしまうと、ロゴの編集ができなくなりますので注意しましょう。

C. 箇条書きの作成

箇条書きを作成してみましょう。

まず、カーソルを移動しピンクの枠が表示されていない状態にしてください。

箇条書きの種類は、番号なしの箇条書き（●,□,・などが先頭に表示される）、

番号つきの箇条書き（１，２，３・・・など）などがあります。

箇条書きは、「挿入(I)」メニュー → 「リスト(S)」と選択します。

ここでは、箇条書きの種類の番号なしリスト（B）を選択します。①

また、箇条書きは、書式ツールバーにあるボタンでも

同じ操作ができます。

「番号なしリスト(B)」を選択すると、

カーソル位置に「・」が表示されます。

カーソルの点滅している所から「さくら」と入力し、

「Enter」キーを押してください。

すると、２番目の文が入力できるようになります。②

箇条書きは、この操作の繰り返しで必要な分だけ入力します。

続けて「うめ」と入力し、次に「もも」と入力しましょう。

リストが完成します。③

箇条書きの入力

入力時

リスト例

1

2

3


28

D. サイト機能を使ってホームページを作成する

ホームページ・ビルダーにはサイト機能があります。

これはホームページの中で使われるファイル、画像などをまとめて管理（保存）し、サイト単位で

ファイルの読み込みなどができる機能です。

サイトを作成する場合は、新たに「ホームページ・ビルダー21 クラシック」を立ち上げてください。

1.サイトを新規作成する。

メニューバーにある

「サイト」→「サイトの新規作成」

を選択してください。①

「サイト新規作成」のダイアログボックスが

表示されます。

まず、「サイト名の指定」を行います。

サイト名を入力（ここでは mysite）して、

「次へ」をクリックします。②

次に、「トップページの指定方法の選択」を行います。

ここでは、「新規にトップページを作成する」を

クリックして、「次へ」をクリックします。③

続いて、「トップページのファイル名と作成先の

フォルダの指定」を行います。④

「トップページのファイル名(P)」で「index.html」を

選択し、「トップページの作成先フォルダの指定(F)で

は、

「参照(R)」をクリックします。

トップページのファイル名の指定

新規にトップページを作成

サイト名の指定

サイトの新規作成

1

2

3

4


29

「フォルダーの参照」ダイアログボックスが表示されます。

今度はお持ちの USB メモリ内に新規に local_html フォルダを

作成してみましょう。

「コンピューター」→「USB ドライブ（任意のドライブ）」

を選択し、「新しいフォルダーの作成」をクリックしてでて

くるフォルダーに「local_html」を入力して、最後に「OK」を

クリックしてください。

その後、先程の「トップページのファイル名と作成先のフォル

ダの指定」④ に戻るので、「完了」をクリックします。

「ページ作成方法の選択」ダイアログボックスが開きます

ので、「白紙ページ（B）」をクリックしましょう。

転送設定のメッセージがでてきたら、「いいえ」を

クリックします。

サイトが作成されました。

2.サイト作成後、ファイルページを作成します。

以下 3 つのページ（HTML ファイル）を「標準モードで新規作成」より作成してみましょう。

index.html

ファイル名：index.html

書式設定

・「お茶のページ」見出し 1、中央揃配置

・「お茶のいろいろ」見出し 2、中央揃配置

・「お茶のおとも」見出し 2、中央揃配置

リンク設定

・「お茶のいろいろ」に sub1.html へのリンク

・「お茶のおとも」に sub2.html へのリンク

素材画像

・pic_f01.jpg（素材集から「写真」→「食べ物」）

local_html フォルダの新規作成

5


30

local_html フォルダを開いた画面

sub1.html

sub2.html

3.作成したファイルをサイトに保存します。

「ファイル」→「すべて保存」を選択する。

全てのファイルが local_html フォルダ内に

保存されます。

参考までに local_html フォルダを開いて確認しましょう。⑥

ここでは、3 つの html ファイルを作成しましたが、フォルダ内にはそれに付随する複数のファイル(画像

など)が自動的に保存されていますね。

これらのファイルが別のフォルダに保存されてしまうと、ホームページ更新時に画像が表示されない等

の不具合が生じますので、作成時には十分注意しましょう。

4.サイト単位でファイルを読み込む

ファイル名：sub1.html

リンク設定

・「ホームへ戻る」に index.html へのリンク

素材画像


ファイル名：sub2.html

リンク設定

・「ホームへ戻る」に index.html へのリンク

素材画像


6


31

作成したファイルをサイト名でまとめて読

み込むことができます。

「サイト」→「サイトを開く」を選択します。⑦

I29～I30 ページで設定したサイト名（ここでは「mysite」）を選択して「開く」をクリックします。⑧

すると、下記のような「ビジュアルサイトビュー」が開き、サイト内のリンク構造が表示されます。

編集したいファイルをダブルクリックすると編集画面が開きます。

5.ファイルの転送、ページの公開はアップロード編を参照してください。

サイト単位でファイルを読み込む

サイトを選択

それぞれ＋を

クリックして展開

7

8

index.html から sub1.html と

sub2.html へのリンク

sub1.html と sub2.html から

index.html へのリンク


32

E. ヘルプ

この講習会で紹介した内容以外にも、ホームページ・ビルダーには多くの便利な機能があります。

ホームページ・ビルダーの使い方については、「ガイドマップ」に詳しくまとめられていますので、

活用して下さい。

Documents

はじめてのホームページ · 1.2. ホームページの作り方 HTMLなどの技術的な知識を持たない個人がホームページを作るには、大きく分けて3通りの方法があ