記述ソースのまとめ

サンプルHTMLページを用意しました。
先にHTMLソースをご紹介して、その下に実際の表示のされ方を掲載しています。

<html>
<head>
   <title>ボタンのサンプルページ</title>
   <STYLE TYPE="text/css"><!--
      A.btn { text-decoration: none; color: #550000;
                 font-weight: bold; font-size: 11pt; }
      A.btn:hover { color: #ffff55; font-size: 12pt; }
   --></STYLE>
</head>
<body>
   <h1>ボタンのサンプル</h1>

   <table border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td background="ButtonBase.gif" width="100"
                         height="31" align="center">
         <a href="(URL)" class="btn">自己紹介</a>
      </td>
   </tr>
   <tr><td><br></td></tr>
   <tr>
      <td background="ButtonBase.gif" width="100"
                         height="31" align="center">
         <a href="(URL)" class="btn">日 記</a>
      </td>
   </tr>
   <tr><td><br></td></tr>
   <tr>
      <td background="ButtonBase.gif" width="100"
                         height="31" align="center">
         <a href="(URL)" class="btn">イラスト</a>
      </td>
   </tr>
   </table>
</body>
</html>

見え方:

ボタンのサンプル

自己紹介
 
日 記
 
イラスト

ぜひ、試してみて下さい!

というわけで今回は、無地のボタン画像を1つ用意するだけで、いくらでもボタンが作れる方法をご紹介致しました。ぜひ、活用してみて下さい。

なお、無地のボタン画像は、フリー素材サイトなどで多く公開されていますので、気に入った画像を探して利用されると良いでしょう。

【関連記事】



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。