ホームページ基礎知識講座「第6章 画像について」

ホームページ基礎知識

1章; HTML入門
2章; HTMLの基本
3章; リンクについて
4章; 文章の整形
5章; ファイル転送
6章; 画像について

基礎知識「中級編」

基礎知識「上級編」

HTML リファレンス

 ・基本構成編
 ・リンク編
 ・フォント編
 ・テキスト編
 ・画像編
 ・リスト編
 ・テーブル編
 ・フレーム編
 ・フォーム編
 ・拡張タグ編
 ・カラー編

アクセスアップの方法

 ・評価の高いサイト
 ・SEOのメリット
 ・SEO関連語句解説

相互リンクについて

お勧めレンタルサーバー
Click Here! *

■お勧め独自ドメインプラン
違うURLサイト複数製作可

FC2無料ホームページ *

相互リンクでSEO!
やきぶたサーチSEO
アクセスアップ無料情報
ホームページ作成講座
アクセスアップSEO
格安レンタルサーバー
 L 無料レンタルサーバー
チャ−シューメンズ倶楽部
アクセスアップ同好会
ページランクマスター上位
無料ブログ比較&サンプル

今回は今まで学んだ知識で作ったWebページに彩りを添えるイメージ(画像) の扱いについて学びます。

■ WWWで扱うことのできるイメージ

WWWでは、どのようなファイル形式の画像ファイルでも扱えるわけではありません。 画像ファイルというのは、HTMLドキュメントのように単純なテキストのみで記述されたテキストファイルよりも、そのファイル自身の持つ 情報量が多いので、WWWで扱う際にはその画像を圧縮してファイルサイズを小さくしてから、WWWで使用します。

WWWで扱うことのできるイメージには、GIFJPEGPNGBMPなどがあります。

■ どうやって画像ファイルを入手するか

WWWではGIFやJPEGなどのファイル形式の画像ファイルを扱うことが出来ると書きましたが、どうやってそのようなイメージファイルを入手するのでしょうか? その方法としては、

  • 自分で描く
  • スキャナーで読み込む
  • デジタルカメラで撮影したものを使う
  • 市販のWeb作成用クリップアート集を購入して使用する
  • Web上で入手する
などがあります。自分で描いたりスキャナーで読み込んだりする際には自分でファイル形式を変換しなくてはなりませんが、市販のクリップアート集 等を用いる場合はすでにファイル形式をGIFやJPEGに変換してあることが多いので簡単に利用することが出来ます。

上に挙げたものの中で注意してもらいたいのは最後にあげた「Web上で入手する」という方法です。WWWでは表示された画像ファイルを、自由に保存することが できます。ということはWeb上であなたが目にした画像ファイルは全てあなたが使うことが出来るのです。

しかし、そのようなイメージには著作権があり、そのイメージファイルの著作権保持者は他人がWeb上で 自由に使うことを望んでいない可能性もあるのです。ですから、Web上で見つけた画像ファイルを 利用する際には必ず見つけたホームページの作者(イメージの所有者)に利用して良いか尋ねて、承諾を得てから使わなくてはなりません。

■ 画像の表示 <IMG>

画像を入手する事が出来たら、あとはWebで表示させるだけです。
画像を表示させるにはHTMLで以下のように記述します。

<IMG SRC="aaa">

SRC属性では、aaaのところで貼り込みたい画像ファイルのパス名指定します。例えば、image.gif というファイルを張り込む場合、画像ファイルが、ページのあるファイルと同じディレクトリにあれば、

<IMG SRC="image.gif">  また、上にあれば、  <IMG SRC="../image.gif">

のように指定します。画像ファイルのパス指定は絶対パス、 相対パスのどちらでも指定できます。パス指定については第3回の 「絶対パス・相対パスについて」を参照下さい。

使用例;<IMG SRC="../img/icon/ani_new.gif">(相対パスによる指定)

使用例

■ 画像ファイルを転送する

前回、ファイルの転送の仕方を学びましたが、ftpソフトを使う場合前回と全く同一の作業で転送できます。
(ftpソフトの説明を参照してください)

■ 画像を使用する際の注意点

画像をWebに取り入れることが出来ると、見栄えがぐっと良くなる事は事実ですが画像をWebで使用する際にいくつか注意点があります。

  • 本当にその画像が必要か?
  • ファイルサイズ

まず「本当にその画像が必要か?」というのは、その画像を使うことによってデザイン上どんなプラスをもたらすのか、 テキストだけでも表現できる情報を提供するだけではないか、など画像を使う理由をしっかり自覚しましょうということです。

次の「ファイルサイズ」に関しては、画像ファイル自体の大きさを考慮してください。 画像ファイルの大きさが小さければ小さいほど、ページの転送時間は短くて済みます。 ですから画像を使用する際には、出来る限りファイルサイズを小さくするようにしましょう。

HTMLドキュメントは、あなたがドキュメントを置いたサーバからそのドキュメントを見る人のコンピュータまで実際に転送されます。 ですから、画像を含んだドキュメントはテキストだけのものより転送に要する時間が長くかかります。 また、その転送速度も見る人の環境によってまちまちです。中には、低速なネットワークに接続しているため、 1ページを表示するのに何分もかけるのを嫌がる人もいるのです。

画像を使用する際には以上のことを十分検討した上で、使用するようにして下さい。

1GBの大容量 無料ホームページ(商用利用、アフィリエイト可能)  ◎広告収入GETも可能!無料ホームページ作成サービス(携帯・PC対応)

ホームページ・ビルダー12 通常版  ◎ホームページ・ビルダー10 プレミアムパック  ◎ホームページ・ビルダー10初心者おすすめ解説本

初心者におすすめ格安レンタルサーバー ロリポップ(200MB、263円から)   ◎ブログの為の格安レンタルサーバー(月額208円 / 500M 〜)


ホームページ作成講座 TOP

ホームページ作成無料ホームページ スペースホームページ デザインテンプレート1ホームページ デザインテンプレート2