商店主さん向けHTMLセミナー
windows95&Internet Explorler準拠

Chapter 5 Part.1


イメージを試し貼りする!

 画像をはると一挙にお店やさんらしくなりますよぉ。 まず、素材をとりこみましょう。
写真等の使用に関しては、著作権や肖像権に充分に配慮してください。 ここでは教習素材として フリー素材の大御所
「G-Tool」さんの画像を使用いたします。

(左) 100×100ピクセル (右) 250×171ピクセル

これを「shop」フォルダーに保存してみましょう!第一日で格納フォルダを作ろう!と説明した項目を思いだしてください。 「shop」の中の「images」という場所に保存いたしましょう。

画像にカーソルをあて、右クリックから名前をつけて画像を保存(S)を選びます。 保存先を尋ねてきますので、下図の矢印のボタンを押して、まずひたすら上へあがって、 一旦Main Folderにあがり、ここから「Homepage Files」⇒「shop」⇒「images」と下っていきます。
保存する場所(I)が「images」になったら、ファイルの種類(T)はGIFにし、 ファイルの名前(N)を、 左はkanban右はshohinとして、 保存のボタンをおして格納してください!


IMG SRC="" WIDTH=""HEIGHT=""

 これは画像を貼り付けるタグです!「IMG SRC=」には、画像の格納してある場所とファイル名を 「WIDTH=」「HEIGHT=」にはそれぞれ横幅、縦幅を記入してください。これを記述することによって ページの表示が確実に早くなります。 まず冒頭を、以下のように記述してみてください

index.htm-メモ帳
ファイル(F) 編集(E) 検索(S) ヘルプ(H)
<HTML>

<HEAD>
<TITLE>ACLUB ホームページ </TITLE>
</HEAD>

<BODY BGCOLOR="#FFFAFO">
<CENTER>

<H1>
<IMG SRC="images/kanban.gif"WIDTH="100"HEIGHT="100">
<FONT COLOR=red>ようこそAClubへ</FONT>
</H1>

- - - - - - - - - - - -

A CLUBホームページ-Microsoftインターネットエクスプローラ
ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A) ヘルプ(H)

ようこそAClubへ


IMG SRCのALIGN


★上下関係のアラインメント

さて、またここでアラインメントの登場ですね。前回は段落の左右寄せの指定に使用しましたが、 ここでは、画像と文字の位置関係の調整に使用します。なにも指定がない場合は
ALIGN="bottom"
となっていて、両方の下端の線で合わせるようになっているようです。

ALIGN="middle"中央揃え

index.htm-メモ帳
ファイル(F) 編集(E) 検索(S) ヘルプ(H)
<HTML>

<HEAD>
<TITLE>ACLUB ホームページ </TITLE>
</HEAD>

<BODY BGCOLOR="#FFFAFO">
<CENTER>

<H1>
<IMG SRC="images/kanban.gif"WIDTH="100"HEIGHT="100" ALIGN="middle">
<FONT COLOR=red>ようこそAClubへ</FONT>
</H1>

- - - - - - - - - - - -

A CLUBホームページ-Microsoftインターネットエクスプローラ
ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A) ヘルプ(H)

ようこそAClubへ

ALIGN="top"上端揃え

index.htm-メモ帳
ファイル(F) 編集(E) 検索(S) ヘルプ(H)
<HTML>

<HEAD>
<TITLE>ACLUB ホームページ </TITLE>
</HEAD>

<BODY BGCOLOR="#FFFAFO">
<CENTER>

<H1>
<IMG SRC="images/kanban.gif"WIDTH="100"HEIGHT="100" ALIGN="top">
<FONT COLOR=red>ようこそAClubへ</FONT>
</H1>

- - - - - - - - - - - -

A CLUBホームページ-Microsoftインターネットエクスプローラ
ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A) ヘルプ(H)

ようこそAClubへ

 さあ、ここは一番バランス感覚のよいALIGN="middle"を採用いたしましょう!


★テキスト回り込みのアラインメント

 次に商品画像を貼り込んでみます。まず説明文のところに以下のように記述を挿入してください。

<IMG SRC="Images/shohin.gif" WIDTH="250"HEIGHT="171">
<FONT COLOR=green>
私達はまごころで商売をしているAClubです!<BR>
よろしくお願いします!<BR>
送料、振込料はもちろん当社負担です<BR>
お客様のリクエストには全力でお応えいたします!<BR>
まず、我々の素晴らしい商品の数々を<BR>
とくとご覧くださいませ!<P>

webmaster:山田一郎
</FONT>

A CLUBホームページ-Microsoftインターネットエクスプローラ
ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A) ヘルプ(H)

私達はまごころで商売をしているAClubです!
よろしくお願いします!
送料、振込料はもちろん当社負担です
お客様のリクエストには全力でお応えいたします!
まず、我々の素晴らしい商品の数々を
とくとご覧くださいませ!

webmaster:山田一郎

 ここがALIGNの腕の見せどころです!ALIGN="left"で左に寄せて、文字が回り込んでいくように 整形してみましょう。ただ、テキストの回り込みを実行した場合は、必ず <BR CLEAR="all"> で回り込みの解除をする習慣をつけておきましょう。思わぬ時にボロがでるものです。

<IMG SRC="Images/shohin.gif" WIDTH="250"HEIGHT="171" ALIGN="left">
<FONT COLOR=green>
私達はまごころで商売をしているAClubです!<BR>
よろしくお願いします!<BR>
送料、振込料はもちろん当社負担です<BR>
お客様のリクエストには全力でお応えいたします!<BR>
まず、我々の素晴らしい商品の数々を<BR>
とくとご覧くださいませ!<P>

webmaster:山田一郎
</FONT>
<BR CLEAR="all">

A CLUBホームページ-Microsoftインターネットエクスプローラ
ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A) ヘルプ(H)

私達はまごころで商売をしているAClubです!
よろしくお願いします!
送料、振込料はもちろん当社負担です
お客様のリクエストには全力でお応えいたします!
まず、我々の素晴らしい商品の数々を
とくとご覧くださいませ!

webmaster:山田一郎

 では、ALIGN="right"ではどうなるでしょうか。試してみましょう

<IMG SRC="Images/shohin.gif" WIDTH="250"HEIGHT="171" ALIGN="right">
<FONT COLOR=green>
私達はまごころで商売をしているAClubです!<BR>
よろしくお願いします!<BR>
送料、振込料はもちろん当社負担です<BR>
お客様のリクエストには全力でお応えいたします!<BR>
まず、我々の素晴らしい商品の数々を<BR>
とくとご覧くださいませ!<P>

webmaster:山田一郎
</FONT>
<BR CLEAR="all">

A CLUBホームページ-Microsoftインターネットエクスプローラ
ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A) ヘルプ(H)

私達はまごころで商売をしているAClubです!
よろしくお願いします!
送料、振込料はもちろん当社負担です
お客様のリクエストには全力でお応えいたします!
まず、我々の素晴らしい商品の数々を
とくとご覧くださいませ!

webmaster:山田一郎


 では、ここで今まで学習したことをすべて駆使してトップページ、バージョン1を、とりあえず 仕上げてみましょう。今日はもう少しお付き合いください

⇒次へすすむ

kasaya.comBACK HOME