ホームページに写真やイラストを載せるには

写真やイラストをホームページに掲載するための基本操作です。
そのための準備項目、具体的な作業を説明しています。
写真やイラストをホームページに載せたり、背景として表示することができるようになります。

損をしない自動車保険選び損をしないクレジットカード選び銀行の利用・口座維持手数料無料化就職・アルバイト情報
トッブページに戻る文字のサイズを変更する時は Control キーを押しながらマウスのスクロールホイールを回してください　　　　　　　　　　　　　

用意するもの ▲ 写真やイラストを用意します

表示させたい写真または絵	デジカメ・スキャナー・他サイトからのダウンロード等を利用し、あらかじめ表示させたい画像を用意しておきます。 .jpgとか.gifとか.pngがついたファイルで用意してください。用意ができたらCHAPTER １-1で作った「My Homepage」という名前のホルダーに保存します。半角・英数字であればどんな名前でもかまいません。ここでは「hana.jpg」と「saboten.jpg」というファイルを「My Homepage」の中に保存しています。「My Homepage」ホルダーの中身はこんなようになっています。適当な画像が見つからないときはwindowsに最初から用意されているサンプル画像を使い「My Homepage」ホルダーに入れてください。サンプル画像の場所
	「こんな画像では面白くない」という人はネット上にすばらしい画像や背景を無料で提供してくれるサイトがいっぱいあります。このようなサイトからから画像や背景を入手することができます。画像等入手時の注意点素材提供サイトでは『直リンク禁止』という書き方がよくしてあります。これは『画像はあなたのパソコンに保存してから使ってくださいね』という意味です。リンクを利用すると相手のサイトに画像を置いたまま、自分のホームページでその画像を使うことができてしまいますがこれはしないで下さいということです。自分の所に画像が無いと、画像が表示されるたびに画像の置いてあるサイトまで見に行くことになります。表示が遅くなるのは当然ですが何よりも、見にこられるサイトに負担がかかります。何十人、何百人が同じ事をすると非常に大きな負担になってしまいます。無料で提供してくれる画像を使わせてもらうわけですから、できるだけ相手の迷惑にならないようにしたいものです。画像を自分のパソコンに保存するには『ダウンロード』と書いた部分を探し、クリックします。なければ画像の上にマウスポイントを置き、右クリックすると出てくるメニューの中から『名前をつけて画像を保存(S)』を選びます。後は前の章で取り上げた『ファイルの保存方法』と同じ要領です。ファイルは圧縮してあることが多いので、その場合は解凍が必要です。すばらしい素材を提供してくれているサイト牛飼いとアイコンの部屋壁紙&フリー素材屋◆simakozi◆

上に戻る

写真や図形を表示する ▲ 用意した画像をホームページに表示する

ここで覚えるタグは <IMG src="画像のファイル名">というタグだけです。このタグを書いた場所に、指定した画像が表示されます。

早速やってみます。「Notepad」を開いて下のように書き、「gazou.htm」という名前で「My Homepage」に保存します。My Homepage ホルダーの中身は右のようになります。

保存ができたら、「gazou.htm」をIEで開きます。「gazou.htm」をダブルクリックすればIEが起動し、写真が表示されます。

画像を表示させるには、絵でも写真でも「.jpg」「.gif」「.png」のいずれかの形式で保存し、
<IMG src="画像のファイル名">というタグを書くだけです。それだけでタグを書いた場所に、画像が表示されます。
注意点としては、すべてのファイルを必ず同じフォルダーに保存することです(現時点では)。
画像は大きな文字として扱われていますので、改行の指示をしない限り横に並んでいき、スペースがなくなると下に移動します。

上に戻る

画像を背景にする ▲ 用意した画像を背景として利用する

CHAPTER １-1で作った文章の背景に、画像を表示させてみます。
<BODY background="画像のファイル名">～</BODY>というタグを使います。 <BODY>タグは<HTML>タグのすぐ内側に入れます。文章とか、画像の挿入タグ等を書いたら、その一番外側を<BODY>タグではさみ、更にその外側を<HTML>タグではさみます。
実際にやってみます。

<HTML>
<BODY background="hana.jpg">
 週間ファミコン通信90年2月2日号です。 
ドラクエ4の特集が載っています。 
汚れ、破れ、書き込み等なく非常にきれいです。
</BODY>
</HTML>

週間ファミコン通信90年2月2日号です。
ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。

画像を背景に使ったとき、画像のサイズが小さいとタイルを敷き詰めたような状態で、同じ画像が繰り返されていきます。

上に戻る

背景の色を変える ▲

画像を使ったのと同じ要領で、背景の色を変えることができます。
<BODY bgcolor="色の名前">～</BODY>というタグを使います。
実際にやってみます。

<HTML>
<BODY bgcolor="black">

週間ファミコン通信90年2月2日号です。 
ドラクエ4の特集が載っています。 
汚れ、破れ、書き込み等なく非常にきれいです。

</BODY>
</HTML>

週間ファミコン通信90年2月2日号です。
ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。

ここ迄で一応、文章が書け、写真や画像をホームページに表示したり、背景に使用したりすることができるようになりました。しかし画像が表示される位置は左上と決まっていますし、背景は全画面が同じになってしまいます。文章も左上から順に表示されるだけです。
次はこれらを自由自在に配置できるように、レイアウトの方法にトライします。

上に戻る