*イメージを貼り付ける [#hba34d1b] **イメージを配置する [#r3de5825] イメージ(画像データ)を配置するには、 ''img''要素と''alt''属性を指定します。 また、''height''、''width''属性で画像の高さや幅も指定できます。 <pre> #pre(novervatim){{ COLOR(red):<img src="COLOR(blue):画像ファイルの場所・名前COLOR(red):" alt="COLOR(blue):代替テキストCOLOR(red):"> COLOR(red):<img src="COLOR(blue):画像ファイルの場所・名前COLOR(red):" alt="COLOR(blue):代替テキストCOLOR(red):" height="COLOR(blue):高さCOLOR(red):" width="COLOR(blue):幅COLOR(red):"> </pre> img要素で指定した場所に、画像を配置します。 alt属性には、画像を表示できない環境で、 画像のかわりに表示させるテキストを設定します。~ 画像の内容を説明するのではなく、 画像によって伝えたい内容を設定します。 なお、画像が意味のない飾りの場合は、 「alt=""」と指定します。 画像の高さと幅は、height属性とwidth属性で、 ピクセル値を使って指定します。 どちらかだけの指定もできます。 もしピクセル値が画像のサイズより大きい場合は画像が拡大され、 ピクセル値が画像のサイズより小さい場合は画像は縮小されます。 <pre> #pre(novervatim){{ COLOR(red):<img src="COLOR(blue):logo.pngCOLOR(red):" alt="COLOR(blue):兵庫大学情報科学センターCOLOR(red):"> </pre> **文字とイメージの縦位置を調整する [#eeff9ee6] イメージの位置を調整するには、''align''属性を指定します。 COLOR(red):なお、この方法は、現在使われているHTML4.01では推奨されていません。 <pre> #pre(novervatim){{ COLOR(red):<img src="COLOR(blue):画像ファイルの場所・名前COLOR(red):" alt="COLOR(blue):代替テキストCOLOR(red):" aligh="COLOR(blue):位置COLOR(red):"> </pre> 同じ行の文字に対して、画像を表示する位置を設定できます。 次のような設定ができます。 -top: 画像の上側と文字の上側を揃える -middle: 画像の中心と文字の下側を揃える -bottom: 画像の下側と文字の下側を揃える **ページ全体の背景イメージを設定する [#pe581dde] ページ全体の背景イメージを設定するには、 body要素に''background''属性を指定します。 COLOR(red):なお、この方法は、現在使われているHTML4.01では推奨されていません。 <pre> #pre(novervatim){{ COLOR(red):<body background="COLOR(blue):画像ファイルの場所・位置COLOR(red):"> ... COLOR(red):</body> </pre> **画像データの利用 [#v4b205d4] ***画像のフォーマット [#n231fcf4] Webページ上で扱うことができる、 画像データのフォーマット(形式)には、 次のものがあります。 :GIF: Graphics Interchange Format (*.gif)| --アイコン、バナー向き(最大で256色しか扱えない) --透過GIFやアニメーションGIFなど機能が豊富 :PNG: Portable Network Graphics (*.png)| --GIFファイルに代わる次世代のフォーマット(フルカラーが扱える) --古いブラウザでは扱えない場合がある :JPEG: Joint Photographic Experts Group (*.jpg, *.jpeg)| --写真、イラスト向き(フルカラーが扱える) --ファイルサイズが小さい(圧縮率を変える) その他に、Web上では扱えないが、 パソコンで一般的に扱われるフォーマットには、 次のものがあります。 Web上で扱うには、画像を変換する必要があります。 :BMP: Bitmap (*.bmp)| --Windows標準の画像フォーマット(「ペイント」で作成できる) --ファイルサイズが大きい(24ビットカラーの場合) --Webページでは使えないので、ほかの形式に変換する必要がある ***素材集の利用 [#a69f7f25] インターネットに公開されている「素材集サイト」にアクセスして、 アイコンの素材を集めます。 ただし、 ''素材集サイトを利用するときには、利用に関する注意事項を確認しましょう''。 「著作権フリー」のように、再利用が許可されているかどうか注意しましょう。 +Yahoo! JAPAN( http://www.yahoo.co.jp/ )にアクセス +「コンピュータとインターネット > インターネット > WWW > ホームページ作成 > グラフィックス、素材」の順にカテゴリを絞り込む +登録されているサイトにアクセスし、画像ファイルを探す +気に入った画像があったら、画像を右クリックする ++メニューから「名前をつけて画像を保存」を選ぶ ++ファイルの保存場所を指定して、「保存」ボタンをクリック **著作権(再掲・追加) [#qeace29f] 「''著作権''」とは、 「''著作物''」(人が創造したもの)に対して 「''著作者''」(著作物を創造した人)が持つ権利です。 原則として、 著作者の了解なしに、 著作物を複製したり販売したりしてはいけません。 -著作物とは?(一部) --文章:小説、脚本、論文、講演 --音楽:歌詞、楽曲、舞踏 --美術:絵画、彫刻、写真、映画 --情報:Webページ、コンピュータのプログラム -著作権はいつ発生する? --特別な手続きは必要なし(創作した時点で自動的に発生) --著作者の死後50年後まで有効 ***参考リンク [#t67d073a] -[[とほほの著作権入門:http://tohoho.wakusei.ne.jp/wwwcopy.htm]] -[[しゅんしゅんの著作権講座:http://www.geocities.jp/shun_disney7/]] &br; &navi2(Lecture/InfoDesignB2004/6th,next);進んでください。 ---- #navi2(Lecture/InfoDesignB2004/6th,prev,toc,next) }} |