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

HTML5の画像のsourceタグのsrcset で「ブラウザ幅」と「ディスプレイ解像度」によって画像を入れ替える

● 画像の srcset で「ブラウザ幅」と「ディスプレイ解像度」によってレスポンシブに画像を入れ替える

以下のように記述すると「ブラウザ幅」と「ディスプレイ解像度」によってレスポンシブに画像を入れ替わります

<picture>
    <source srcset="img/600.png 1x , img/600@2x.png 2x" media="(min-width: 600px)" />
    <source srcset="img/500.png 1x , img/500@2x.png 2x" media="(min-width: 500px)" />
    <source srcset="img/400.png 1x , img/400@2x.png 2x" media="(min-width: 400px)" />
    <source srcset="img/300.png 1x , img/300@2x.png 2x" media="(min-width: 300px)" />
    <img src="img/default.png" alt="image with artdirection" />
</picture>

ポイントとしては大きい解像度の画像から指定することです。 小さい画像から指定するとうまく表示されません。

● デモはこちら

https://pgmemo.tokyo/livedemo/html5_source_srcset/test_img_source_srcset.html

● sourceタグの srcset を Windows IE11 に対応させる

picturefill を使用します。こちらを読み込ませるだけでOK。

    <script src="//cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.min.js"></script>

● デモはこちら

https://pgmemo.tokyo/livedemo/html5_source_srcset/test_img_source_srcset_IE11.html

No.1293
09/10 16:16

edit

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ビデオを埋め込む

<video id="videotest" width="640" height="480" controls="controls" preload="auto" poster="bg.png"
  onabort="log('abort');"
  oncanplay="log('canplay');"
  oncanplaythrough="log('canplaythrough');"
  ondurationchange="log('durationchange');"
  onemptied="log('emptied');"
  onended="log('ended');"
  onerror="log('error');"
  onloadeddata="log('loadeddata');"
  onloadedmetadata="log('loadedmetadata');"
  onloadstart="log('loadstart');"
  onpause="log('pause');"
  onplay="log('play');"
  onplaying="log('playing');"
  onprogress="log('progress');"
  onratechange="log('ratechange');"
  onreadystatechange="log('readystatechange');"
  onseeked="log('seeked');"
  onseeking="log('seeking');"
  onstalled="log('stalled');"
  onsuspend="log('suspend');"
  ontimeupdate="log('timeupdate');"
  onvolumechange="log('volumechange');"
  onwaiting="log('waiting');">
<source id='videosource1' src="" type="video/mp4"/>
<source id='videosource2' src="" type="video/ogg" />
<source id='videosource3' src="" type="video/webm" />
</video>

● ビデオの「再生中」「停止中」を js で判断する

var myVideo=document.getElementById("video1"); 
if (myVideo.paused) {
  myVideo.play(); 
}
else { 
  myVideo.pause(); 
} 

jqueryで次のように書くこともできます。

        function is_video_playing()
        {
            var video_dom = $('div.myvideo')[0];
            if (video_dom.paused) {
                return false;
            }
            else { 
                return true;
            }             
        }

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

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

No.736
07/20 09:06

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