htmlタグとcss−すぐに使えるサンプルと小技集

■Site_TOP htmlタグとcss ■Link_Page 相互リンクサイトさま

---

スポンサード リンク

---

◆HTML&CSS◆ ボタンを作る

---

ホームページ上にボタンを表示する方法です。



htmlでボタンを作る

---

button

このボタンのソースは
<button type="button">button</button>



CSSを使ってボタンを作る

---

htmlのソース
<div id="button">
<a href="http://www.faruru.info/" target="_top">html</a>
</div>

CSSのソース
#button a{display:block;margin:0;width:90px;height:15px;color:#FFF;font-size:13px; border-right:10px solid #CDA;border-bottom:2px solid #CDA;background-color:#000;text-align:center;}
#button a:hover{color:#F00;}

---

htmlのソース
<div id="button1">
<a href="http://www.faruru.info/" target="_top">css</a>
</div>

CSSのソース
#button1 a{display:block;margin:0;width:90px;height:15px;color:#FFF;font-size:13px; border-right:10px solid #FA0;border-bottom:2px solid #FA0;background-color:#000;text-align:center;}
#button1 a:hover{color:#F00;}

---

htmlのソース
<div id="button2">
<a href="http://www.faruru.info/" target="_top">domain</a>
</div>

CSSのソース
#button2 a{display:block;margin:0;width:90px;height:15px;color:#FFF;font-size:13px; border-right:10px solid #0AF;border-bottom:2px solid #0AF;background-color:#000;text-align:center;}
#button2 a:hover{color:#F00;}

---

htmlのソース
<div id="button3">
<a href="http://www.faruru.info/" target="_top">html</a>
<a href="http://www.faruru.info/" target="_top">css</a>
<a href="http://www.faruru.info/" target="_top">domain</a>
</div>

CSSのソース
#button3 a{display:block;margin:0;width:90px;height:15px;color:#FFF;font-size:13px; border-left:7px solid #999;border-right:7px solid #999;border-top:1px solid #999;border-bottom:2px solid #999;background-color:#CCC;text-align:center;}
#button3 a:hover{color:#F00;background-color:#FFF;}

---

htmlのソース
<div id="button4">
<a href="http://www.faruru.info/" target="_top">html</a>
<a href="http://www.faruru.info/" target="_top">css</a>
<a href="http://www.faruru.info/" target="_top">domain</a>
</div>

CSSのソース
#button4 a{display:block;margin:0;width:90px;height:15px;color:#FFF;font-size:13px;font-weight:bold; border-left:7px solid #999;border-right:1px solid #999;border-top:1px solid #999;border-bottom:2px solid #999;background-color:#000;text-align:center;}
#button4 a:hover{color:#F00;background-color:#FFF;}
#button4 a{margin:0; padding:0;display:inline;float:left;}



htmlタグ−小技集。

---

• htmlで電子メール
• METAの使用方法
• seo対策用htmlタグ
• スクロールバーの色
• ボタンを作る
• マウスで触れると変化
• 音楽を鳴らそう
• JavaScript入門
• 横線<hr>応用法
• アフィリエイトサイト
• xmlでサイトマップ作成

スポンサード リンク

---