Embed Size (px)
Citation preview
平成 22 年 3 月 15 日
Share Point Designer 2007 操作ガイド
― ホームページ作成・編集機能編 ―
製作：山本嘉一郎
目 次
1 SharePointDesigner の起動と終了 1
2 ホームページとその提供 2
3 ホームページ新規作成の準備 3
4 簡単なページの作成 4
5 テキストの編集 6
6 タイトルと背景 9
6.1 タイトル 9
6.2 背 景 9
7 画像の挿入 10
7.1 画像の準備 10
7.2 画像の挿入法 10
7.3 挿入された画像の編集 11
7.4 クリップアートなどの挿入 12
8 ハイパーリンク 12
8.1 ハイパーリンクの設定の基本手順 12
8.2 ハイパーリンクの操作 13
8.3 同一ページ内のリンク（ブックマークの利用） 14
9 表 組 15
10 画像マップとホットスポット 16
10.1 画像マップの準備 16
10.2 画像へのホットスポットの設定 16
10.3 ホットスポットの削除と修正 17
11 フォーム 17
11.1 フォーム要素とその挿入 17
11.2 フォームデータの送信とその処理 20
12 フレーム 21
12.1 フレームの準備 21
12.2 初期ページの編集 21
12.3 その他のページの作成 21
12.4 リンクの設定 22
12.5 フレームページとフレームの変更 23
1
平成 22 年 3 月 15 日
SharePointDesigner 2007 操作ガイド
― ホームページ作成・編集機能編 ―
製作：山本嘉一郎
この操作ガイドは，SharePointDesigner 2007（以下，SharePointDesigner と呼びます）のホームページ作成・編集
機能について，その操作法を解説するものです．SharePointDesigner にはこのほか，ホームページの管理機能があ
りますが，ここでは触れません．またこのガイドでは，ホームページ作成における基本機能を中心に解説します．
1 SharePointDesigner の起動と終了
起 動
ほかのソフトと同様，タスクバー上の「スタートメニュー」―「プログラム」あるいは，デスクトップ上のショ
ートカットアイコンから Microsoft Office SharePoint Designer 2007 を選択して起動します．
SharePointDesigner を起動すると，図１のような画面が表示されます．このように起動直後は，標準のページを作
成する状態になります．
ここで標準のページを新たに作成するのであれば，このまま画面上で作成をはじめればよいわけですが，後述の
ようにテンプレートを使用したりフレームを使用したページを作成するときは，「新規作成」の操作が必要にな
ります．
図 1 SharePoint Designer 2007 の起動時画面
Microsofot, FrontPage, FrontPage 2002, SharePoint Designer 2007, ImageComposer, InternetExplorer は Microsoft Corporation
の登録商標または商標です．
2
終 了
SharePointDesigner の終了は，［ファイル］メニューの［終了］あるいはウィンドウの右肩にある［×］ボタンに
よってできます．ホームページの作成や編集をおこなったあとに終了しようとすると，そのページを保存するかど
うかの確認が求められることがあります．これは作成・編集したページがまだ保存されていないためです．保存の
要否を判断して答えてください．保存の方法は，ワープロなどの文書の保存と同様です．
2 ホームページとその提供
ホームページは図 2 のように，インターネットに接続された Web（あるいは WWW）サーバと呼ばれるコンピュ
ータから行われます．これを閲覧するには，インターネットに自分のコンピュータ（パソコンなど）を接続し，
Web サーバにアクセスして閲覧を要求するということになります．したがって，自分のコンピュータ上でホームペ
ージを作っただけでは，インターネットや LAN を通してほかの人に見てもらうということはできません．
そこで，作成したホームページを提供するときは，Web サーバとして働いているコンピュータに必要なファイル
（ホームページを構成するファイル）を送って，そこに載せる必要があります．これをサーバへのアップロードと
いいます．こうしてはじめて，ネットワークを通して見てもらうことが可能になります．自分のコンピュータを
Web サーバにすることもできますが，通常はインターネットから直接アクセスするようにはしないので，Web サー
バ用に特別に用意されたコンピュータを利用することになります．Web サーバは，あなたが所属する機関（学校な
ど）やインターネット接続業者（プロバイダー）のところにあり，利用することができます．
･･････････････
Internet
Web
サーバ
ブラウザ
閲覧
アップロード
ホームページ
作成
図 2 ホームページの作成と提供
3
3 ホームページ新規作成の準備
SharePointDesigner の起動時には通常，標準的なページの新規作成状態となり，すぐに新しいページの作成を始
めることができるので，特に準備は必要ありません．ただ，すでに作成中のページがあって，新たにホームページ
を作成するとき，あるいは予め用意されている様式（テンプレート）を利用したいときやフレームを使用したペー
ジを作成するときは，次の手順でその準備をします．
まず，［ファイル］メニューの［新規作成］―
［ページ］を選択します．すると，図３のような
ダイアログボックスの[ページ]タブが表示され、
用意されたテンプレートから作成したいページ
を選択します。ここでは「標準の HTML ページ」
が選択されたものとして話を進めます．「標準
HTML ページ」が選ばれたときの画面は図 4 の通
りです．
メニューとツールバー
画面上には，ページを作成する領域を中央に，
最上段にメニューが，その下によく使用されるボ
タンを配置したツールバーが，作成領域の左上に
は画像編集用のツールバーが表示されています．こ
れらのメニューやボタンには，ページ作成領域上で
ページを作成するときに必要な機能が割り当てられています．どのメニューあるいはボタンを使うと何ができるか
を理解することによって，ホームページを自由に作成できるようになります．なお，これらのツールバーはユーザ
の設定により表示させたり閉じたりすることができます．また，図 4 にある以外にもいくつかのツールバーがあり
ます．その表示/非表示の選択は［表示］メニューでおこないます．
図 3 新規作成時のテンプレート選択のダイアログボックス
図 4 SharePointDesigner の作成・編集画面
作成・編集領域
メニュー ツールバー
4
ページビューの 3 種類の画面
ページ作成領域の左下を見て下さい．3 つのタブ（付箋）が見られます．「デザイン」，「分割」，「コード」の 3
つです．このようにページ作成領域の表示には通常，３種類があり，これらを切り換えて見ることができます．次
に，それぞれの表示画面について説明をします．
(1) デザイン画面
ページの作成をするときの標準的な表示画面です．できあがり（ブラウザで見たときの表示）に近い形で表示さ
れ，その上で作成・編集をワープロ感覚でおこなうことができます．通常，この画面上で作成・編集をおこないま
す．他のブラウザでプレビューする場合は，［ファイル］メニューの［ブラウザでプレビュー］を使用することが
できます．
(2) 分割画面
コード画面とデザイン画面が両方表示されます．
(3) コード画面
ホームページは HTML と呼ばれる言語を使って書かれます．ページのどこに何をどのように表示するかなど，
ホームページについてのすべての指示は，HTML と呼ばれる記述法（書き方）に従っておこなわれます．ただ，
SharePointDesigner でホームページを作成する場合，作成者は HTML を意識することなく，「デザイン」画面上でワ
ープロ感覚でページを作成することができます．SharePointDesigner はそのとき，自動的に「HTML」を作成してい
ます．HTML の画面には，「デザイン」の画面で作成したページが HTML を使ってどのように表されているかを見
ることができます．これを直接，編集することによってページの作成・編集を進めることもできます．ほとんどの
ことは「デザイン」画面でできますが，微妙な調整や高度な機能の組み込みでは，HTML を直接編集する必要が生
じる場合があります．また，繰り返し同様の記述をしたり，同じ変更を複数の個所に対しておこなうときなどは，
「HTML」画面でおこなう方が能率的なときがあります．
４ 簡単なページの作成
ではここで，SharePointDesigner を使って簡単なホームページを作ってみましょう．標準の画面で，次の文字を
図 5 のように入力してください．なお，改行は各段落の最後でのみおこなってください．ウィンドウの大きさによ
って文章途中の改行位置は変わりますが，ワープロのときと同様に，改行しないで入力を続けてください．
ようこそ葛野家のホームページへ
このたび葛野家では，インターネット上にホームページを開設することになりましたホームページの作
成ははじめたばかりで，まだまだ勉強することがたくさんあります．まずはシンプルなスタイルで，葛
野家のご紹介をしたいと思います．
葛野家の紹介
父 光男
46 歳，会社員．電気関係のメーカーに勤務しています．趣味はカラオケと休日のごろ寝．最近，妻の「華
子」の影響で，インターネットへの興味を示しています．
母 華子
42 歳，専業主婦．趣味はお菓子作りやテニス．最近，知的魅力に誘われてパソコンを始め，ついにホー
ムページの作成に挑戦．
長男 光一郎
18 歳，花（？）の高校 3 年生．受験地獄の真っ最中．
長女 華恵
13 歳，中学 1 年生．母の作るお菓子の食べすぎで少し太りぎみ．それがちょっぴり気になる 13 歳です．
5
図 6 ページ保存とページタイトルの設定画面
このようなページは，文字だけを入力し，まったく編集を施さない最も単純なページです．これを保存して，実際
にどのように表示されるかを，ブラウザで見てみることにします．
作成・編集したページの保存
まず［ファイル］メニューの［名前を付けて保存］を選びます．表示されるダイアログボックスで，保存先（ド
ライブとフォルダ）を指定し，さらに保存時のファイル名を入力して［保存］ボタンを押します．ここではファイ
ル名として，「kadono0」という名前を付けて保存することにします．保存されるファイルには，拡張子として「htm」
が付き，実際には「kadono0.htm」というファイル名で保存されます．
ここで、ブラウザ上で閲覧した際にタイトルバーに表示される，ページタイトルを変更したい場合は，[ページ
タイトル]の右にある[タイトルの変更]をクリックします．図 6 のような[ページタイトルの設定]ダイアログボッ
クスが表示されますので，変更したいタイトルを入力し、変更を行ってください．
図 5 文字だけのホームページ
6
ブラウザでの閲覧
まずブラウザを起動します．ブラウザは通常，WWW サーバにアクセスして，そこでサービスされているホーム
ページを閲覧するものですが，自分のコンピュータ上に保存されている（フロッピーを含む）ファイルを表示させ
ることもできます．ファイルを表示するにはまず，ブラウザの［ファイル］メニューの［開く］または［ファイル
を開く］を選びます．ブラウザやそのバージョンによっては（Internet Explorer の各バージョンなど），［ファイルを
開く］というメニューはなく，その場合はインターネット上のホームページと同様，［開く］や「ページを開く」
を使用します．これらを選択すると，ファイルの所在を入力するダイアログボックスが表示されます．通常は，［フ
ァイルを選択］といったボタンがあり，（Internet Explorer では［参照］），これを押して目的のファイルを探します．
図 7 は Internet Explore を使って，先に保存したファイル（kadono0.htm）を表示したものです．
5 テキストの編集
ここで，テキスト部分についてのいくつかの主要な編集法を紹介します．これらの編集を加えることにより，テ
キスト部分を見やすくしたり表現力を高めたりすることができます．
見出し
「見出し」は通常，それだけを単独の行に表示し，本文よりも目立つように表示させます．「見出し」に指定す
ると，文字を大きく太く表示させることができます．「見出し」の大きさは 6 段階が用意されています．
ある行を「見出し」にするにはまず，その行を選択します（その行をクリックします）．そこで，上部のツール
バーの 2 段目（図 4 参照）の左端にあって通常「なし」と表示されたボックスを開き，その中から目的の「見出し」
を選択します．この操作は，［書式］メニューの［段落］でもおこなうことができます．
図 8 の「ようこそ葛野家のホームページへ」の部分は，このようにして「見出し 1」に設定したものです．
フォントの変更
文字の書体，大きさ，色を変更することができます．ただフォントの変更は，使用するブラウザによっては期待
通りに表示されないことがあります．
大きさを変えるには，ツールバー上の通常「（既定のサイズ）」と表示されているボックスで目的の大きさを選択
します．8 ポイントから 36 ポイントまで選択できます．書体を変えるには，ツールバー上の通常「（既定のフ
図 7 kadono0.htm をブラウザで表示させたところ
7
図 8 様々なテキスト編集を加えたページの例
ォント）」と表示されているボックスで目的のフォントを選びます．さらに文字の色を変える
には， の右にある「▼」のボタンを押して目的の色を選択します．ボタン上の文字「A」を押すと，その下に
表示されている色が適用されます．
図 7 ではこれらの機能により，「葛野家のご紹介」の部分で，文字のサイズを 18 ポイントにしています．見出し
の場合と違って，太字にはなりません．また，行の一部の文字だけを大きくすることもできます．
文字飾り
文字は，太字，斜体，アンダーライン付けなどの修飾をすることができます．これをおこなうには，対象の文字
または文字列を選択し，ツールバー上の ボタンのいずれかを押します．図 8 では，「葛野家のご紹介」
の部分にアンダーラインを引いています．
改 行
改行には 2 通りあります．図 7 の例ではすべて，行間を空けるようにした改行を使用しています．入力確定後に
Enter キーで改行をおこなうと，自動的に段落として認識され，次の段落との間に適度な行間が空けられます．こ
の例では，このように行間が空いている方が見やすくて良いでしょう．これに対して，行間を空けずに密着改行に
することもできます．密着改行をするには，入力時に改行する際，SHIFT キーを押しながら改行をおこないます．
また，既に入力したものを変更するときは，BS キーなどで一度，改行を取り消してから同様に操作します．
水平線
図 8 のようにページの任意の箇所に水平線を挿入することができます．水平線を挿入するには，挿入したい箇所
にカーソルを置いて，右上の[ツールボックス]から[水平線]を選びダブルクリックします．図 8 では，ページの冒
頭の挨拶文の上下に水平線を挿入しています．挿入した水平線は，これを選択（クリック）した後，右クリックで，
［編集］メニューの［水平線のプロパティ］を使って，長さや太さを変更することができます．
8
リスト表示
リスト表示とは箇条書きのことです．次
の 2 通りがあります．
・記号付きリスト
・番号付きリスト
・用語リスト
(1) 記号付きリスト
図9の「記号付きリスト」のように，「●」
などの記号を各行の前に付けて箇条書き
にします．この設定をするには， ボタ
ンを押してからその行を入力します．2 行
目以降はそのまま続けて入力し，何も入
力しないで Enter キーを押すと，そこでリ
ストは終わります．また，既に入力され
た行を記号付きリストにするときは，そ
の行にカーソルを置いて ボタンを押
すと，その行が記号付きリストになりま
す．
(2) 番号付きリスト
図 9 の「番号付きリスト」のように，各行の前に番号を付けて箇条書きにします．この設定をするには， ボ
タンを押してからその行を入力します．2 行目以降はそのまま続けて入力し，何も入力しないでリターンキーを押
すと，そこでリストは終わります．また，既に入力された行を番号付きリストにするときは，その行にカーソルを
置いて ボタンを押すと，その行が番号付きリストになります．
インデント
インデントとは字下げのことです．字下げをしたい部分（複数行でも可能）を選択して，ツールバーの ボタ
ンを押します．これを解除するときは ボタンを押します．前出の図 8 の「家族の紹介」のところではこれを利
用して，字下げがしてあります．
中央配置と右詰め配置
文字列の配置は通常，ワープロなどと同様に左詰めです．これを中央に配置したり右詰めで配置したりすること
ができます．これをおこなうには，ツールバー上の や ボタンを使用します．再度同じボタンを押すと，
標準の左詰め配置に戻すことができます．後出の図 12 では，「ようこそ葛野家のホームページへ」を中央配置に，
「By Hanae Kadono」を右詰め配置にしています．
行間の調整など
SharePointDesigner では，行間を調整することができます．標準では図 10 のように，日本語はほとんど行間のな
い状態で表示されます．これを広げることができます．行間の調整は段落，つまり「改行」（「SHIFT+改行」を除
く）と改行の間にはさまれたブロックごとに適用されます．
行間を調整するには，調整する範囲を反転して選択した後，「書式」メニューの「段落」を選択します．表示さ
れるダイアログボックスで，「行間」から適当な行間を選択します．選択できるのは１，1.5，2 行で，これらと異
なる行間のときは，数字部分をキーボードから変更します．たとえば「130%」といった形で指定ができます．こ
の機能ではあわせて，インデント，段落の前後のスペース，文字間の調整をおこなうこともできます．
図 9 リスト表示の例
9
図 10 行間調整
図 11 「ページのプロパティ」の「背景」タブ
6 タイトルと背景
6.1 タイトル
タイトルとはページの表題で，ブラウザ
で表示されたとき通常，ブラウザ上端のタ
イトルバーの位置に表示されます．
SharePointDesigner では，作成するページで
最初に入力した 1 行の文字列がタイトルと
して設定されます．ただし，1 度これを保
存した後でこの行を修正してもタイトル
は変わりません．
タイトルを変更するには，［ファイル］
メニューの［ページのプロパティ］を選択
します．表示される「ページのプロパティ」
ダイアログボックスの「全般」タブを選択
するとタイトルの入力箇所があります．こ
こでタイトルの入力・修正をおこないます．
また「ページのプロパティ」ダイアログボ
ックスは，［書式］メニューの［背景］で
も表示させることができます．
6.2 背 景
背景としては，背景色の設定と画像を並べ
る形の背景の設定ができます．いずれもタイ
トルと同様，「ページのプロパティ」でおこないます．上記のいずれかの方法で「ページのプロパティ」を表示し，
図 11 のように「背景」タブを選択します．背景色を変更するにはここで，「背景と色を指定する」を選び（このタ
ブを選択したときに，たいていはこちらが選択されている），「背景」の中で目的の色を選択します．
10
図 12 背景に画像を使用したページの例
図 13 画像のプロパティ
背景に画像を配置するときは，同じく「背景」タブの中で図 11 のように「背景の画像」をチェックし，背景と
して使用する画像を選択します．図 11 では，背景の画像に「asian.gif」を選んでいます．その結果をブラウザで表
示したものが図 12 のページです．背景に画像が使われます．
7 画像の挿入
別途用意された写真や絵などの画像ファイルをページに挿入することができます．また Share PointDesigner には
様々なクリップアートも用意されており，これを挿入することもできます．挿入できる画像ファイルの形式として
は，JPEG または GIF を主に使用します．さらに最近では，PNG 形式も用いられます．PNG 形式は Web 用に最適
化された形式で，今後は主に PNG 形式が使用されることが考えられます．
7.1 画像の準備
デジタル化されていない画像
まだコンピュータ用のファイルとして用意されていない画像については，まずその準備が必要です．通常はスキ
ャナによりこれを読み込んで画像ファイルとして保存します．保存する際に GIF，JPEG または PNG 形式で保存し
ます．単にその画像を表示させるだけのときは JPEG がよいでしょう．背景を透明化したり画像上でクリックする
ポイントを設定するような場合には GIF がよいでしょう．PNG はいずれの場合も使用できます．保存するときの
ファイル容量は大きくなりますが，BMP や DIB といった非圧縮形式で保存をしておいて，必要に応じて形式を変
更する方法もあります．また，JPEG や GIF 間での形式変換も可能です．
デジタル化された画像
上記のような目的に応じて，必要であれば JPEG，GIF，あるいは PNG 形式に変換します．
7.2 画像の挿入法
用意された画像をページに挿入するには次のようにしま
す．
まず，画像を挿入したい所を選択し，右上ツールバーの
をダブルクリックします．次に，図 13 のように を右クリ
ックし，[画像のプロパティ]を選びます．すると図 14 のよう
な[画像のプロパティ]ダイアログボックスが表示されます．
11
参照から目的のファイルを指定して[OK]ボタンをクリッ
クします．（［挿入］メニューの[図]―[ファイルから]でも
同様の画面が出ます）図 14 では，「Welcome.gif」という
ファイル名の GIF ファイルを選んでいます．こうすると
図 15 のように，ページの中にこの画像ファイルが挿入さ
れます．
注意）新規作成し未保存の状態にあるページに画像を挿入すると，「ファイル名」の前に，そのファイルの所在位
置（パス）を示す記述がが自動的に挿入されることがあります．これは，サーバにアップロードしたときに，画
像が表示さないなどの問題を起こす原因になります．これを避けるには，画像を挿入するより前にそのページを
保存するようにします．画像を挿入したときは，これを必ず確認するようにしましょう．
7.3 挿入された画像の編集
画像のサイズ変更
画像のサイズを変更するには，マウスによるドラックで，簡単に変更することができます．
この方法による画像の編集は表示上のものです．画像ファイルそのものは変更されないので，縮小してもファイ
ルサイズは小さくなりませんし，拡大すると画像が不鮮明になります．最適なファイルサイズで鮮明な画像ファイ
ルを挿入するには，挿入前に専用の画像処理ソフトで編集するのがよいでしょう．
画像プロパティの変更（画像枠，表示位置，余白）
対象の画像を選択して，右クリックをし，［画像のプロパティ］を選択すると，「画像のプロパティ」ダイアロ
グボックスが表示されます．ここで「外観」タブにより，画像の周りの枠，画像の表示位置，画像と周りのテキス
トとの間隔を指定することができます．
とくに，画像にハイパーリンク（8.2 参照）を設定した場合，周りに枠線が引かれることがあります．これを取
図 14 挿入する画像の選択
図 15 画像を挿入したページ
12
図 16 クリップアート挿入
図17 アクセシビリティ
り除くにはここで，外枠の太さを 0 に設定します．
画像表示位置
標準では，挿入された画像はページの中央に表示されます．位置は先ほどのサイズ同様，マウスによるドラック
で，簡単に変更することができます．また画像を右寄せ左寄せなどにしたい場合は， や ボタンを使用しま
す．これを元に戻すときは，同じボタンをもう 1 度押します． も同じ左寄せの意味ですが，画像などを左寄せ
して，その横（右）に複数の文字行が表示されるようにするという特殊な意味を持ちます．
画像の横への複数行のテキスト表示
画像の右や左に複数行のテキストを表示するには，その画像を選んで， または ボタンで左詰めまたは右
詰めを指定します．これにより，画像の横に複数の行を表示させることができます．図の解説文を加えたり，文書
の途中に体裁良く図を挿入したりするのに便利でしょう．
7.4 クリップアートなどの挿入
SharePointDesigner にはホームページ上で利用できるさまざまなクリップアー
ト（画像集）が準備されています．簡単な操作でページ内に挿入することができ
ます．
クリップアートを挿入するにはまず，［挿入］メニューの[図]―［クリップアー
ト］を選択します．すると，図 16 のような「Microsoft Clip Gallery」のダイアログ
ボックスが表示されています．ここから目的の画像を選択すると，[アクセシビリ
ティのプロパティ]ウィ
ンドウが表示されます．
ここでは，画像ファイル
をマウスポイントした時に表示される画像の名前を設定します．任意の名称を入力し，[OK]をクリックします．（図
17 では「画像ファイル_01」と設定）「Microsoft Clip Gallery」にはクリップアートのほか，写真，サウンド，およ
びビデオが用意されており，これらもクリップアート同様に挿入することができます．
8 ハイパーリンク
ハイパーリンクとは，Web ページ最大の特徴の 1 つです．クリックすることによって，次々と目的のページを開
いていくことができます．このような文章をハイパーテキストと呼びます．ホームページでは，他の Web サイト
のホームページへのリンクを設定することにより，巨大なハイパーテキストが構成されます．ここでは，その仕組
みと作り方（リンクの設定法）について説明します．
8.1 ハイパーリンク設定の基本手順
ここで「葛野家のホームページ」を図 18a のように変更し，ここには各家族の名前だけを表示し，各家族のペー
ジは別途用意することにしましょう．そしてこのページに図 18b のような各家族のページをリンクし，図 18a の中
で各家族の名前をクリックするとその家族のページが開くようにします．これには，図 18a の家族名をその家族の
ページにリンクします．その手順は次のとおりです．ここで図 18a は「リンク元」，図 18b の方は「リンク先」の
ページと呼びます．
まず，リンク先とリンク元のページを用意します．ここで，リンク元のページを SharePointDesigner 上に開いて
13
図 18 a）リンク元のページ（左側）
と 18b）リンク先のページ（右側）
図 19 ハイパーリンク作成のダイアログボクス
おくことはもちろんですが，リンク先のページも開いておくと便利です．次にリンク元のページ上でリンクしよう
とする文字列（図 18a 上の「父 光男」）を選択します（ドラッグして反転表示させる）．そこで，右クリック[ハ
イパーリンク]を選択すると（あるいは［挿入］メニューの［ハイパーリンク］を選択すると），図 19 のダイアロ
グボックスが表示されます．ここで，「URL」の欄にリンク先のページを入力します．この例では，ファイル名
「mitsuo.htm」を選びます．最後に［OK］ボタンを押すと，リンクが完成します．
注意）リンク元のファイルを保存しないでこの作業をしようとすると，図 19 ダイアログボックスにリンク先のペ
ージが表示されません．リンクを行う前にリンク元のファイルは１度，保存をするようにしましょう．
リンク先のファイルがリンク元と異なるフォルダにあるときは，図 19 の「検索場所」を利用してリンク先のフ
ァイルがあるフォルダを探して，リンク先のファイルを指定します．
図 19 のダイアログボックスには「ファイルのリンク」のボタンがありますが，これを使用するとリンク先の表
現が不適切となり，作成したホームページをサーバーにアップロードしたときに，リンク先のページが見つから
ないといったエラーが発生することがあります．
リンク
14
図 20 ブックマークの設定
ハイパーリンク先の確認
ハイパーリンク先の設定は，以上のように大変微妙です．次の「ハイパーリンクの修正」を利用して確認すると
よいでしょう．
ハイパーリンクの修正
ハイパーリンクの設定を解除したり変更したりするには，設定のときと同様にしておこないます．右クリック「ハ
イパーリンクノプロパティ」を選択します．図 19 のダイアログボックスが表示されるので，必要な修正をおこな
います．設定を解除するには，「リンクの解除」．ボタンを押せば解除できます．
8.2 ハイパーリンクの応用操作
画像からのリンク
リンクは文字列だけでなく画像からもおこなうことができます．方法はまったく同じで，右クリック[ハイパー
リンク]を選択します．
Web サイトへのリンク
リンク先には他の Web サイトを選ぶこともできます．この場合，図 19 のダイアログボックスで直接，URL 欄へ
そのアドレスを入力するか， ボタンを押してそのサイトを探します．
8.3 同一ページ内へのリンク（ブックマークの利用）
リンクは通常，他のページとの間で張られるものですが，同一ページ内でもこれを利用することができます．こ
れを利用すると，長いページの場合，容易に目的の箇所に飛ぶことができます．たとえば「あいうえお」順に整理
された名簿のようなページでは，あ行，い行，．．．といった具合に分類し，その先頭へ飛ぶような仕組みを作って
おくと便利です．
このように同一ページ内に飛ぶようなリンクを設定するには，リンク先（飛び先）にブックマークと呼ばれるマ
ークを付けておき，これとリンク元の文字や画像との間でリンクを設定します．したがってまず，飛び先にブック
マークを設定することが必要です．
ブックマークを設定するにはまず，これを設定しようとする箇所にカーソルを置きます．次に［編集］メニュー
の［ブックマークへ移動］を選択し，図 20 のダイアログボックスを表示させます．ここにブックマーク名（こ
こでは[chichi]と入力しています）を入力して［OK］ボタンを押せば設定が終わります．
図 21 は「葛野家のご紹介」の「父」の所にブックマーク 「chichi」
へのリンクを張ろうとしたものです．ブックマークをリンク先と
してリンクの設定をするにはまず，リンク設定しようとする文字
列あるいは画
像を選択します．次に右ボタン「ハイパーリンク」を押して，ダ
イアログボックスを表示させます．ここでダイアログボックスの
右側に並んでいるボタンの中から，「ブックマーク」をクリックし
ます．「ドキュメント内の場所の指定」が表示されるので，リンク
させたいブックマークを選び，[OK]をクリックすると，「ハイパーリンク」のダイアログボックスに戻ります．ア
ドレス欄に「chichi」と表示されていることを確認し，[OK]をクリックすると，設定ができあがります．「母」「長
15
図 22 表組の例
男」「長女」にも同様の設定をおこなうと，「葛野家のご紹介」とそれぞれの紹介箇所とがリンクされ，たとえば「長
女」をクリックすると，「長女」の紹介欄へ飛ぶことができます．
9 表 組
ホームページには図 22 のような表を挿入することができます．表組は HTML で記述するにはやや複雑ですが，
SharePointDesigner ではこれも，ワープロとまったく同様の感覚で作成することができます．
表組をおこなうにはまず，表を挿入しようとする位置にカーソルを置きます．ここで ボタンを押して，表の
行と列のサイズを設定します．これで標準的な表組ができあがります．あとは，表のセルに文字などを挿入すれば
完成です．また必要に応じて，罫線のサイズやセルの色の設定などをおこなうことができます．またセルには文字
だけでなく，画像などを入れることもできます．
表の様式の変更は右クリック［変更］メニューでおこないます．セルの結合，分割，列幅や行高の統一などの設
定・変更をおこなうことができます．その表あるいはセルを選択後，［変更］メニューの中の適当な項目を選択し
て必要な操作をします．表，行，列，あるいはセルの選択は，このメニューの中でもおこなうことができます．
表組みを利用したレイアウト
ホームページ上での文書や画像のレイアウトは，ワープロのように自由になりません．そこで表組みを利用する
と，ある程度，レイアウトを自由におこなうことができます．その原理は，表のセルを利用して表示位置を制御し
ようというものです．セルの結合を利用すれば，かなり自由に表示位置を設定することができます．また，セルの
背景色を設定することによって，異なる色の背景をページ上に配置することもできます．
ページの新規作成時に用意されているさまざまなレイアウトも，このような表組みの機能によるものです．
図 21 ブックマークへのリンクの設定
16
図 23 ホットスポットを設定した画像マップとページ
10 画像マップとホットスポット
ホットスポットとは，画像内の特定の場所に他のページやブックマークとのリンクを設定するもので．画像内の特
定の箇所をクリックすると，そのページやブックマークに移動するようにすることができます．たとえば，地図上
にホットスポットを設定すると，そのポイントにある店の紹介のページが表示されるといった仕組みを作ることが
できます．ホットスポットを組み込んだ画像は，画像マップ，イメージマップあるいはクリッカブルマップと呼ば
れます．
10.1 画像マップの準備
画像マップを作成するにはまず，ホットスポットを設定しようとする画像と，ホットスポットをリンクしようと
するリンク先のページあるいはブックマークの準備が必要です．画像はどのようなものでも構いません．またリン
ク先は他の Web サイトとすることもできます．このように，リンク元が画像の中に設定された特定の箇所である
という点を除けば，通常のリンクと同じ仕組みです．
10.2 画像へのホットスポットの設定
まずホットスポットを設定しようとする画像をクリックして選択します．画像を選択すると，画面下の画像ツー
ルバーが使用可能な状態になります．画像ツールバーが表示されていないときは，［表示］メニューの［ツールバ
ー］―[図]を選択すれば表示されます．ここでは 1 例として，図 23 の日本地図に円形のホットスポットを設定する
手順を説明しましょう．
円形のホットスポットを設定するにはまず，画像ツールバーの円を選択します．その上でマウスを画像上に移動
すると，マウスカーソルが鉛筆マークに変わります．その鉛筆の先を円の中心に置いてクリックします．その後，
マウスを円の外側へ向かって動かすと，ホットスポットとして設定される円が大きくなっていきます．描かれる円
が適当な大きさになったら，もう一度クリックします．すると「ハイパーリンクの作成」ダイアログボックスが開
きます．ここで，リンク先のページやブックマークを指定します．その方法は 8.1 節（ハイパーリンク設定の基本
手順）と同じです．以上で，ホットスポットの設定ができあがります．これを必要なだけ繰り返して完成させます．
ホットスポットの形状は，円のほか，矩形あるいは多角形を使用することができます．また文字列をホットスポ
ットとすることもできます（テキストのホットスポット）．多角形を使用することにより，ほとんどの形状に対し
て設定が可能です．これらも，基本的には円形の場合と同じで，図形を描画する要領で画像上にホットスポットの
範囲を指定し，そのリンク先を指定します．文字列は基本的には矩形のホットスポットと同じです．文字列を入れ
るテキストボックスとしての矩形がホットスポットとして設定されると考えてください．ただし，テキストのホッ
トスポットは GIF 形式の画像に限られ，他の形式の画像に設定しようとすると，その画像は GIF 形式に変換されま
す．
17
注意）ホットスポットを設定する画像を挿入するときは，画像を挿入するページをあらかじめ保存しておきます．
これは通常の「画像の挿入」と同様ですが，ホットスポットを設定する場合にはさらに，リンク先のページの URL
にも余分な記述が入り，あとで変更が必要になります．
ホットスポットが正常に動作しないときの処置
ホットスポットを設定した画像が表示されないなど，ページが正常に動作しないとき，その原因のほとんどは上
記の「注意」にある不具合によるものです．つまり，画像のソース（保存場所とファイル名）やリンク先の記述に
余分な記述があります．これを修正するには，次のようにします．まず，画像を選択して，［書式］メニューから
［プロパティ］を選択し，表示される「画像のプロパティ」ダイアログボックスで，「画像のソース」の記述を修
正（余分な記述を消去）します．次に，各ホットスポットのリンク先を修正します（下記参照）．
10.3 ホットスポットの削除と修正
削除
設定したホットスポットを削除するには，そのホットスポットをクリックして選択した後，キーボード上の DEL
（Delete）キーを押します．
移動
ホットスポットをクリックして選択すると，マウスで自由にドラッグして移動することができます．
サイズの変更
ホットスポットをクリックした際にその角に表示されるハンドルをマウスでドラッグすることにより，拡大・縮
小することができます．
リンク先の変更
ホットスポットをダブルクリックすると，「ハイパーリンクの作成」ダイアログボックス（図 16）が開きます．
ここで変更することができます．
11 フォーム
フォームは閲覧者によるデータ入力と送信を可能にするものです．フォームには図 24 のように，文字を入力さ
せるテキストボックスやいくつかの選択肢から選択させるドロップダウンメニュー，ラジオボタン，チェックボッ
クスなどを配置することができます．こられを使って送信したい情報を入力させ，プッシュボタンを押して送信で
きるようにすることができます．通常，送信と同時に，これを受けて処理をおこなうプログラムが起動するように
設定しますが，その設定はフォームのプロパティとして行います．
このようにフォームを使用すると，ページを一方的に閲覧者に表示するだけでなく，閲覧者からの情報の収集や
閲覧者の要求に応じた処理をおこなったりすることが可能になります．たとえば，ページを見ての感想の受取，ア
ンケート調査，各種申込みの受付，データベースの検索などのサービスを実現することができます．
ここでは，ページへのフォームの挿入について説明することにします．
11.1 フォーム要素とその挿入
フォームに用意する部品をフォーム要素と呼びます．フォーム要素には次のものがあります．
テキストボックス
1 行の文字列を入力するボックスです．
スクロールテキストボックス
複数行の文字列を入力するボックスです．
ドロップダウンメニュー
いくつかの選択肢をメニュー状に表示し，そこから値を選択できるようにします．
18
ラジオボタン
いくつかの選択肢を並べ，その前に円形のボタンを用意し，これをチェックすることによって 1 つを選択でき
るようにします．
チェックボックス
その項目を選択するかどうかのチェックができるようにします．
プッシュボタン
フォームに入力されたデータの送信とプログラムの実行を指示します．また，入力を取り消す操作にも利用し
ます．
基本操作手順
フォーム要素の挿入には，右側の[ツールボックス]ウィンドウを使用します．その中に，上記のフォーム要素が
用意されているので，そこから必要なフォーム要素を選択します．
フォーム領域の設定
最初のフォーム要素を挿入すると，図 25 のように,フォーム
の領域が破線で示されます．その後に挿入するフォーム要素は，
この破線の領域の中に配置します．この外にフォーム要素を挿
入すると，新たなフォーム領域が設定されます．このようにし
て，複数のフォーム領域を同じページ上に配置することもでき
ます．
この領域のサイズは，最初は挿入したフィールドを含む行だ
けのサイズで，プッシュボタンも挿入したフィールドに密着し
て表示されるので，図 26 のように適当に改行コードを入れて
領域を拡大し，プッシュボタンとの間を空けるようにしてお
図 24 フォームの例
テキストボックス
ドロップダウンボックス
オプションボタン
チェックボタン
スクロールテキストボックス
プッシュボタン
図 25 テキストボックスとプッシュボタンの挿入直後
19
図 28 ドロップダウン ボックスのプロパティ
くと，作業がしやすいでしょう．
テキストボックス
挿入したい位置にカーソルを置いて，[ツールボックス]ウィンドウの［入力（テキスト）］を選択しダブルクリッ
クします．基本的な設定を変更するには，挿入されたテキストボックスを右クリック[フォームフィールドのプロ
パティ]をクリックし，図 27 のダイアログボックスを表示させます．ここでボックスの名前やボックスに入る文字
数の設定を変更することができます．ボックスのサイズ（入力文字数）は，画面上でマウスを使って変更すること
もできます．
プッシュボタン
挿入したい位置にカーソルを置いて,[ツールバー]ウィンドウの[入力（送信）]または[入力（リセット）]を選び
ダブルクリックします．通常は図 24 のようにデータを送ってプログラムを実行させるボタン「送信」と入力を
取り消すボタン「リセット」の組み合わせとなるでしょう．プッシュボタンの設定については次節で説明します．
スクロールテキストボックス
挿入したい位置にカーソルを置いて，[ツールバー］ウィンドウの[テキスト領域]を選んでダブルクリックします．
設定の変更はテキストボックスと同様です．
ドロップダウンメニュー
挿入したい位置にカーソルを置いて，［ツールバー］ウィ
ンドウの［ドロップダウンボックス］を選んでダブルクリ
ックします．ドロップダウンメニューでは選択肢の設定が
必要です．これを設定するにはまず，挿入したフィールド
をダブルクリックして図 26 のダイアログボックスを表示さ
せ，［追加］ボタンを押して選択肢を追加します．
図 27 テキストボックスのプロパティ
図 26 フォーム領域内の拡大とアレンジ
20
ラジオボタン
挿入した位置にカーソルを置いて，［ツールバー］ウィン
ドウの［入力（ラジオ）］を選んでダブルクリックします．
さらにそのフィールドをダブルクリックして，図 29 のダイ
アログボックスで設定を行います．ラジオボタンはグループ
内での択一となるので，グループ名が必要です．さらに，選
択されたときの値と初期状態を設定します．初期状態が「オ
ン」に設定されたボタンはフォームを開いた時点で「選択」
状態になります．したがって，グループ内で 1 つだけ「オン」
にしておくことができます．
チェックボックス
挿入したい位置にカーソルを置いて，［ツールバー］ウィンドウ
の［入力（チェックボックス）］を選んでダブルクリックします．
さらに図 30 のダイアログボックスで設定をおこないます．この設
定はほぼラジオボタンの場合と同様ですが，チェックボックスはそ
れぞれ独立しており，個々に「オン」「オフ」を指定できるので，
グループではなく個々のボックスの名前を指定することになりま
す．
11.2 フォームデータの送信とその処理
フォームに入力されたデータは，用意されたプッシュボタンが押されると，そのプッシュボタンに定義された処
理へと送られます．したがってデータ送信をおこなうプッシュボタンには，送られたデータを受けて実行される処
理を定義しておく必要があります．その処理には次の 3 通りがあります．
指定したプログラムへ送って処理をさせる
指定された宛先へメールとして入力データを送る
指定されたファイルへ入力データを保存する
処理の設定
プッシュボタンへの処理の設定をおこなうにはまず，挿入するプッシュボタンを選択し，右クリック[フォーム
のプロパティ]を選択します．図 31 のダイアログボックスが表示されるので，「送信先」または「他の送信先」を
選んで，上記の 3 種類いずれかの方法による処理を設定します．フォームに入力されたデータをテキストファイル
に保存するだけであれば設定は簡単で，「送信先」を選択して保存先の「ファイル名」を指定します．保存先は，
このページのファイルが保存されたフォルダを基準とする
ので，そこからのパスを「ファイル名」として記入します．
自分で用意したプログラムを起動させる場合は，結果の保
存先として「ほかの送信先」を選び，ダイアログボックス上
の「オプション」ボタンを押して，表示されるダイアログボ
ックスで処理プログラムを指定します．
入力データの引き渡し
図 29 ラジオボタンのプロパティ
30 チェックボタンのプロパティ
21
図 31 フォームのプロパティの設定
図 32 「ページテンプレート」のダイアログボックス
図 33 フレームページ作成の画面
入力データの引き渡しは，フィールドに付けた名前で行われます．たとえば，あるプログラムを実行するように
した場合は，そのプログラムの中でフィールドに付けた名前を変数名
として用いることにより引用することができます．
12 フレーム
フレームとはブラウザの画面をいくつかの枠（フレーム）に分割して，その 1 つひとつに別々のページを表示す
る機能です．フレームを使用すると，いくつかのページを同時に 1 つのページの中に表示することができます．フ
レームの中のページからリンクを張るページは，その表示先のフレームを指定することができます．
フレームは通常このような機能を利用して，常に目次やバナーを表示しておくことに利用されます．こうすると，
目次のページに戻らなくても，どのページを表示中であっても希望のページを表示させることができます．
12.1 フレームの準備
フレームを利用するときはまず，フレーム自体
のページ（フレームのページ）を作成します．こ
れを SharePointDesigner で作成するときの手順は
次のとおりです．
① メニューの「ファイル」―「新規作成」を選
ぶ．
新規作成のダイアログボックスが表示されます
（図 32 参照）
②図 32 のように「フレーム」タブを選び，その中
から適当なフレームスタイルを選択して［OK］ボ
タンを押す．
図 33 のようなフレームに分割された新しいペー
ジの画面が表示されます．
③ 各フレームの「新しいページ」をクリックする． それぞれ白紙のページが表示されます．
すでに各フレームに入れるページが用意されているときは，「初期ページの設定」を選んで，そのフレームに入る
ページを指示します．
④ フレームページと各フレームに入れるページを保存する．
メニューの「ファイル」―「名前を付けて保存」を選び，各ページとフレームに適当なファイル名を付けて保存
します．ファイル名には半角の英字と数字だけを使用するのがよいでしょう．ここで保存した各ページが，このフ
レームが表示されたときの初期ページとなります．
すでに各フレームに入れるページが用意されている
ときは，フレームページだけの保存になります．
⑤ フレームページを閉じる
メニューの［ファイル］―［閉じる］でフレームと各
ページを閉じます．以上でフレームの準備は終わりです．
12.2 初期ページの編集
フレームの準備で用意したフレームを構成する初期
ページを編集して完成させます．その手順は，通常のペ
ージを編集するときと同じです．まず，「ファイル」―
「開く」でページを開き，その内容を作成します．
12.3 その他のページの作成
22
図 34 表示先フレームの設定
図 35 フレームのプロパティ
フレームのページからリンクする先のページを作成します．これは「新規作成」として作成します．新たなペー
ジを作成する際の通常の手順と同じです．
12.4 リンクの設定
フレーム内のページから他のページにリンクを張るときは，表示するフレームを指定する必要があります．たと
えば，左側のフレームを「メニュー」とし，その中の項目が選ばれたときに，選ばれたページが右側のフレームに
表示されるようにする場合などです．そのような設定をするには，次のような手順でリンクの設定をする必要があ
ります．これにより，リンク先のページの表示フレームを指定します．標準ではリンク先のページはリンク元と同
じページに表示されるので，そのような場合は，表示先のフレームを表示する必要はありません．
①フレームのページを開く
表示先のフレームを指定するには，フレームページの中にそのページが開かれている必要があります．
② リンク個所を選択し，［ハイパーリンク］ボタンを押す．
「ハイパーリンクの作成」ダイアログボックス（図 19 参照）が表示されます．リンク設定の基本操作は通常通
りですが，次のように表示先のフレームの指定が必要です．
この①②の順序は重要です．逆にすると，表示先の指定ができません．順序を間違ったときは，一度各ページを
閉じて，正しい順序で開きなおします．
③ リンク先の URL を入力した後，「ハイパーリンクの作
成」ダイアログボックスの右側にある「ターゲットフレ
ーム」のボタンを押す．
図 34 のダイアログボックスが表示されます．
④ 「作業中のフレーム」で表示先のフレームをクリック
し，「OK」ボタンを押す．
「ハイパーリンクの作成」ダイアログボックスに戻りま
す．
⑤ 「OK」ボタンを押す．
これでリンクの設定が完了します．
12.5 フレームページとフレームの変更
フレームページおよびフレームの表示様式などの設定は必要に応じて変更することができます．これをおこなう
にはまず，次の手順で「フレームのプロパティ」ダイアログボックスを開きます．
① いずれかのフレームを選択する
特定のフレームの設定をおこなう場合は，そのフレームを
選択します．フレームページ全体の設定をおこなうときは，
どのフレームでも構いません．
② 右クリック［フレームのプロパティ］を選択する．
図 35 の「フレームのプロパティ」ダイアログボックスが
開きます．
スクロールバーの表示／非表示
選択されたフレームに入るページにスクロールバーを表
示するかどうかを設定することができます．「表示しない」，
「必要に応じて表示する」，「表示する」の中から選択するこ
とができます．スクロールバーは，そのフレームの内容が表
23
図 36 フレームページのプロパティ編集画面
示しきれないほどの幅や長さになったときに必要になるもので，
このオプションはその際の対応を指示するものです．
スクロールバーの表示に関する指示は，図 35 の「フレームのプロパティ」上の「オプション」―「スクロール
バーの表示」で行います．
フレームのサイズの変更
図 35 の「フレームのプロパティ」上の「フレームのサイズ」で指定します．幅および高さが，ピクセル，相対
比，および％単位で指定できます．
また，フレームのサイズの変更はフレームページの編集画面（図 35）でフレームの境界をドラッグしておこな
うこともできます．
初期ページの変更
初期ページを当初設定したものから別のページ（ファイル）に変更することができます．変更は，「フレームの
プロパティ」上の「初期ページ」の欄で行います．
フレームページ全体に関する変更
フレームページ全体の仕様を変更するには，図 35 上の「フレームページ」ボタンを押し，図 36 の「ページのプ
ロパティ」ダイアログボックスを表示させます．ここでは，次のような変更ができます．
・ フレームを分割する枠線
フレームを分割する枠線は，その幅を変更したり非表示にしたりす
ることができます．この変更は，「ページのプロパティ」ダイアロ
グボックスの「フレーム」タブで行います．
・ フレームページのタイトル
フレームページのタイトルは，このフレームページがブラウザ上に
表示されたときにタイトルバー（ブラウザの最上部）上に表示され
る文字列です．その変更は，「ページのプロパティ」ダイアログボ
ックスの「全般」タブで行います．
