ここから本文
ここから本文

デジタルライフ >  できるシリーズ >  ライフ & ホビー >  ホームページ HTML入門 >  ページ2Powered By できる

ページ2

画像を表示するには
Paint Shop Pro Photo XI体験版で使いたい画像を小さくしたら、実際にその画像をホームページに表示させてみましょう。画像を表示するには、imgタグを使います。
このレッスンで使用するタグ
imgタグを使えば、ホームページに画像を表示できます。表示させる画像ファイルは、src属性で指定します。画像が表示できない場合のために、alt属性で画像の代わりになる文字を指定する必要があります。なお、imgタグには終了タグはありません。
表示する画像を確認する
1画像を表示する
2画像を確認する
画像を表示するタグを入力する
3pタグの入力位置にカーソルを移動する
4pタグを入力する
入力アシスト
< = ＋
> = ＋
/ =
" = ＋
imgタグはpタグで囲んでおこう 詳細を
見る
imgタグは<body>と</body>の間に直接入力せずに、<p>と</p>で囲んで段落の中に入力するようにします。リンクを指定するaタグも同様です。「bodyタグの中にpタグがあって、その中にimgタグやaタグがある」という書き方で統一したほうが、タグの構成がわかりやすくなり、入力ミスを防げます。
画像はいろいろなタグの中に入れられる 詳細を
見る
このレッスンでは、imgタグをpタグで囲んでいますが、ほかにもいろいろなタグの中にimgタグを入れることができます。h1タグの中に入れると、画像を大見出しとして扱うことができ、liタグの中に入れると画像をリストの項目として表示できます。さらにimgタグをaタグの中に入れることで、画像をクリックすると、ほかのページにリンクするしかけも作れるようになります。
5imgタグの前半部分の入力位置にカーソルを移動する
6imgタグとsrc属性を入力する
src属性の値はURL 詳細を
見る
imgタグのsrc属性に指定する値は、本来はファイル名ではなくURLです。<img src="http://〜">のように、「http://」ではじまるURLも指定できます。この章の例のように、画像ファイルとHTMLファイルが同じフォルダにあるときは、ファイル名だけで属性を指定できます。画像ファイルとHTMLファイルを同じフォルダに保存すれば、ファイル名を指定するだけで済むので、imgタグを入力するのが簡単になります。
7alt属性を入力する
alt属性にはどんな値を入れればいいの？ 詳細を
見る
alt属性は、画像の代わりとなる文字を指定するものです。画像を表示できないブラウザーや、ブラウザーの設定で画像の表示をオフにしている場合、画像の読み込みに失敗した場合などのためにあります。写真は、alt属性の値に「シュナのバロン」のような表題となる文章を入力しておきましょう。ブラウザーに画像が表示されなくても、そこにどんな画像があるのか推測できるようになります。
8入力した内容を確認する
9Internet Explorerで確認する
間違った場合は
手順９で画像が表示されないときは、［index.html］ファイルの手順６で入力したファイル名を確認してください。
ショートカットキー
Ctrl＋Escキー　スタートメニュー
Ctrl＋F4キー　閉じる
HTMLファイルと画像は別のファイル
ホームページは１つのHTMLファイルだけでなく、さまざまな種類のファイルで構成されます。画像を使うときは、画像のファイルを別に用意して、HTMLファイルの中にimgタグで指定します。すると、ブラウザー上では文章と画像が組み合わされて表示されます。

<前へ ｜ 1｜ 2｜3｜ 次へ>

出典

ここに掲載した内容は、以下の書籍から抜粋しました。
できるホームページ HTML入門 Windows対応 改訂版できるホームページ HTML入門 Windows対応 改訂版
著者：佐藤和人＆できるシリーズ編集部
発行：株式会社インプレスジャパン
目次を見る | 本を購入する
【著者プロフィール】
フリーライター。HTML関係の記事を多数執筆。おもな著書は『できるホームページ スタイルシート入門 Windows対応』　『できる大事典 HTML&CSS』、『基礎Ajax+JavaScript』（インプレスジャパン）など。kazuto@mvi.biglobe.ne.jp

関連書籍

できるホームページ スタイルシート入門　Windows対応
スタイルシートを使って、ホームページやブログを簡単にデザインできる！ 文字や背景のデザインはもちろん、段組みレイアウトなど、自分のホームページですぐに使えるウェブデザインのテクニックをやさしく解説。サンプルファイルを使って読み進めれば、はじめてでもスタイルシートが簡単に身につきます。
目次を見る | 本を購入する
Copyright (c) 2007 Impress Japan Corporation, an Impress Group company. All rights reserved.このページ上に表示される記事内容、あるいはリンク先の記事内容は MSNおよびマイクロソフトの見解を反映するものではありません。
本文ここまで