スライドテーブル

C:\Homepage Files\shop\test06.htm-Microsoftインターネットエクスプローラ

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

1

\3900
★ 2

\3900
SOLDOUT 3

\3900
★ 4

\3900
SOLDOUT

　小さい画像一覧から大きい画像に飛ぶ時に、私が使用しているもので、デジカメソフトの「スライドテーブル」からヒントをえました。まず、上の四つの画像を以下の場所に保存いたしましょう。

Shop⇒slide⇒kasayaフォルダ(新規作成）にそれぞれの名前、 blue2.jpg、grey2.jpg、orange2.jpg、yellow2.jpgとして保存！

■test06.htm-メモ帳

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

<BODY BGCOLOR="#FFFAF0">
<CENTER>
<TABLE BORDER="1" BGCOLOR="#FFFFFF">
<TR>

<TD ALIGN="center">
1<BR>
<A HREF="*.htm">
<IMG SRC="../../slide/kasaya/blue2.jpg" WIDTH="85" HEIGHT="85"></A><BR>
\3900<BR>
★
</TD>

<TD ALIGN="center">
2<BR>
<A HREF="*.htm">
<IMG SRC="../../slide/kasaya/grey2.jpg" WIDTH="85" HEIGHT="85"></A><BR>
\3900<BR>
<FONT COLOR=red>SOLDOUT</FONT>
</TD>

<TD ALIGN="center">
3<BR>
<A HREF="*.htm">
<IMG SRC="../../slide/kasaya/orange2.jpg" WIDTH="85" HEIGHT="85"></A><BR>
\3900<BR>
★
</TD>

<TD ALIGN="center">
4<BR>
<A HREF="*.htm">
<IMG SRC="../../slide/kasaya/yellow2.jpg" WIDTH="85" HEIGHT="85"></A><BR>
\3900<BR>
<FONT COLOR=red>SOLDOUT</FONT>
</TD>

</TR>
</TABLE>
</CENTER>
</BODY>

shop/page/test/test07.htm

のし

C:\Homepage Files\shop\test07.htm-Microsoftインターネットエクスプローラ

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

お
中
元

　

宮
武

　これは、お中元の「のし」をHTMLのみで表現したものです。他にも、もっとよい方法もあったのですが、色々なブラウザの最大公約数をとってこのような記述にしました。できるだけ画像を使用せず、いかに画像に接近させるかがページ書きの「腕の見せ所」であります。

ポイントは一文字ごとに改行して擬似的に縦書き表現していることと、THを使用していることです。
中央の部分には、 Shift+スペースをうつか、それでうまくいかない場合は何がしかの文字をいれて、文字色を赤にして同化させてください

TH

　THは「表項目の見出し」の意味ですが、これはTDと太字＋中央揃えを併せた複合タグです。表組みの見出しだけでなく、こういう使い方もできます。

■test07.htm-メモ帳

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

<BODY BGCOLOR="#FFFAF0">
<TABLE BORDER=1><TR><TH BGCOLOR=White WIDTH=150>
<FONT FACE="ＭＳＰ明朝" SIZE=5>
お<BR>
中<BR>
元<BR>
</FONT>
</TD></TR>
<TR><TD WIDTH=150 HEIGHT=3 BGCOLOR=red>
<FONT SIZE=1>　<FONT>
</TD></TR>
<TR><TH BGCOLOR=White WIDTH=150>
<FONT FACE="ＭＳＰ明朝" SIZE=5>
宮<BR>
武<BR>
</FONT>
</TH></TR></TABLE>
</BODY>

shop/page/test/test08.htm

額縁

C:\Homepage Files\shop\test08.htm-Microsoftインターネットエクスプローラ

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

　まるで絵画の展覧会をみているような額縁を表現します。ポイントはBORDERを色々違った数値にすることによって、よりリアル感を出すということです。 kasaya.comの画像を以下に保存します

Shop⇒imagesフォルダにtentou3.jpgの名前として保存！

■test08.htm-メモ帳

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

<BODY BGCOLOR="#FFFAF0">
<CENTER>
<TABLE BORDER=2 ><TR><TD>
<TABLE BORDER=1 ><TR><TD>
<TABLE BORDER=4 ><TR><TD WIDTH="298" HEIGHT="58">
<IMG SRC="../../images/tentou3.jpg" WIDTH="298" HEIGHT="58">
</TD></TR></TABLE>
</TD></TR></TABLE>
</TD></TR></TABLE>

</CENTER>

</BODY>

shop/page/test/test09.htm

カレンダーつきお届け表

C:\Homepage Files\shop\test09.htm-Microsoftインターネットエクスプローラ

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

商用テーブル技の最後は「カレンダーつき期日指定ボタン」です。オーダーフォームの解説はまた後ほどとして、私は「White Day」や「母の日」「父の日」にこれを活用して、お客様にも大好評をえました。ギフトに重きをおいているお店の方は、是非御活用くださいませ。

７項目×６列のテーブルですが、私は作成ソフトのテーブルウイザードなど使用せず、全部手打ちしました！整然とソースをレイアウトすれば、少しも難しいことではありません。日曜日は赤色の文字、「父の日」当日の項目のBGCOLORを白にしています

一番上の列はTDをTHにして太字、作成上の注意としては、フォーム（送信）のファイルであることを宣言！する <FORM></FORM>がなくてもIEでは○が出るのに対し、NNでは○がでません。必ず双方のブラウザで確認しましょう！

CAPTION

表題です！TABLEとTRの間に記述します。 NNでは全く表の外側にでますが、IEは表の延長上に、表と同じBGCOLORの上に文字が載ります！ ALIGN(アラインメント）にはtopとbottomがあるようですが、表の下に表題を出すbottomはメッタに使用しません

■test09.htm-メモ帳

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

<BODY BGCOLOR="#FFFAF0">
<FORM>
<CENTER>

<FONT COLOR=NAVY SIZE=5><B>お届け日指定</B></FONT>
<P>

<TABLE BORDER=2 BORDERCOLOR=green BGCOLOR="#FFDDAA">
<CAPTION>６月１５日　父の日</CAPTION>
<TR>
<TH>SUN</TH>
<TH>MON</TH>
<TH>TUE</TH>
<TH>WED</TH>
<TH>THU</TH>
<TH>FRI</TH>
<TH>SAT</TH>
</TR>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
<TD>7</TD>
</TR>
<TR>
<TD><FONT COLOR=red>8</FONT><INPUT TYPE="RADIO" NAME="配達期日" VALUE="8"></TD>
<TD>9<INPUT TYPE="RADIO" NAME="配達期日" VALUE="9"></TD>
<TD>10<INPUT TYPE="RADIO" NAME="配達期日" VALUE="10"></TD>
<TD>11<INPUT TYPE="RADIO" NAME="配達期日" VALUE="11"></TD>
<TD>12<INPUT TYPE="RADIO" NAME="配達期日" VALUE="12"></TD>
<TD>13<INPUT TYPE="RADIO" NAME="配達期日" VALUE="13"></TD>
<TD>14<INPUT TYPE="RADIO" NAME="配達期日" VALUE="14"></TD>
</TR>
<TR>
<TD BGCOLOR=white><FONT COLOR=red>15</FONT><INPUT TYPE="RADIO" NAME="配達期日" VALUE="15"></TD>
<TD>16
</TD>
<TD>17</TD>
<TD>18</TD>
<TD>19</TD>
<TD>20</TD>
<TD>21</TD>
</TR>
<TR>
<TD><FONT COLOR=red>22</FONT></TD>
<TD>23</TD>
<TD>24</TD>
<TD>25</TD>
<TD>26</TD>
<TD>27</TD>
<TD>28</TD>
</TR>
<TR>
<TD><FONT COLOR=red>29</FONT></TD>
<TD>30</TD>
<TD>　</TD>
<TD>　</TD>
<TD>　</TD>
<TD>　</TD>
<TD>　</TD>
</TR>
</TABLE>

</CENTER>
</FORM>

</BODY>

　かさねて復習しときますよぉ。

上のメモ帳の画面のデータ部分をぜ～んぶマウスでひっぱって反転選択し、Ctrl+Cでコピー！
それをpageの中のtestフォルダに作成した新規テキスト文書に貼り付け！
そして名前をtest09.htmに変更！
あとはただブラウザで開いてみるだけ！この表組みはあなたのものですよ。

　どうですか？test01.htmからtest09.htmまで、それぞれのテーブル技はちゃんとあなたのディスクに再現され保存されましたでしょうか。

｜←Chapter9へ｜目次にもどる｜→Chapter11へ｜

BACK HOME