頑張ろう！商店主さん向けHTMLセミナー！Chapter 5

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

Chapter 5 Part.2

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

　では、ここで今まで学習したことをすべて駆使してトップページ、バージョン１を、とりあえず仕上げてみましょう。コマンドラインとしては

タイトル部分の画像ALIGNはmiddleを使う！
本文の部分のテキスト回り込みはrightをつかう！

タイトル部分をCENTERタグで中央揃えする！

■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">
<FONT COLOR=red>ようこそＡClubへ</FONT>
</H1>

</CENTER>▲ここまで中央揃え
<IMG SRC="Images/shohin.gif" WIDTH="250"HEIGHT="171" ALIGN="right">
▼ここから文字が左に回り込む

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

webmaster:山田一郎
</FONT>

<BR CLEAR="all">
▲回り込みが終わる

</BODY>
</HTML>

注：オレンジの文字の部分は実際に記述しません

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

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

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

　一見完成したかのように思えますが、このレイアウトは大き目のモニターの場合どんどん文字と画像が離れて配置され、中抜けする！というバグがあります。

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

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

ようこそＡClubへ

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

　大きいディスプレイの中央によせる為に、更に以下のことをしてみましょう

本文の部分を1×1表組みの中にくくってしまう！
⇒本文全体を大きな四角い文字ひとつだと考える

今度は全体をCENTERタグで中央揃えする！

■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">
<FONT COLOR=red>ようこそＡClubへ</FONT>
</H1>

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

<TABLE BORDER=0><TR><TD>▽ここから1×1テーブル
<FONT COLOR=green>
私達はまごころで商売をしているＡClubです！<BR>
よろしくお願いします！<BR>
送料、振込料はもちろん当社負担です<BR>
お客様のリクエストには全力でお応えいたします！<BR>
まず、我々の素晴らしい商品の数々を<BR>
とくとご覧くださいませ！<P>

webmaster:山田一郎
</FONT>
</TD></TR></TABLE>△ここまで1×1テーブル

<BR CLEAR="all">⇒ALIGN="right"を終結

</CENTER>▲ここまで中央揃え
</BODY>
</HTML>

注：オレンジの文字の部分は実際に記述しません

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

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

ようこそＡClubへ

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

　これも一見完成したかのように思えますが、今度は、このレイアウトは小さめのディスプレイの場合文字と画像が重なる恐れがある！というバグがありました。様々な画面がある以上、小さい画面の方のことも考えてページ造りをする義務が、 WEB SHOP MASTERにはあります！この解決策は何処にあるのでしょうか？

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

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

ようこそＡClubへ

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

今日のタグ

<IMG SRC="" WIDTH=""HEIGHT="">画像を貼る

ALIGN="bottom" 画像と文字を下端であわせる
ALIGN="middle" 画像と文字を中央であわせる
ALIGN="top" 画像と文字を上端であわせる

ALIGN="right" 画像を右に配置し文字を回りこませる
ALIGN="left" 画像を左に配置し文字を回りこませる

｜←Chapter4へ｜目次にもどる｜→Chapter6へ｜

BACK HOME