4.画像を入れてみる

さあ、今度は画像を入れて賑やかにしましょう。ここまでくるとグッと形が整ってホームページ らしくなります。


画像をつくる

グラフィックソフトを使って書いたり、スキャナがあれば写真などを取り込んだりして作ります。絵を書くのは苦手〜、という方は得意な方に書いてもらってもいいですね。
また、各ソフトに付いてくる画像データを利用して自分なりに加工するのも手ですし、このページの タイトルのように文字を書いてタイトル代わりにすることもできますね。

画像の保存形式

つくった画像は保存しますが、ホームページではgif(ジフ)という形式で保存して使うのが一般的です。(安価な市販ソフトやオンラインソフト(Lview、PaintShopPro等)もあるので、この際ひとつ揃えておきましょう。)

gifにも2種類のパターンがあります

今までご覧になったホームページでも見られたかと思いますが、同じgif形式でもWWWブラウザ での表示に差があります。gif形式で保存 できるソフトなら、保存時に選択することができます。

  Lviewを使った方法

1.ソフトを起動します。

2.ファイルを指定して開きます。[File]-[Open]

3.ファイルをgifで保存します。 [File]-[Sava_As]・「ファイルの種類」を(gif89a)タイプにして保存します。

4.このソフトは背景の透明化(transparent)ができます (7.画像の応用参照)。詳しくはこちらこちらをどうぞ。

  PSP(Paint Shop Pro)を使った方法

1.PSP(Paint Shop Pro)というソフトを起動します。

2.先程作った画像を読み込みます。[FILE]-[OPEN] ペイントブラシでは[.BMP]という拡張子になっています

3.もし画像が予定していた大きさより大きいとき

方法その1/周辺部を切り取る

範囲選択ツール(点線の四角形のボタン)を押した後、必要な部分を選択し [Edit]-[Copy]し、さらに [Edit]-[Paste](As_New_Image)と選択すると、 余分な部分が消えた新しい絵が出てきます。

方法その2/拡大・縮小する

全体を拡大・縮小するには、まず左下に表示されている現在のサイズ (Image Xの大きさ×Yの大きさ×色数)を確認してから、

[Image]-[Resize]を選び@CustumSizeに好みの大きさを入力して実行します。

A意図していたものと違ったら、[Edit]-[Undo]して直前の作業が取り消せます。

4.最後に[Save-As]で保存画面にして

 @保存の形式(List Types of File)をGIFにして

 A保存ディレクトリを正しく選択して

 Bファイル名をつければ

 GIFファイルの出来上がり。

OPTIONS

 ネットワーク上で大きな画像データは転送に時間がかかるなどの問題が多いので、 減色・縮小してデータサイ ズを小さくした方が良いと思います。


画像を入れるには

<IMG SRC=”画像ファィル名”>
というタグを書いた位置に画像が表示されます。

kuma.gif という画像ファイルを作り、同じディレクトリに保管して
<IMG SRC=”kuma.gif”> と書くと・・・

と表示されます。(タグやファイル名は実際は半角で書きます、念のため。)

★このタグには色々な応用がありますが、ここでは触れません。詳しくはホームページのデザイン を解説した本などを読んでみてください。


画像を使用する際のアドバイス

  1. 一番注意が必要なのは「著作権」ですね。インターネット上、特に非営利の個人ホームページでの利用については未だ曖昧な点がありますが、マナーとして充分注意しましょう。
  2. ファィルサイズの大きな画像は表示に時間がかかります。利用される方の事も考えた使用法を。最大でも100Kbyteを越えなようにしましょう。標準は10〜20Kbyteです。 また表示サイズは、横600pixelを越えないようにしましょう(画面サイズ640x480を標準として表示できるようにしましょう)。
  3. 大きな画像を使用するページがある時は、その前のページで告知しておくと親切です。
  4. 一番最初のページに大きな画像があると全部表示するのに時間がかかり、2度目から来てもらえなくなる場合もあります。
  5. 一般的なホームページデザインの本では、色数は256色以下で作成する事を推奨しています。
  6. 市販の著作権フリーの画像データ集の利用も便利です。


文章を書き、大きさや配置も決めて、画像も入ったら・・・出来上がりをチェックしてみなければ いけませんね。HTMLの作成の基本は「書いたらチェック、修正や追加、またチェック」の繰り返しです。こまめに何度も繰り返して完成させましょう。
ということで、次は「5.できあがりをチェックする」です。


前のページに戻る

ホームページ作成講座へ戻る