|
ＨＴＭＬ５でも標準でボタンを表示させることができます。今まで画像を使って時間をかけて作ってましたけれど、そういう手間いらずですぐに作りたい時には便利です。書き方はソースを見てください。まずは、autofocusを使ってみましょうか・・。
文字ではなく画像ファイルを指定すると・・以下のようになりますが・・ いまいちです じゃあスタイルシートを使って背景色でも変えてみましょう。 背景に写真を使ってみました。 んんん・・・・ せっかくですから、なにかさせてみましょう。ｏｎＣｌｉｃｋを使ってみました。 別のページに移動させるのは |
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="KEYWORDS" content="HTML5">
<title></title>
<link rel="stylesheet" href="mybutton.css">
</head>
<body STYLE="font-size:1em">
<h1>標準で用意されたボタンを使ってみる</h1>
<div>ＨＴＭＬ５でも標準でボタンを表示させることができます。今まで画像を使って時間をかけて作ってましたけれど、そういう手間いらずですぐに作りたい時には便利です。書き方はソースを見てください。まずは、autofocusを使ってみましょうか・・。</div>
<button type=button name="hanako" autofocus>ただのボタンです。でも表示された最初だけ枠に色がつきます。</button>
<p>文字ではなく画像ファイルを指定すると・・以下のようになりますが・・</p>
<p>いまいちです</p>
<button type=button><img src="mmm.jpg" alt="ボタンです" width="163" height="50"></button>
<hr>
<p>じゃあスタイルシートを使って背景色でも変えてみましょう。</p>
<button id="mdbutton">これはどう？</button>
<p>背景に写真を使ってみました。</p>
<button id="mbuttong">あんまり意味ないかもね</button>
<p>んんん・・・・</p>
<hr>
<p>せっかくですから、なにかさせてみましょう。ｏｎＣｌｉｃｋを使ってみました。</p>
<button type=button
onclick="document.bgColor='#ffff00'">
黄色に変われ
</button>
<button type=button
onclick="document.bgColor='#ffffff'">
白色に変われ
</button>
<button type=button
onclick="alert('アラートって警告でしたっけ。でもこれは警告を使った簡易の単文表示です。')">
簡単なメッセージ表示
</button>
<p>別のページに移動させるのは</P>
<button type=button><a href="../index.html">最初のページへ</a></button>
</body>
</html>
|
スタイルシートの内容です