LESSON_4 イメージの挿入

LESSON_4
イメージの挿入
①　画像の挿入
②　画像へのリンク設定
③　Flash データの挿入
④　youtube の挿入
学習目標
Lesson4 では画像や動画といったイメージファイルの挿入方法を学習します。
LESSON
画像
4-1
画像ファイルは単に写真を載せるためのものではなく、 WEB サイトを魅力的に見せるためののナビゲーションや
アイコン・その他装飾などに画像を使用することも多く、見栄えの良い WEB サイトには欠かせないものです。
ここでは、基本的な画像の呼び出し方と必要な設定について理解していきましょう。
イメージファイル（画像）の挿入
画像を表示するためには、 <img> タグを使用します。
HTML ファイルは、 Excel や Word のように文書内に画像を埋め込むことはできないため、画像を表示する際は
表示したい画像を読み出すように指示する必要があります。指示する際には「src=""」という属性を追加して
読み出す画像の保存場所を指定します。
保存場所の指示方法は、前 Lesson で学習した相対パスや絶対パスを使用します。
<img src = " 画像の位置 " alt=" 画像の説明 " />
ファイルへの画像を呼び出します。 <img> タグは単独では使用せず、ｓｒｃや alt とセットで使用します。
「src」には、呼び出すの画像ファイルの位置を、「alt」には画像の内容について記述します。
新規メモ帳からファイルを作成する
<html>
<head>
①　新規にメモ帳を開き、左記のコードを入力しましょう。
<title>
画像の挿入
</title>
</head>
②　入力が済んだら「Lesson4」フォルダにファイル名
「Lesson4-1-1.html」とつけて保存しましょう。
<body>

<img src = "images/pink.jpg" alt=" チューリッ
プ"/>

 長崎の旅行で撮影したピンク色のチューリップで
す。とても綺麗で爽やかです。 
</body>
</html>
チューリップの画像は素材「Lesson4」-「images」フォ
ルダの「pink.jpg」を利用します。
画像の確認
ブラウザで確認しましょう。
写真が表示されました。
ファイルは引き続き使用します。
画像にリンク挿入
画像にリンクを指定する場合は <img> タグをアンカータグ <a> で囲います。
通常のリンクと同じようにアンカータグに「href=""」や「target=""」などの属性を指定できます。
画像へのリンク設定
①　左記の赤字のコードを追記・編集しましょう。
<html>
<head>
<title>
画像へのリンク
②　入力が済んだら「Lesson4」フォルダにファイル名
「Lesson4-1-2.html」とつけて保存しましょう。
</title>
</head>
<body>
今回は外部サイトを開くため、別のウィンドウで閲覧できる

ように属性に「target="_blank"」を設定しています。
<a href="http://www.huistenbosch.co.jp/"
target="_blank">
<img src="images/pink.jpg" alt=" チューリップ " /
></a>

 長崎の旅行で撮影したピンク色のチューリップで
す。とても綺麗で爽やかです。 
 ハウステンボスへ行ってきました。画像を
