HTML5ではinput要素とかtype属性で指定できる値がかなり増えたので、以前よりも進化した入力フォームを作ることできます。
いくつかご紹介していきましょう♪
■検索窓
<input type=”search”>
■電話番号
<input type=”tel”>
■URL入力フィールド
<input type=”url”>
→URLとして不適切な文字や記号が入っているとエラーを返してくれる
■ メールアドレス入力フィード
<input type=”email”>
■カレンダーが出てきてくれる日付入力フィード
<input type=”date” value=”初期入力値” />
■数値の入力フィールド
<input type=”number”>
■数値のスライダー
<input type=”range” value=”初期入力値” min=”最小値” max=”最大値” step=”刻み幅” >
■カラーピッカー
<input type=”color”>
いろいろありますね！
これらを使用して華やかな登録フォームを作っていきましょう！
html5の機能で私が最も驚いたものの一つが、ドラッグ＆ドロップです！
それではさっそく、html5を使ったドラッグ＆ドロップのサンプルをご紹介しましょう。
まず、html5のドラッグ＆ドロップはdraggable (ドラッグエイブル?)属性を指定する必要があります。
draggable属性の値には、true、false、値なし、の3種類があります。
ドラッグ＆ドロップができるのは、src属性で指定したimg要素と、href属性が指定された要素になりますのでご注意を！
htmlの記述は下記の通り、
<ul id="cats_name" ondragstart="onDragStart(event)" ondragenter="onDragEnter(event)" ondrop="onDrop(event)" > <li id="ameshort" draggable="true">アメリカンショートヘアー♀ シルバークラシックタビー</li> <li id="scottish" draggable="true">スコティッシュフォールド♀ レッドクラシックタビーアンドホワイト</li> <li id="mainecoon" draggable="true">メインクーン♂ ブラウンマッカレルタビー</li> <li id="ragdoll" draggable="true">ラグドール♂ ブルーバイカラー</li> <li id="somali" draggable="true">ソマリ♂ レッド</li> </ul> <h2 style="font-size:12px;">毛の長さ</h2> <ul id="store2" ondragstart="onDragStart(event)" ondragenter="onDragEnter(event)" ondragover="onDragOver(event)" ondrop="onDrop(event)"> <p>長毛種</p> <li id="nollway" draggable="true">ノルウェージャンフォレストキャット</li> </ul> <ul id="store2" ondragstart="onDragStart(event)" ondragenter="onDragEnter(event)" ondragover="onDragOver(event)" ondrop="onDrop(event)"> <p>短毛種</p> <li id="bengal" draggable="true">ベンガル</li> </ul> <ul id="store2" ondragstart="onDragStart(event)" ondragenter="onDragEnter(event)" ondragover="onDragOver(event)" ondrop="onDrop(event)"> <p>オス</p> </ul> <ul id="store2" ondragstart="onDragStart(event)" ondragenter="onDragEnter(event)" ondragover="onDragOver(event)" ondrop="onDrop(event)"> <p>メス</p> </ul>
つまり、
■受け渡し側(ドラックする側) <ul id="cats_name" ondragstart="onDragStart(event)" ondragenter="onDragEnter(event)" ondrop="onDrop(event)" > <li id="適当なID" draggable="true">ドラックしたい言葉1</li> </ul>
■受け取り側(ドロップされる側) <ul id="store2" ondragstart="onDragStart(event)" ondragenter="onDragEnter(event)" ondragover="onDragOver(event)" ondrop="onDrop(event)"> <li id="適当なID" draggable="true">ドラックしたい言葉2</li> </ul>
として<head>~</head>に下記のスクリプトを書けばOK！
<script>
//ドラッグ開始処理
function onDragStart(event) {
//要素の対象指定
if (event.target.tagName.toLowerCase() == "li") {
//DataTransferにデータを格納
event.dataTransfer.setData("listItemID", event.target.id);
} else {
event.preventDefault();
}
return true;
}
//Dropイベント
function onDrop(event) {
//ドラッグされたデータ取得
var id = event.dataTransfer.getData("listItemID");
var li = document.getElementById(id);
//もう一方のul要素からli要素を削除、ドロップ先に追加
if (li && li.parentNode != event.currentTaget) {
li.parentNode.removeChild(li);
event.currentTarget.appendChild(li);
}
//イベントストップ
event.stopPropagation();
}
//dragover処理
function onDragOver(event) {
//ドラッグを受け付けのためのキャンセル処理
event.preventDefault();
}
//dragenter処理
function onDragEnter(event) {
//DragTransferの格納データが"listItemID"を含む場合受け付け
var types = event.dataTransfer.types;
for (var i = 0; i < types.length; i++) {
if (types[i] == "listItemID") {
return true;
}
}
}
</script>
ちなみに今回の記述は一度ドラックする側からドロップされる側に言葉を移したら、ドラックする側に言葉を戻すことはできないようになっています。
ただ、ドロップされる側の<li>もドラックできるようにdraggable=”true”にしてあるので、同じようにドラック＆ドロップで順番を入れ替えることは可能です。
音楽タグの<audio>について補足説明したいと思います。
<audio>タグも動画と同じように
<audio src=”音楽ファイル.mp3″></audio>
のように記述することで音楽ファイルを再生することができます。
そしてこれだけでなく属性をつけて、いろいろなことができるのです。
・音声を自動再生する
→autoplay属性
・音楽をループ再生
→loop属性
・インターフェースを表示する(音量調節ボタンなど)
→controls属性
もちろん、さらにこのインターフェースをcss3でパワーアップさせることも可能！
皆さんも、ぜひ<audio>タグと属性、試してみてくださいね☆
ウェブページに音楽や動画を埋め込みたい、と思ったら、
これまではフラッシュなどのプラグインで埋め込むことが一般的でしたよね。
html5には新しく<video>タグや<audio>タグなどというメディア用のタグが用意されているので、
プラグインなしで、直接動画や音楽を設置することが可能なのです！
使い方は簡単！
<video src=”動画のファイル名.mp4″></video>
と記述するだけでOK！
これまで画像(写真)をWEBページに乗せていたかのような感覚で、
持っている動画を再生させることができるのです。
Youtubeなどにいちいちアップする必要もなくなりますね！
わざわざ動画からコマ送りでGifアニメを作る必要もなくなります。
皆さんもぜひ利用してみてくださいね！！
ｈｔｍｌ４とhtml5の違いは一つ目にはタグの違いがあります。
これまでのhtmlはdivをたくさん使いましたよね。
ヘッダーなどは、
<div id=”header”></div>
などとして記述していたかと思います。
しかし新しいhtml5では、
<header></header>というタグが存在します。
同じようにフッターは<footer></footer>の中に記述しますし、
サイドバーは<nav></nav>というタグで記述します。
他にもたくさんのタグがあります。
タグを覚えるだけでちょっと大変そう…と思う方もいるかと思いますが、
これによってできることがたくさん増えているわけで…だから頑張って覚えるしかないですね！！
皆さんはHTML5をご存知ですか？
HTML5は普通のHTML言語を用いてゲームやフラッシュのようないろいろな視覚効果を持ったサイトを作ることができる非常に優れた技術です！
最近は大分普及してきて、知らず知らずのうちに目にしている方も多いはず。
このサイトではそんな最新の面白いHTML5のサイトをどんどん紹介していきます。
お楽しみに！！
WordPress へようこそ。これは最初の投稿です。編集もしくは削除してブログを始めてください !