ASP.Netのお勉強
VB.Netのお勉強
phpのお勉強
Excel マクロ・VBAのお勉強
ASP.Netで掲示板を作成しよう
AJAXのお勉強
Javaのお勉強
連想書籍検索
世界の観光地検索
路線図
総合サイトCocoaLiz
tableタグでボタンを作成(CSS)＠Webデザインのお勉強
tableタグとCSSを用いて、ボタンみたいな物を作成します。
こん感じのボタンです。
tableタグとCSSを用いて、ボタンみたいな物を作成します。
こん感じのボタンです。
|
<html> <head> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css"> <!-- /* セルのボーダの間隔をあける */ #tbl1 { border-collapse: separate; } /* tableのtdタグの枠線と色を指定 */ #tbl1 td { border-width: 2px; border-style: solid; border-color: #CCCCCC #333333 #333333 #CCCCCC; background-color: #666666; padding: 3px; text-align: center; } /* リンクの設定 */ #tbl1 a { text-decoration: none; font-weight: bold; color : #FFFFFF; } /* フォーバー時の設定 */ #tbl1 a:hover { color: #FF6666; } --> </style> </head> <body> <table id="tbl1" width="650"> <tr> <td width="20%"><a href="#">LINK1</a></td> <td width="20%"><a href="#">LINK2</a></td> <td width="20%"><a href="#">LINK3</a></td> <td width="20%"><a href="#">LINK4</a></td> <td width="20%"><a href="#">LINK5</a></td> </tr> </table> </body> </html> |