クリックしてください。
</body>
</html>
段落タグの入力
ブラウザで確認しましょう。
画像をクリックします。
別ウィンドウで
「ハウステンボス」のサイトが表示されました。
alt 属性と title 属性
「img」タグの属性には、「alt」と似た属性で「title」という属性があります。
■　「alt」とは？
画像を表示することができない環境の人に、画像の変わりに表示する代替テキスト。
( 視覚障害者向けの web ページ読み上げソフトの画像部分での読み上げに使われたりもします )
■　「title」とは？
画像に対しての説明や補足説明
IE7 や Firefox2.0 などのブラウザでは、画像の上にマウスをのせるとその画像のポップアップには alt の内容が表示
されていましたが、 IE8 やその他進化したブラウザでは、 alt 属性では内容がポップアップされなくなりました。
最新のブラウザでポップアップを表示させるためには、 title 属性を使用する必要があります。
画像が表示できない時に対応する alt に比べ、画像の補足説明的な位置づけで扱われる title は SEO 的な効果は
低いと言われており、 WEB ページとって重要であるのは alt 属性と考えられています。
ただし、ポップアップを表示させることで補足説明が出ればユーザーにとって分かりやすい作りになりますので、
手間ではありますが、両方の属性を使用するのがもっとも効果的だと言えます。
LESSON
4-2
動画
インターネットの高速化に伴い、 WEB サイトのトップページに Flash などの動画を表示するようになるなど、動画
コンテンツの需要が非常に高くなっています。
画像やテキストだけのページに比べ、動画を配置した動きのあるページは、メッセージを強く伝えることが可能
です。ここでは、動画の中でも需要の高い「Flash」データと「YouTube」の動画の呼び出し方と必要な設定
について理解していきましょう。
Flash データの挿入
HTML 上で動画を表示するためには、 <object> タグを使用します。
画像に比べ、データの種類を指定する必要があるなど多少煩雑な記述になっています。
データの種類を「type="　"」、ファイルの場所の指示に「data="　"」という属性を記述します。
なお、 Dreamweaver などの HTML オーサリングソフトを使用すると、再生方法などの設定部は自動的に入力されます。
<object data=" ファイルの場所 " type= " データの種類 (MIME タイプ )" width=" 横幅 " height=" 高さ " />
<param name="src" data=" ファイルの場所 " />
</object>
HTML ファイルへ動画を呼び出します。 <object> タグは単独では使用せず、
「data」や「type」とセットで使用します。
「data」には、呼び出すの動画ファイルの位置を、「type」にはデータの種類について記述します。
object タグの中に <param> というタグが内包されていますが、この <param> というタグを使い、属性を追加するこ
とで詳細な設定を追加することが出来るようになります。
新規メモ帳からファイルを作成する
<html>
<head>
<title>
Flash の挿入
</title>
</head>
<body>
Flash サンプル 
①　新規にメモ帳を開き、左記のコードを入力しましょう。
②　入力が済んだら「Lesson4」フォルダにファイル名
「Lesson4-1-3.html」とつけて保存しましょう。
使用する動画は素材「Lesson4」-「images」フォルダ
の「flash_advan.swf」を利用します。
<object data="images/flash_advan.swf"
type="application/x-shockwave-flash"
width="700" height="200">
<param name="src" value="images/flash_
advan.swf" />
</object>
</body>
</html>
Flash データを再生する場合のデータの種類は、
「type="application/x-shockwave-flash"」
となります。
また、 Flash データの呼び出しの際は、 param タグ
でも swf ファイルの場所を指定する必要があります。
<param name="src" value="images/flash_
advan.swf">
ブラウザで確認しましょう。
IE のブラウザでは object 要素をローカル環境 ( 自分のパ
①
ソコン内 ) でプレビューする時に警告文が表示されるように
なっています。
自分の知らないところで勝手に悪意のあるプログラムが実
②
行されることを防ぐために出てくるセキュリティの一つです。
今回は自分で実行した設定ですので実行を許可します。
①　ウィンドウ上部に出てくるバーをクリックします。
②　「セキュリティの警告」ダイアログボックスが表示さ
れますので「はい」をクリックします。
HTML ファイルに Flash データを挿入できました。
確認が出来たら、
このファイルを閉じて次のページに進みましょう。
YouTube の挿入
「YouTube」とは、米ネットベンチャー YouTube 社が運営する、動画コンテンツ共有サイトです。
会員登録をすることによって誰でも動画ファイルをアップロードして公開することができ、そのファイルの閲覧は会員
登録をしていないユーザでも無料で閲覧することができるため、非常に多くのユーザーが YouTube 利用しています。
今では個人の趣味のみならず企業や政治団体など幅広いジャンルが YouTube を通してメッセージを発信しており、
WEB サイトを介した情報の発信に欠かせないコンテンツになりつつあります。
ここでは、 YouTube に投稿された動画を自分の HTML ファイルに挿入します。
新規メモ帳からファイルを作成する
<html>
①　新規にメモ帳を開き、左記のコードを入力しましょう。
<head>
<title>
YouTube の挿入
</title>
②　入力が済んだら「Lesson4」フォルダにファイル名
「Lesson4-1-4.html」とつけて保存しましょう。
</head>
<body>
YouTube から動画を挿入します 
</body>
</html>
次に Youtube サイトにアクセスします。
③ Apple 社の YouTube ページにアクセスしてみます。
①
ブラウザを開き、下記の URL を入力してください。
http://www.youtube.com/user/Apple#p/u
アクセスすると左図のような画面が表示され、自動的に
動画が再生されます。
※アクセスするタイミングによって表示される動画は変わり
ます。
④　再生が終わると、左図の様な画面が表示されます。
②
⑤　一番下にある < > のマークをクリックします。
③
これで今見ている YouTube 動画の <object> のソースが
コピーされました。
⑥　先ほど作成したファイルに、
<html>
コピーしたソースを貼りつけましょう。
<head>
<title>
YouTube の挿入
メモ帳の「メニュー」-「編集」-「貼り付け」
（Ctrl+v、mac の場合は command+v）
</title>
</head>
※貼りつけられるソースは動画ごとに違いますので、動画
<body>
が違う場合は左のソースとは詳細が少し異なります。
YouTube から動画を挿入します 
<object style="height: 390px; width:
また、 youtube から取得するソースは XHTML までを想定
640px"><param name="movie"
されていないため <param> タグの末尾のスラッシュのみ
value="http://www.youtube.
を追記しましょう。
com/v/RrJhw_pHMf4?version=3"
/><param name="allowFullScreen"
value="true"><param
⑦　貼り付けが済んだら上書き保存します。
name="allowScriptAccess" value="always"
/><embed src="http://www.youtube.com/v/
RrJhw_pHMf4?version=3" type="application/
x-shockwave-flash" allowfullscreen="true"
allowScriptAccess="always" width="640"
height="390"></object>
</body>
</html>
ブラウザで確認しましょう。
実行時に左図のような警告文が出る場合があります。
これも勝手にプログラムが実行されることを防ぐために出て
くるセキュリティの一つです。
「OK」をクリックしましょう。
HTML ファイルに YouTube の動画を挿入できました。
この他、 google マップなどの便利なツールもほぼ同様の手
順で簡単に利用することが出来ます。
ぜひ試してみると良いでしょう。
確認が出来たら、
このファイルを閉じて章末課題 4 に進みましょう。
Lesson4 章末課題　画像の挿入
ここでは WEB ページのイメージとなる画像を挿入していきましょう。
画像の挿入
「index.html」
「information.html」「store.html」「form.html」に画像を挿入します。
ページに使用される画像データは「xhtmlcss_sozai」の中の「images」に準備してあります。
この「images」フォルダを作成中の「kadai」フォルダに移動して使用しましょう。
ファイルまでのパスは「相対パス」で指定します。
■ヒント　使用するタグ
<img>
「index.html」完成イメージ
使用する画像と代替テキスト
画像：「hapiness.jpg」/ 代替テキスト：「洋菓子・スイーツ専門店アドバーン」
「information.html」完成イメージ
使用する画像と代替テキスト
画像：「logo.gif」/ 代替テキスト：「アドバンスイーツ」
画像：「bar1.gif」/ 代替テキスト：「今月のお勧めスイーツ」
画像：「choco.jpg」/ 代替テキスト：「フレーク・ド・ショコラ」
画像：「tarte.jpg」/ 代替テキスト：「白桃のタルト」
「store.html」完成イメージ
使用する画像と代替テキスト
画像：「logo.gif」/ 代替テキスト：「アドバンスイーツ」
画像：「bar2.gif」/ 代替テキスト：「アクセスマップ」
画像：「map1.gif」/ 代替テキスト：「福岡本店地図」
画像：「map2.gif」/ 代替テキスト：「福岡本店地図」
「form.html」完成イメージ
使用する画像と代替テキスト
画像：「logo.gif」/ 代替テキスト：「アドバンスイーツ」
画像：「bar3.gif」/ 代替テキスト：「お問い合わせフォーム」
完成したら上書き保存をして、次の Lesson に進みましょう。
完成例を見る場合は
「xhtmlcss_sozai」-「lesson4」-「完成例」-「Lesson4 課題完成」内のファイルを確認してください。

Download Report