フォント レイアウト リンク・画像 テーブル リスト ページ 特殊文字 小技・雑学
カラーコード お薦めサイト ホーム HP作成ソフト HP作成法

トップページ > 雑学・小技集 > 角が丸いテーブルタグ

角が丸いテーブルタグ
 
  みんなのタグ辞書
シンプルで軽いHTMLタグ辞書サイト。
 
 
角が丸いテーブルの組み方をどこよりも解りやすく解説していきます。


角が丸いテーブルタグの作り方
1.gif 2.gif 3.gif 4.gif
このような、4つの角を、フリーソフトなどで作ります。
PhotoShop Elements等、GIF保存のできる画像制作ソフトが無い時は
PictBearなどで角丸画像を描きPNG形式で 保存すればいいです。
    角丸画像を作るときのコツ
  • 20×20、30×30のように、縦横幅を合わせる。
  • 画像はPNGかGIFで保存する。
  • 画像の名前は解りやすく。例えば「1.gif」など。


テーブルを組みます。
     
     
     
3×3のテーブルをとりあえず用意します。


     
     
     
<Td Width="21" Height="21" Background="1.gif">
四つ角に先ほど作った画像を背景表示し、縦横幅を画像サイズにします。


     
     
     
<Table Border Cellspacing="0" Cellpadding="0">
<Table Border>にCellspacing="0" Cellpadding="0"を追加すると 左のように隙間が無くなります。


     
     
     
ColorDialogを使い 角の画像の色を色コードで取得し、残りのセルの背景の色を指定します。


     
  みんなのタグ辞書
シンプルで軽いHTMLタグ辞書サイト。
 
     
Border="0"にし、真ん中のセルに文字を組みこんで、完成!

[このテーブルのソースを見る]
トップページタグ実験場リンクについて免責事項メール
Copyright © 2001-2006 Hirarin. All Rights Reserved.
since03/06/01