Top > Lecture > JouhouC2007 > 8th > image
AND OR

イメージを貼り付ける

イメージを配置する

イメージ(画像データ)を配置するには、 img要素とalt属性を指定します。 また、heightwidth属性で画像の高さや幅も指定できます。

<img src="画像ファイルの場所・名前" alt="代替テキスト">
<img src="画像ファイルの場所・名前" alt="代替テキスト" height="高さ" width="">

img要素で指定した場所に、画像を配置します。 alt属性には、画像を表示できない環境で、 画像のかわりに表示させるテキストを設定します。
画像の内容を説明するのではなく、 画像によって伝えたい内容を設定します。 なお、画像が意味のない飾りの場合は、 「alt=""」と指定します。

画像の高さと幅は、height属性とwidth属性で、 ピクセル値を使って指定します。 どちらかだけの指定もできます。 もしピクセル値が画像のサイズより大きい場合は画像が拡大され、 ピクセル値が画像のサイズより小さい場合は画像は縮小されます。

<img src="logo.png" alt="兵庫大学情報科学センター">

文字とイメージの縦位置を調整する

イメージの位置を調整するには、align属性を指定します。 なお、この方法は、現在使われているHTML4.01では推奨されていません。

<img src="画像ファイルの場所・名前" alt="代替テキスト" aligh="位置">

同じ行の文字に対して、画像を表示する位置を設定できます。 次のような設定ができます。

  • top: 画像の上側と文字の上側を揃える
  • middle: 画像の中心と文字の下側を揃える
  • bottom: 画像の下側と文字の下側を揃える

ページ全体の背景イメージを設定する

ページ全体の背景イメージを設定するには、 body要素にbackground属性を指定します。 なお、この方法は、現在使われているHTML4.01では推奨されていません。

<body background="画像ファイルの場所・位置">
 ...
</body>

画像データの利用

画像のフォーマット

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ページでは使えないので、ほかの形式に変換する必要がある

素材集の利用

インターネットに公開されている「素材集サイト」にアクセスして、 アイコンの素材を集めます。 ただし、 素材集サイトを利用するときには、利用に関する注意事項を確認しましょう。 「著作権フリー」のように、再利用が許可されているかどうか注意しましょう。

  1. Yahoo! JAPAN( http://www.yahoo.co.jp/ )にアクセス
  2. コンピュータとインターネット > インターネット > ホームページ、ウェブサイト > ホームページ作成 > グラフィックス、素材」の順にカテゴリを絞り込む
  3. 登録されているサイトにアクセスし、画像ファイルを探す
  4. 気に入った画像があったら、画像を右クリックする
    1. メニューから「名前をつけて画像を保存」を選ぶ
    2. ファイルの保存場所を指定して、「保存」ボタンをクリック

著作権(再掲・追加)

著作権」とは、 「著作物」(人が創造したもの)に対して 「著作者」(著作物を創造した人)が持つ権利です。 原則として、 著作者の了解なしに、 著作物を複製したり販売したりしてはいけません。

  • 著作物とは?(一部)
    • 文章:小説、脚本、論文、講演
    • 音楽:歌詞、楽曲、舞踏
    • 美術:絵画、彫刻、写真、映画
    • 情報:Webページ、コンピュータのプログラム
  • 著作権はいつ発生する?
    • 特別な手続きは必要なし(創作した時点で自動的に発生)
    • 著作者の死後50年後まで有効

参考リンク


次へ進んでください。



Reload   Diff   Front page List of pages Search Recent changes Backup Referer   Help   RSS of recent changes
Last-modified: Tue, 11 Mar 2014 02:20:22 HADT (3691d)