<input>要素のボタンとの大きな違いは、終了タグ</button>があること。<input>要素は空要素で、終了タグはありませんでしたよね。このため<button>〜</button>の間に、テキストや<img><span>などのインラインの要素を自由に入れる事ができます。それぞれにCSSを指定できるので、デザイン的にも自由度アップ。<input>要素と同じで、「type属性」でボタンの機能を指定します。type=submit(送信)、reset(リセット)、button(汎用ボタン)の3つとも揃っています。:ボタンの機能を指定。CSSで背景に仕込むjavaScriptでキャンセルも(confirm()メソッド)<button>要素の属性一覧<button>要素で「テキスト」のボタンを作ろうまずは<button>〜</button>の中に、テキストを入れてみましょう。属性を何も使わない基本形ボタンの内容がテキストなので、見た目は<input>要素で作ったボタンとあまり変わりませんね。記入欄:送信するHTMLはこちら。<button>送信する</button></form><button>〜</button>の間に書いたテキスト「送信する」が、ボタンの表示になっているところが<input>との大きな違いです。value属性の値」が表示になっていましたね)<button>のtype属性のデフォルトは「submit」なので、このサンプルのように、type属性を指定しなければ「送信ボタン」になります。同じ「送信ボタン」になるってこと。type="reset">と指定します。「送信ボタン」を複数置く場合は、name属性とvalue属性を書きます。submit(送信ボタン)。プログラムが2つのボタンを識別するために、nameとvalue属性が必要です。nameとvalue値がセットで送信されます。CSSを指定したサンプルです。記入欄:この内容で送信しますHTMLはこちら。このように<button>要素の中は他のインラインのHTML要素を入れられます。<button>この内容で<span>送信</span>します</button></form>CSSはこちら。<span>にスタイルを指定しています。letter-spacing:0.5em;}<button>で「画像」を使ったボタンを作ろう次に<button>〜</button>の中に、<img>要素を入れてみましょう。<img>要素だけを置いてみる単純に<img>要素だけを置いてみましょう。<button>のデフォルトスタイルの「枠」などが残り、そこに画像が表示されます。記入欄:HTMLはこちら。<button>要素のボタンは、下のように見えてしまいます。デフォルトスタイルの角丸とグラデーションがしつこく残るんだよね。width・height属性も無視されるし。none」と指定します。まともに表示されてるはず。記入欄:CSSはこちら。none;}<input>要素で作るボタンでも同じ指定をしましたね。CSSで変えよう<img>要素とテキストを置いてみる次は、<img>要素とテキストを一緒に入れてみましょう。デフォルトの「枠」のなかに、それぞれが表示されます。記入欄:内容をご確認の上、送信してくださいHTMLはこちら。none;}</style>デフォルトスタイルの枠をCSSで消すデフォルトの枠や背景色などは、CSSを上書きします。ついでに、PCブラウザでのマウスオーバー時のカーソルも、指先型に変化するように指定しましょう。<button>のスタイルを初期化しています。CSSでスタイルを編集してみましょう。マウスオーバー時の変化を追加<button>要素のデフォルトスタイルでは、マウスオーバー時の変化は定められていないので、CSSを使って追加してみましょう。テキストだけのボタンです。送信HTMLはこちら。class="sampleBtn2">送信</button>CSSはこちら。/*テキストシャドウ*/}/*↓マウスオーバー時の変化。#3e6dcc;}また、CSS3で背景をグラデーションにする事もできます。部分を書き換えるだけ。HTMLは上のサンプルと同じです。/*テキストシャドウ*//*ここまで↑はさっきと同じ。#0f3a83;/*モダンブラウザ用*/}/*↓マウスオーバー時の変化。0.8;}CSSについて、詳細は下記をご覧ください。CSSで背景に仕込む画像をCSSで背景として仕込んだサンプルです。SubmitCSSはこちら。HTMLは上のサンプルと同じです。0;background-image:url(image/image1.jpg);/*背景画像1を指定*/width:200px;height:40px;}/*↓マウスオーバー時の変化。confirm()メソッドを使ってユーザに「OK」か「キャンセル」か確認できます。<input>要素のボタンで指定したものと同じです。TOP)は「OK」すると、ホントに当サイトのトップページに飛ぶので、戻るボタンかなんかで戻ってきてね。if(window.confirm('入力していただいた内容が全て削除されます。else{window.alert('キャンセルします。--></form>CSSはこちら。/*テキストシャドウ*/}/*↓マウスオーバー時の変化。#ce6e6a;}<button>要素の属性一覧<button>要素で使える属性は、<input>要素のボタンと同じです。type="部品の種類"submit(送信ボタン)、reset(リセットボタン)、button(汎用ボタン)の3つ。デフォルトは「submit」なので、typeを指定しなければ送信ボタンになります。type属性と同じです。type="button">トップページへ</button>name="部品の名前(任意のテキスト)"value="初期値(任意のテキスト)"name属性は、複数の送信ボタンを置いて、クリックされたボタンによってプログラムの処理を振り分ける必要がある時に、ボタンを識別するためにつけます。nameの値とセットでvalue属性の値が送信されます。「使用不可」になります。クリックできない状態です。disabled>●これ以降は、HTML5からの新しい属性です。newHTML文書のロード後すぐに、この属性のある要素が自動的にフォーカスされます。autofocus属性は、1つのHTML文書に1つだけ。newform属性で<form>要素につけたIDを呼び出して関連づけます。これによって<button>要素が<form>要素の外に出ていても機能します。form要素でデータ送信可能なフォームである事を示そう」の「HTML5からの変更点」もご覧ください。newこれらはすべて<form>要素での設定を上書きします。type属性の値が「submit」のときだけ使えます。送信ボタンにだけ使えるってこと。グローバル属性も使えます。全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。セレクトメニューを作ろう(select・option・optgroup要素)(ちょっとメモ)整理しよう。input要素で「レンジ(割合)」を選んでもらおう(range)Tweetやる気を保つためにランキングに参加しています。(ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。わかりやすい管理画面で、初めてでもすんなり使えます。両方とも、なんといっても料金が安いです。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。そのままオートリンクになる仕様です。当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません。メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。さん記事の冒頭でも触れていますが、<button>要素は「終了タグがある」ことが最大の特徴です。<input>要素は終了タグが無いので「テキストだけ」か「画像だけ」のボタンになります。)もボタン内に使える。セマンティックに使えるということです。デザインのしやすさだけなら、<input>要素のボタンでも同じかな。デザインはCSSでやるので。↑(ちょっとメモ)整理しよう。基礎から覚える、深く理解できる。yuki★hataせめて月1回の更新をめざします~。