ＫＩＤ京都インターネット同好会
勉強会資料 H12/2/12 長谷川
ほとんどＨＴＭＬだけでできるこんなデザイン
目的：サクサク画面の出てくるかっこいいホームページを作ろう

■枠で囲む

おいしいもの
■すき焼き
■卵焼き
■ぎょうざ

ソース
基本は、背景色を決定した<table>を２重に書く 

<style type="text/css">
A:link{color:#000000;text-decoration:none;}
</style>・・・スタイルシート・リンクの下線をなくす
</head>
<body>
<table border=0 cellpadding=3 width=120>
 <tr>
  <td bgcolor="#339966" align=center><font color="#ffffff"><b>おいしいもの</b></font>・・・背景色決定
   <table border=0 cellspacing=0 width=114>
    <tr>
     <td bgcolor="#ffff99">
<a href="suki.htm"><font color="#996600">■</font>すき焼き</a><br>
<a href="tama.htm"><font color="#ff3300">■</font>卵焼き</a><br>
<a href="gyo.htm"><font color="#99ff99">■</font>ぎょうざ</a>
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>



■枠で囲む＋角を丸く

サラダの店サンチョ

基本は、角の小さな画像を用意する。
用意する画像・・下の４個

　 　 　

Netscapeはセルの中に何も無いと<td width=5 height=50>等にて、幅、高さが決められないので１ピクセルの透明GIFなどを置く。

ソース 

<table cellpadding=0 cellspacing=0 border=0>
 <tr>
  <td rowspan=2 colspan=2 width=11><img src="./imggif/c1.gif" width=11 height=11></td>
  <td bgcolor="#009900" height=5><img src="./imggif/1x1.gif"></td>
  <td rowspan=2 colspan=2 width=11><img src="./imggif/c2.gif" width=11 height=11></td>
 </tr>

 <tr>
  <td bgcolor="#ffff66" height=6><img src="./imggif/1x1.gif"></td>
 </tr>

 <tr>
  <td bgcolor="#009900" width=5 height=50><img src="./imggif/1x1.gif"></td>
  <td bgcolor="#ffff66" width=6><img src="./imggif/1x1.gif"></td>
  <td bgcolor="#ffff66" align="center" width=479>
   <table border=0>
    <tr>
     <td width=60 align=center valign=top><img src="./imggif/pin.gif" width=18 height=25></td>
      <td width=359 align="center"><font size=6><font color="#ff0000">サラダの店<font size=7>サンチョ</font></font></td>
     <td width=60 align=center valign=top><img src="./imggif/pin.gif" width=18 height=25></td>
    </tr>
   </table>
  </td>
  <td bgcolor="#ffff66" width=6><img src="./imggif/1x1.gif"></td>
  <td bgcolor="#009900" width=5><img src="./imggif/1x1.gif"></td>
 </tr>

 <tr>
  <td rowspan=2 colspan=2 width=11><img src="./imggif/c3.gif" width=11 height=11></td>
  <td bgcolor="#ffff66" height=6><img src="./imggif/1x1.gif"></td>
  <td rowspan=2 colspan=2 width=11><img src="./imggif/c4.gif" width=11 height=11></td>
 </tr>

 <tr>
  <td bgcolor="#009900" height=5><img src="./imggif/1x1.gif"></td>
 </tr>
</table>


■縦線を引く


ハイビスカス
ササユリ

テッポウユリ
ササユリ

ソース
基本は、<table>の背景色で線を引く 

<table cellpadding=0 cellspacing=0 border=0>
 <tr>
  <td width=3 rowspan=2 bgcolor="#006600"><img src="./imggif/1x1.gif"></td>
  <td width=10 rowspan=2><img src="./imggif/1x1.gif"></td>
  <td align=center><img src="./imgjpg/image16s.jpg" width=98 height=63><br>ハイビスカス<br><br></td>
  <td width=10 rowspan=2><img src="./imggif/1x1.gif"></td>
  <td width=3 rowspan=2 bgcolor="#006600"><img src="./imggif/1x1.gif"></td>
  <td width=10 rowspan=2><img src="./imggif/1x1.gif"></td>
  <td align=center><img src="./imgjpg/image17s.jpg" width=98 height=63><br>ササユリ<br><br></td>
  <td width=10 rowspan=2><img src="./imggif/1x1.gif"></td>
  <td width=3 rowspan=2 bgcolor="#006600"><img src="./imggif/1x1.gif"></td>
 </tr>
 <tr>
  <td align=center><img src="./imgjpg/hana2s.jpg" width=98 height=63><br>テッポウユリ<br><br></td>
  <td align=center><img src="./imgjpg/hana7s.jpg" width=99 height=65><br>ササユリ<br><br></td>
 </tr>
</table>


■線を引く


ハイビスカス
ササユリ


テッポウユリ

ササユリ

ソース 

<table cellpadding=0 cellspacing=0 border=0>
 <tr>
  <td align=center><img src="./imgjpg/image16s.jpg" width=98 height=63><br>ハイビスカス<br><br></td>
  <td width=10><img src="./imggif/1x1.gif"></td>
  <td width=3 rowspan=3 bgcolor="#006600"><img src="./imggif/1x1.gif"></td>
  <td width=10><img src="./imggif/1x1.gif"></td>
  <td align=center><img src="./imgjpg/image17s.jpg" width=98 height=63><br>ササユリ<br><br></td>
 </tr>
 <tr>
  <td height=3 colspan=2 bgcolor="#006600"><img src="./imggif/1x1.gif"></td>
  <td height=3 colspan=2 bgcolor="#006600"><img src="./imggif/1x1.gif"></td>
 </tr>
 <tr>
  <td align=center><br><img src="./imgjpg/hana2s.jpg" width=98 height=63><br>テッポウユリ<br><br></td>
  <td width=10><img src="./imggif/1x1.gif"></td>
  <td width=10><img src="./imggif/1x1.gif"></td>
  <td align=center><br><img src="./imgjpg/hana7s.jpg" width=99 height=65><br>ササユリ<br><br></td>
 </tr>
</table>