商店主さん向けHTMLセミナーwindows95&Internet Explorler準拠
|
商店主さん向けHTMLセミナー windows95&Internet Explorler準拠 |
Chapter 11 Part.2
| ■新規テキスト文書.txt-メモ帳 |
| ファイル(F) 編集(E) 検索(S) ヘルプ(H) |
|
【今週のヘッドライン】 ●店長の一押しはこれ！ ●他店の追髄許しまへん ●クセになります、このスリル ●こんなん出ましたけど〜
★人気の「TIME CRISIS」に挑戦！
お楽しみ在庫リスト
良心販売！ QUEST FOR FAME ギターの弾けない私も気分はロッカー！！「エアロスミスってなんだ？」って方にもオススメ
スペースインベーダー
ＤＸ人生ゲームU
パズルアリーナ闘神伝 ご注文へはこちらから！ smash決済もよろしく |
ここで我田引水ながら僕の頭の中をご紹介しましょう。ソースからブラウザレイアウトを想像できるような タグ整理をしているため、すでに記述した部分のブラウザ画面と、 これから記述するソース画面を同時に思いうかべることができるます。 つまりメモ帳の画面でありながら、僕には同時にブラウザの画面も見えているのです！ 具体的に示すと以下のようです
| ■index.htm-メモ帳 | ||
| ファイル(F) 編集(E) 検索(S) ヘルプ(H) | ||
|
<HTML> <HEAD> <TITLE>ＡCLUB ホームページ </TITLE> </HEAD>
|
|
【今週のヘッドライン】 ●店長の一押しはこれ！ ●他店の追髄許しまへん ●クセになります、このスリル ●こんなん出ましたけど〜 |
お楽しみ 在庫リスト ♪あ〜こ ♪さ〜と ♪ま〜ほ ♪な〜わ |
<TABLE BORDER=1 WIDTH="100%">
<TR>
<TD BGCOLOR="#B6F46B" WIDTH="50%">
<A HREF=""><FONT SIZE=5>QUEST FOR FAME</FONT></A><BR>
<FONT SIZE=2>ギターの弾けない私も気分はロッカー！！「エアロスミスってなんだ？」って方にもオススメ</FONT>
</TD>
<TD BGCOLOR="#FFFF00">
<A HREF=""><FONT SIZE=5>スペースインベーダー</FONT></A><BR>
<FONT SIZE=2>なつかしいインベーダゲーム！２８００円でＰＳ発売！お家で楽しめますね！！</FONT>
</TD>
</TR><TR>
<TD BGCOLOR="#FFCFFC">
<A HREF=""><FONT SIZE=5>ＤＸ人生ゲームU</FONT></A><BR>
<FONT SIZE=2>大パワーアップ！！で Uの登場で〜す。コントローラー１つでも４人で遊べる</FONT>
</TD>
<TD BGCOLOR="#FA89DD">
<A HREF=""><FONT SIZE=5>パズルアリーナ闘神伝</FONT></A><BR>
<FONT SIZE=2>人気のヒミツは必殺技で初心者でも一発逆転勝利の可能性があるから</FONT>
</TD>
</TR>
</TABLE>
<P>
<TABLE BORDER=3>
<TR>
<TD BGCOLOR="#9CFFCE">
<A HREF = "">
<FONT SIZE=4 ><B>ご注文へはこちらから！</B></FONT></A>
</TD>
<TD BGCOLOR="#9CFFCE">
<A HREF = "">
<FONT SIZE=4 ><B>smash決済もよろしく</B></FONT></A>
</TD>
</TR> </TABLE>
</CENTER>
</BODY>
</HTML>
| ←100%→ | |
|---|---|
| #B6F46B ←50%→ | #FFFF00 |
| #FFCFFC | #FA89DD |
コツは小さい画面でみた時を意識して、見出し部分（パズルアリーナ闘神伝、等）は、
幅を考えて文字数とフォントサイズを決める！ということです。
つまり小画面でみたときも（少なくとも）見出し文は改行されない程度の文字数に押さえる！ということです。
ソースが長くなってきてややこしそうですが、整理して考えれば、少しも難しいことはありません。
すべて、まったく基本的なテーブル構成のなかに文字が配置されているだけです。
まだ理解できない方は、もう一度商用テーブルの基礎知識の項に戻って復習してみてください。
| ■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> <TABLE BORDER=1><TR><TD VALIGN="top">
<FONT COLOR=green>【今週のヘッドライン】</FONT><BR>
<FONT COLOR=tomato SIZE=4>
<A HREF = ""><FONT SIZE=4><B>★人気の「TIME CRISIS」に挑戦！</B></FONT></A><BR>
</TD><TD VALIGN="top" BGCOLOR="#FF9900">
<B>
♪<A HREF="">あ〜こ</A><BR> <B>良心販売！</B><BR>
◆<A HREF="">完全後払い</A><BR> </TD></TR></TABLE> <P>
<TABLE BORDER=1 WIDTH="100%">
<TD BGCOLOR="#B6F46B" WIDTH="50%">
</TR><TR>
<TD BGCOLOR="#FFCFFC">
<TD BGCOLOR="#FA89DD">
</TR>
<TD BGCOLOR="#9CFFCE">
</TR>
</TABLE>
</CENTER> |
| A CLUBホームページ-Microsoftインターネットエクスプローラ | ||||||||
ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A) ヘルプ(H)
| ||||||||
|
|
【今週のヘッドライン】 ●店長の一押しはこれ！ ●他店の追髄許しまへん ●クセになります、このスリル ●こんなん出ましたけど〜 |
お楽しみ 在庫リスト ♪あ〜こ ♪さ〜と ♪ま〜ほ ♪な〜わ |
|
QUEST FOR FAME ギターの弾けない私も気分はロッカー！！「エアロスミスってなんだ？」って方にもオススメ |
スペースインベーダー なつかしいインベーダゲーム！２８００円でＰＳ発売！お家で楽しめますね！！ |
|
ＤＸ人生ゲームU 大パワーアップ！！で Uの登場で〜す。コントローラー１つでも４人で遊べる |
パズルアリーナ闘神伝 人気のヒミツは必殺技で初心者でも一発逆転勝利の可能性があるから |
| ご注文へはこちらから！ | smash決済もよろしく |
最初と二番目のテーブルのBORDERを0にすれば、あたかも消しゴムでガイド線を消すような感覚で、
このトップページは完成です！
「テーブルを感じさせないテーブルが棚立てのポイント」です！
| A CLUBホームページ-Microsoftインターネットエクスプローラ | ||||||||
|
ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A) ヘルプ(H)
| ||||||||
|
|
【今週のヘッドライン】 ●店長の一押しはこれ！ ●他店の追髄許しまへん ●クセになります、このスリル ●こんなん出ましたけど〜 |
お楽しみ 在庫リスト ♪あ〜こ ♪さ〜と ♪ま〜ほ ♪な〜わ |
|
QUEST FOR FAME ギターの弾けない私も気分はロッカー！！「エアロスミスってなんだ？」って方にもオススメ |
スペースインベーダー なつかしいインベーダゲーム！２８００円でＰＳ発売！お家で楽しめますね！！ |
|
ＤＸ人生ゲームU 大パワーアップ！！で Uの登場で〜す。コントローラー１つでも４人で遊べる |
パズルアリーナ闘神伝 人気のヒミツは必殺技で初心者でも一発逆転勝利の可能性があるから |
| ご注文へはこちらから！ | smash決済もよろしく |
｜←Chapter10へ ｜目次にもどる ｜→Chapter12へ ｜
ようこそＡClubへ
BACK HOME