Chapter4 HTML への画像の挿入とリンク設定 練習 1 "03-03.html" の「スター建設株式会社へのアクセス」の 上の行に、サイズ「6」長さ「70%」の水平線を引きましょう。 1 2 Lesson2 画像の挿入 3 良い画像を作成しても、ホームページに上手に取り入れなかったら価値が 4 発揮できません。 Web コンテンツで利用できる画像データの形式と配置の方法について学 5 習します。 Point 画像の保存形式 画像データの挿入方法に保存形式によ る違いはありません。 Web ページで使用する画像の形式は、 一般的には GIF と JPEG です。 GIF（拡張子 .gif） 修 256 色（8bit）まで使用可能。イラス ◆◆ 画像を挿入する・・・・・・・・・・・・・・・・<img src="画像のURI" > <img>タグを使って、文字の一要素として画像を表示します。 表示する画像ファイルの場所や名前などの情報を<img>タグで指定します。 <img>タグは空要素で、終了タグはありません。 挿入する画像のURIはsrc属性で指定します。 画像に適しています。 JPEG（拡張子 .jpg） 約 1677 万 色（24bit） ま で 使 用 可 能。 写真向きの形式で、色数の多い複雑な 画像に適しています。 PNG（拡張子 .png） 約 1677 万 色（24bit） ま で 使 用 可 能。 <要素名 属性="値"> ト向きの形式で、色数の少ない単調な イラスト向きの形式で、色数の少ない 例）<img src="画像のURI"> 次のサンプルでは、HTMLドキュメントと同じディレクトリ（フォルダ）内にあ る"040101.jpg"をWebページに挿入しています。 <html> 単調な画像に適しています。写真など で使用する場合は、データ量が大きく なってしまうので注意が必要です（し かし、画質の劣化がないので JPEG よ り綺麗に表示されます）。 ※ PNG 形式の画像は、古いブラウザ では対応していません。また、IE6 な どでも対応が不完全です。 <head> <title>イメージデータの配置の例</title> </head> <body> <p>以下に画像を配置します<br /> <img src="040101.jpg" /></p> </body> </html> Point <img> のまとめ ・<img> は 空 要 素 で す。 このHTMLドキュメントをブラウザで開くと次のように表示されます。 XHTML で は <img /> の よ う に、 「（半角スペース）」と「/（スラッ シュ）」を使用してそのタグ自体で 閉じる必要があります。 ・画像は文字と同様に 1 文字の扱いを します。 40 Chapter4 HTML への画像の挿入とリンク設定 練習 2 下記の課題を行いましょう。 1 . "04-01.html"を開いて、2行目に"C4-01.jpg"を配置しましょう。 1 2 . "03-02.html"を開いて、下記の完成例になるように記述しましょう。 2 利用する画像ファイルは"gallery-ei.jpg"です。 3 Hint2 ・箇条書き（順不同リスト）を使用し 4 ます。 5 修 Point ピクセル イメージデータの縦横のサイズはピク ◆◆ 画像のサイズを指定する・・・・・・・・・・・ width属性／height属性 画像のサイズをピクセル（px）という単位を利用して指定することができます。 横のサイズはwidth属性、縦のサイズはheight属性で指定します。 属性を省略した場合は、元になる画像サイズと同じサイズで表示されます。 次のサンプルでは画像ファイル（"040101.jpg"）をサイズを2倍に指定して配置し ています。（"040101.jpg"の画像サイズは幅200px 高さ150pxです。） セルという単位で表します。1 ピクセ ルは画像を構成する最小の点で、複数 のピクセルを並べることで全体として 1 つのイメージデータを表現します。 ピクセル数はグラフィックソフトや ファイルのプロパティで確認します。 Point 画像サイズの指定 ・見た目の大きさを変更しても、画像 <html> のデータ量は変化しません。ただ <head> は悪くなります。サイズの変更は <title>イメージデータのサイズ指定の例2</title> </head> <body> <p> 画像の2倍のサイズを指定して配置します<br /> <img src="040101.jpg" width="400px" height="300px" /> </p> </body> し、画像の大きさを変更すると画質 Photoshop などの画像編集ソフトで 行うのが望ましいでしょう。 ・画像の大きさを変更しない場合で も、サイズの指定は行います。サイ ズを指定することで、指定した領 域をあけて、先にテキスト部分を 表示して、後から指定した領域へ 画像を読み込むので、閲覧者にとっ ては、表示速度を速く感じさせ、読 み込み中のページレイアウトも安 定させることができます。 </html> 41
© Copyright 2024 ExpyDoc
![25-23 Displaying it properly [index.html]](http://s3.expydoc.com/store/data/010394571_1-2a27d274a57df4a68cc5c81d0f944b2a-250x500.png)