WEB制作(html・css(スタイルシート))に関する各種メモ書き:タグ「html5」での検索

iPhoneでフォーム入力時に 数字だけのキーボードを表示させる

iPhoneやandroidなどスマホでフォーム入力時に 数字だけのキーボードを表示させるには
pattern を使用します。

例 :

<input type="text" pattern="\d*">

とします。

もちろん

<input type="number" pattern="\d*">

でもOKです。

No.1169
11/10 17:42

edit

html5
携帯スマホサイト
iPhone
フォーム

HTML5ビデオを埋め込む。またiPhone, iPadで自動再生…。

HTML5ビデオを自動演奏(autoplay)埋め込むコードは

<video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer autoplay> 
</video> 

iPhone, iPadでautoplayを行うには…。

残念ながらiOSの仕様上必ず画面を一度はクリックしないと再生はできなくなっています。

No.736
07/17 18:15

edit

html5

HTML5の動画Playerライブラリ

YoutubeやVimeoでは HTML5 の動画プレイヤーが採用されていますが、
HTML5の動画Playerライブラリを調べてみます。

■ videoJS
http://videojs.com/


■ sublime video
http://jilion.com/sublime/video


■ mediafront
http://mediafront.org/


No.733
08/02 14:40

edit

html5

HTML5での追加タグと記述サンプル

■ HTML5での追加タグは以下の通り

video
section
time
rt
ruby
progress
rp
output
nav
menu
meter
mark
legend
keygen
header
footer
figure
dialog
details
datalist
command
canvas
audio
aside
article

■ HTML5のサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
	<title>HTML 5</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="XXXXX.css" />
</head>
<body>
	
	<header>
	  <h1>Header</h1>
		<nav><ul>
			<li><a href="#">home</a></li>
			<li><a href="#">portfolio</a></li>
			<li><a href="#">blog</a></li>
			<li><a href="#">contact</a></li>
		</ul></nav>
	</header>

	<section>
		<ol id="posts-list" class="hfeed">
			<li><article>
				<header><h2><a href="#">article title 1</a></h2></header>
				<footer>
					<abbr title="2005-10-10T14:07:00-07:00">
						8th October 2009
					</abbr>
					<address>By <a href="#">User 1</a></address>
				</footer>
				<div>contents contents contents contents contents contents contents contents contents </div>
			</article></li>

			<li><article>
				<header><h2><a href="#">article title 1</a></h2></header>
				<footer>
					<abbr title="2005-10-10T14:07:00-07:00">
						8th October 2009
					</abbr>
					<address>By <a href="#">User 1</a></address>
				</footer>
				<div>contents contents contents contents contents contents contents contents contents </div>
			</article></li>

			<li><article>
				<header><h2><a href="#">article title 1</a></h2></header>
				<footer>
					<abbr title="2005-10-10T14:07:00-07:00">
						8th October 2009
					</abbr>
					<address>By <a href="#">User 1</a></address>
				</footer>
				<div>contents contents contents contents contents contents contents contents contents </div>
			</article></li>
        </ol>
    </section>

	<section>
		<h2>sub menu</h2>
		  <ul>
			  <li><a href="#" rel="external">menu 1</a></li>
			  <li><a href="#" rel="external">menu 2</a></li>
			  <li><a href="#" rel="external">menu 3</a></li>
			  <li><a href="#" rel="external">menu 4</a></li>
			  <li><a href="#" rel="external">menu 5</a></li>
		  </ul>
    </section>

	<footer>
		<address>Copyright &copy; XXXXX All Rights Reserved.</address>
	</footer>

</body>
</html>

http://granshe.blog.shinobi.jp/Entry/118/

http://www.scratchbrain.net/blog/ver2/entries/001552.html

http://dwlog.net/2009/08/html5-in-dreamweaver.html

iPhoneのSafari対応について - プログラミングノート

http://d.hatena.ne.jp/ntaku/20090913/1252827348

No.726
08/02 14:41

edit

html5