前回までの内容
ページの作成方法
(編集・アップロード・確認)
ページはKompozer やメモ帳等で編集する。
ページを公開するには、アップロードをする必要がある。
Internet Explorerなどでページを開き、F5キーで表示を更新。
書式設定と画像の挿入
文字の色、大きさ、見出し
ページの色。タイトル
画像の挿入
前回の作成例
今日の内容
前回紹介しきれなかった
HTMLの機能を紹介します。
リンク
表（テーブル TABLE）
画像、リンク、表を踏まえた応用テクニック。
主にKompozerを使って編集をします。
Kompozerは、学内の場合
共通アプリケーション内に存在します。
リンク
(ハイパーリンク)とは１
リンク
リンクはHTML文章中に埋め込まれた、
他の
HTMLや画像などの位置情報である。
一般的に青い文字に下線がついて表現される。
(例) 詳細はこちら
リンクをクリックするとリンク先にジャンプする。
いろいろなものをリンクにできる
文章をリンク化
画像をリンク化
ボタンやスイッチをリンク化
画像をリンク化した例
押すと別のページにジャンプ
マウスカーソルは
リンクに触れると
手の形になる
リンク
(ハイパーリンク)とは２
リンクの用途
自サイト内の別ページを表示する。
（
2ページ目に移動 など。）
別のサイトに接続する。
（他サイトを紹介する
など。）
ボタンやバナーを作成する。
（画像に対してリンクさせる。）
拡大画像などを見せる。
（小さな画像で一覧表示し、
クリックすると大きな画像を表示。）
バナーや
メニューリスト等も
リンクである。
クリックして大きな画像を表示
リンクの作成例１
Kompozerで文字に対するリンクを作成する
1. リンクの元となる文字を入力。
[ここをクリック] など。
リンク先が何かよく分かる文章が望ましい。
2. 文字を選択し、Kompozerの[リンク]ボタンをクリック。
3. リンク先ページのアドレスや、
ファイル名を入力。
4. ファイルを保存・アップロードし
実際に動作するか確認する。
リンクの作成例２
リンク先として指定できるもの
別ページのアドレス（ＵＲＬ）
(例) http://www.xyz.com/abc.html
別のファイル
(例) mypage.html
注意：呼び出し元のファイルと同じフォルダ内に
リンク先のファイルが存在すること！
画像ファイルなど
(例) myhome.jpg
ブラウザに直接画像が表示されます。
補足：リンク先ページは同一フォルダ内に無いとだめなのか？
厳密にはその必要はありません。
例えば index.html と同じフォルダ内に data フォルダがあり、
data フォルダ中に mypage.html が入っている場合、
リンク先を data/mypage.html と書けば動作します。
ただし index.html より上位のフォルダにはリンクできません。
（サーバーでは index.htmlのあるフォルダが最上位なので。）
リンクを作成する際の注意点
リンク先アドレスは正確に入力する。
コピー 貼り付け 等を使うと確実度アップ。
大文字・小文字なども正確に入力すること。
リンク先が何かよく分かる文章にすること。
クリックしたらどうなるか、どこにつながっているかが
ページ閲覧者に想像できるような文言にする。
[リンクターゲット]
に注意！
詳細は次のページへ
リンクターゲットとは２
通常のリンク
リンクをクリックすると、ウィンドウが書き換わって、リンク先
ページが表示される。（通称
[遷移する] という。）
ターゲットが
[新しいウィンドウ]のリンク
リンクをクリックすると、別のウィンドウや別のタブにリンク先
ページが表示される。
(通称 [別窓] [別タブ] という。)
普通のリンクは画面が切り替わる リンクをクリック時に新しいウィンドウを開ける
リンクターゲットとは３
なぜ
[新しいウィンドウ]が必要なのか？
サイトＡから別のサイトＢへのリンクがあった場合
普通のリンクの場合、
サイトＢを開いて目的のサイトでなかった場合、
ウィンドウを閉じてしまうことが多い。
このとき、サイトＡもウィンドウごと失われてしまう。
ページ閲覧者は、サイトＡに二度と訪問しないかもしれない。
新しいウィンドウリンクの場合、
サイトＢを開いて目的のサイトでなかった場合、
ウィンドウを閉じても、サイトＡのウィンドウが残っているので、
ページ閲覧者は、再度サイトＡの続きを見ることができる。
つまり、外部（B）のサイトにリンクする場合は、
新しいウィンドウに設定しておくと、閲覧者が
自サイト（A）のウィンドウを閉じにくいのでうれしい。
特にリンク集サイトを作るときなどに良い。
リンクの練習をしてみましょう１
現在のページの下部に、
リンク集ページへのリンクを作成してみましょう。
index.html
リンク集の部分をクリックすると、
link.html
2ページ目のリンク集が開く。
さらにさまざまなサイト
にリンク
Yahoo
Google
など
自分専用の使いやすいリンク集を作ってみるのも良いでしょう。
リンクの練習をしてみましょう２
作成手順
リンク集ページを作成
• link.html を新規作成。 index.html と同じフォルダ内に保存すること！
• いくつかの外部サイトへのリンク（別窓）を作る。
リンク集ページを接続
• index.htmlを編集して、link.html へのリンクを作成する。
関連ファイルをアップロード
• index.html と link.html 両方をアップロードすること。
• 動作確認してみること。
自サイト内の別のページにリンクをする際は、
リンク先のページをあらかじめ用意しておいたほうがスムーズです。
表
(テーブル)とは
HTMLの標準機能として備わっている表現の一つ。
いわゆるWORDの表のようなものが作成できる。
表は、HTMLでは <TABLE>というタグで表現されるので
表のことをテーブルと呼ぶことが多いです。
表の作成例
罫線が少し立体的な表現になるのがHTMLによる表の特徴である。
表の各セルに対して、背景色、文字そろえ、縦横サイズ等が
設定できる。
Kompozerで表を作成する
表の作成方法
1. ページ中で表を作成したい位置をクリック。
2. テーブルボタンをクリックして
表のサイズを決める。
表の編集
セルの編集
各セルをダブルクリック または
右クリック
→ セルのプロパティ
セルの[高さ]と[幅]、[背景色]などを決められる。
複数セルを選択し、右クリック → [結合] など。
表の大きさ設定
表の周囲の白い点をドラッグ
または
右クリック → プロパティ
行単位・列単位・テーブル全体
それぞれの高さと幅を決められる。
その他、太字等の書式設定や
画像挿入など一般的な編集ができる。
表編集のテクニック１
幅や高さの％指定
テーブルやセルの幅や高さは通常ピクセル単位で決まる。
％単位で決めることもできる。
％指定ではページ閲覧者のウィンドウのサイズを１００％とし
た割合で、表の大きさを指定できる。
ピクセルとは
パソコン画面のようなデジタル映像は小さな点の集合
体でできています。 その１点が１ピクセルです。
例えばハイビジョンは１画面が1920ｘ1125=2160000個
のピクセルでできています。
ウィンドウいっぱいに
広がる表も作れる。
表編集のテクニック２
罫線のデザインを変える
罫線を太くしたり細くしたり、セルとセルの間隔を調整したりし
て表の見た目を編集できます。
枠線 の太さ
ABC
セル間隔
余白（青く塗った所）
表編集のテクニック３
表の罫線を見えなくする
罫線の太さを０にすると、表の罫線は見えなくなる。
この見えない表を使って、ページのレイアウトを行うテクニックがある。
HTMLでは自由な位置に画像を配置したり、
二段組等の表現ができない。
レイアウトに透明の表が多用される傾向がある。
３段組サイトの例：
この例では、
表の幅
１００％(ウィンドウに対して)
枠線の太さ ０ピクセル
セル間隔 ０ピクセル
に設定しています。
(実際のブラウザでは赤い罫線は見えません。)
表の中に表を作成し、色を塗ることによっ
て複雑なデザインを表現したりもします。
表のテクニック４
画像と表とリンクの組み合わせ
画像を使ったリンクメニューなどが作れます。
表現の幅が広がります。
手軽に画像を用意する：
WORDの図形などを使って素材を用意し、
Snipping Tool 等を使って画像として取り出すと簡単です。
(SnippingToolは画面上の指定した範囲を画像として取り出すアプリケーションです。)
画像の編集にはペイントの他、Paint.NETなども便利です。
表の中に画像を挿入し、
画像に対して
リンクをつけた例。
実際のブラウザ表示。
各ページにジャンプできる。
作成手順
(例)：
1. 画像を作成
2. 表を作成
3. 画像を挿入
4. リンクを作る
5. 表の罫線を消す
次週に続く
