商店主さん向け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>ＡCLUB ホームページ </TITLE>
</HEAD>

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

<H1>
<IMG SRC="images/kanban.gif"WIDTH="100"HEIGHT="100">
ようこそＡClubへ
</H1>

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

A CLUBホームページ-Microsoftインターネットエクスプローラ

ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A)　ヘルプ(H)

ようこそＡClubへ

IMG SRCのALIGN

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

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

ALIGN="middle"中央揃え

■index.htm-メモ帳

ファイル(F)　編集(E)　検索(S) ヘルプ(H)

<HTML>

<HEAD>
<TITLE>ＡCLUB ホームページ </TITLE>
</HEAD>

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

<H1>
<IMG SRC="images/kanban.gif"WIDTH="100"HEIGHT="100" ALIGN="middle">
ようこそＡClubへ
</H1>

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

A CLUBホームページ-Microsoftインターネットエクスプローラ

ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A)　ヘルプ(H)

ようこそＡClubへ

ALIGN="top"上端揃え

■index.htm-メモ帳

ファイル(F)　編集(E)　検索(S) ヘルプ(H)

<HTML>

<HEAD>
<TITLE>ＡCLUB ホームページ </TITLE>
</HEAD>

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

<H1>
<IMG SRC="images/kanban.gif"WIDTH="100"HEIGHT="100" ALIGN="top">
ようこそＡClubへ
</H1>

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

A CLUBホームページ-Microsoftインターネットエクスプローラ

ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A)　ヘルプ(H)

ようこそＡClubへ

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

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

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

<IMG SRC="Images/shohin.gif" WIDTH="250"HEIGHT="171">

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

A CLUBホームページ-Microsoftインターネットエクスプローラ

ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A)　ヘルプ(H)

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

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

<IMG SRC="Images/shohin.gif" WIDTH="250"HEIGHT="171" ALIGN="left">

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

 

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

<IMG SRC="Images/shohin.gif" WIDTH="250"HEIGHT="171" ALIGN="right">

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

 

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

⇒次へすすむ

BACK HOME