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

Chapter 11 Part.1

テーブルはトップページや商品ページを2倍に活用する棚立てのポイントです。簡単な例ですので是非マスターしておいてください。さて、ここでもういちど「shop」の中のindex.htmに戻りましょう。 IEで開くと以下のようになってるはずですね

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

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

ようこそＡClubへ

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

　さあ、今からこの見出し部分をいかして、テーブル棚立ての実例を学びつつ、トップページをしあげていくのですが、せっかくできたこのindex.htmも、いちおうコピーしておきましょう。（画像部分以外の）画面上を右クリックして「ソースの表示」、そしてそのソースを「名前をつけて保存」で同じshopのフォルダの中で、index2.htmとでもしておいてください。

このように「名前をつけて保存」を使用すると、そのデータを一度他にお引越しさせておいてから改造作業をすすめることができます。

他にも直接ファイルのアイコンを右クリックしながら任意の場所にドラッグして、「ここにコピー」を選ぶ方法もあります

　では、本文の原稿を作成してみましょう。自分がトップページに書きたいことを列記します。新規作成⇒テキスト文書で新しいメモ帳ファイルをつくり、そこにどんどん草稿を書いていきましょう。

■新規テキスト文書.txt-メモ帳

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

【今週のヘッドライン】
●店長の一押しはこれ！
●他店の追髄許しまへん
●クセになります、このスリル
●こんなん出ましたけど～
★人気の「TIME CRISIS」に挑戦！
★金券あつめて一家円満！

お楽しみ在庫リスト
♪あ～こ
♪さ～と
♪ま～ほ
♪な～わ

良心販売！
◆完全後払い
◆送料無料
◆注文書
QUEST FOR FAME
ギターの弾けない私も気分はロッカー！！「エアロスミスってなんだ？」って方にもオススメ
スペースインベーダー
なつかしいインベーダゲーム！２８００円でＰＳ発売！お家で楽しめますね！！
ＤＸ人生ゲームⅡ
大パワーアップ！！で Ⅱの登場で～す。コントローラー１つでも４人で遊べる
パズルアリーナ闘神伝
人気のヒミツは必殺技で初心者でも一発逆転勝利の可能性があるから
ご注文へはこちらから！
smash決済もよろしく

　●や◆が文字変換してもでてこない場合は、こういった特殊記号はどこかのページでみつけるたびに、コピーしておけば便利です。ちなみに僕は「特殊文字」というファイルに以下をコピーしてます。これは「メール新聞」等テキストのみでめりはりをつける場合にも大変便利です。

○● ‡ □■ ☆★ ◆◇ △▽ ▲▼ ◎ ※ゑ ↑ε～o∬ φ 『』【】 ∈ ∋ ⇒ Ω ～♪♭━━━

では、【今週のヘッドライン】から注文書までをレイアウトしてみましょう。 index2.htmソースは閉じて、もう一度画面からindex.htmのソースを表示させてください。そして以下のオレンジの部分を消去（Delete）します。ページレイアウト中はテーブルの枠を表示させておきましょう。BORDER=1にすればよいです。

オレンジ色の部分が消去できたなら、さっそく以下の赤、青、緑色の部分を記述してみましょう。（もちろん例によって、この画面からコピー&貼り付けでもOK！）最も重要な項目を二列表示させるのです。

■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>

<TABLE BORDER=1><TR><TD VALIGN="top">

【今週のヘッドライン】 


●<A HREF = "">店長の一押しはこれ！</A> 
●<A HREF = "">他店の追髄許しまへん</A> 
●<A HREF = "">クセになります、このスリル</A> 
●<A HREF = "">こんなん出ましたけど～</A>

<A HREF = "">★人気の「TIME CRISIS」に挑戦！</A> 
<A HREF = "">★金券あつめて一家円満！</A>

</TD><TD VALIGN="top" BGCOLOR="#FF9900">


お楽しみ 
在庫リスト 

♪<A HREF="">あ～こ</A> 
♪<A HREF="">さ～と</A> 
♪<A HREF="">ま～ほ</A> 
♪<A HREF="">な～わ</A>

良心販売！ 
◆<A HREF="">完全後払い</A> 
◆<A HREF="">送料無料</A> 
◆<A HREF="">注文書</A>
</TD></TR></TABLE>

</CENTER>
</BODY>
</HTML>

★青文字部分はリンクとして、実際にブラウザに映した時にリンク色で表記される部分です。今<A HREF="">となっていますので、どこにも飛びませんが、飛び先のページができれば、ここにパス名を記入すればよいのです

★タグの入れ子の前後関係を整理し、常に把握してください！特にが直下の７行すべてにかかっていることに注目してください。
たとえば、ページ作成ソフトのなかには、いちいち（不要に）FONTの大きさや字体を設定するものもあるようですが、纏めてくくれるものは、そうしたほうがデータサイズは小さくなり表示が早くなります。

★店長の一押しはこれ！のみFONT SIZE=6にしてメリハリをつけています

★こまかいことですが、特殊文字●★♪◆をリンクの中に挟み込む場合とリンクの外に出す場合を組み合わせると、また変化がつきます

★右の項目のみTD BGCOLOR="#FF9900"と着色しています。左項目は最終的にテーブル罫線をはずした時は文字のみ残る感覚になります。

　さてブラウザ上ではどうなったでしょう！index.htmを上書き保存して、そのファイルをIEに送ってみましょう

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

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

ようこそＡClubへ

【今週のヘッドライン】
●店長の一押しはこれ！
●他店の追髄許しまへん
●クセになります、このスリル
●こんなん出ましたけど～
★人気の「TIME CRISIS」に挑戦！
★金券あつめて一家円満！
お楽しみ
在庫リスト
♪あ～こ
♪さ～と
♪ま～ほ
♪な～わ
良心販売！
◆完全後払い
◆送料無料
◆注文書

TDのアラインメント

表項目TDのアラインメントを指定することによって色々に文字を配置することが可能です！特に指定のない場合は、ALIGN="left" （左寄せ）VALIGN="middle"（中央揃え）になります
例えばブラウザに映してみて、どちらかの上部に空きがめだつ場合は、空いているほうのTDに（または両方のTDに） VALIGN="top"を指定すれば効果的です

上下の文字寄せ(VALIGN)

VALIGN="top"	VALIGN="middle"	VALIGN="bottom"
●店長の一押しはこれ！ ●他店の追髄許しまへん ●クセになります、このスリル ●こんなん出ましたけど～	●店長の一押しはこれ！ ●他店の追髄許しまへん ●クセになります、このスリル ●こんなん出ましたけど～	●店長の一押しはこれ！ ●他店の追髄許しまへん ●クセになります、このスリル ●こんなん出ましたけど～

左右の文字寄せ(ALIGN)

ALIGN="left"	ALIGN="center"	ALIGN="right"
●店長の一押しはこれ！ ●他店の追髄許しまへん ●クセになります、このスリル ●こんなん出ましたけど～	●店長の一押しはこれ！ ●他店の追髄許しまへん ●クセになります、このスリル ●こんなん出ましたけど～	●店長の一押しはこれ！ ●他店の追髄許しまへん ●クセになります、このスリル ●こんなん出ましたけど～

指定なし（デフォルトはALIGN="left" VALIGN="middle"）

ALIGN指定なし

●店長の一押しはこれ！
●他店の追髄許しまへん
●クセになります、このスリル
●こんなん出ましたけど～

⇒次へすすむ

BACK HOME