Japanese
Facebook Twitter E-mail
http://matenro.net/html5
Matenro.net
HTML5のサンプルコード



















Responsive Slide Show demo



使用方法:
・画像の縦横比に応じてスライド下部パディングを調整
・スライド追加ごとに以下の追記と修正
slideshow1.css:
 /* 全体の長さ */
.pic img {
	-moz-animation: imgTrans 12s infinite;
	-webkit-animation: imgTrans 12s ease-in infinite;
	animation: imgTrans 12s infinite;
}
 /* スライド進行タイミング */
#photo1 img {-moz-animation-delay:  0s;-webkit-animation-delay:  0s;animation-delay:  0s;}
#photo2 img {-moz-animation-delay:  4s;-webkit-animation-delay:  4s;animation-delay:  4s;}
#photo3 img {-moz-animation-delay:  8s;-webkit-animation-delay:  8s;animation-delay:  8s;}







Modal Window Demo

image

【Modal Window Demo】


使用方法:
・以下を設定。
●Modal Windowの内容の定義: footer定義の下

●Depthの設定: .lang_body {position: fixed; z-index: 5010;} .icon_box {position: fixed; z-index: 5012;} .head_body {position: absolute; z-index: 11;} #nv_menu_box {position: absolute;z-index: 91;} #wrapper {position: relative; z-index: 90;} .footer_body{position: absolute; z-index: 15;}
●Modal Window Depthの設定: .contents {} #open01,#open02,#open03 {position: fixed; z-index: 99990;} .close_overlay {position: absolute; z-index: 99991;} .modal_window {position: absolute; z-index: 99992;}








Responsive Canvas

‹style›
#_terrain {
  position: relative;
  width: 100%;
  height: auto;
  max-width: 1024px;
  min-width: 240px;
  margin: 0 auto;
  overflow:hidden;
  background-color: #aaa;
  z-index: 0;
}
‹/style›
‹canvas id="_terrain" width="640" height="400"› ‹/canvas›








Draggable


・IE, Chromeで動作。
・Saffariで動作せず。
・本サンプルはレスポンシブでは無い。








Responsive Iframe


iframeを囲った要素、つまりiframeから見た親要素のpadding-top(またはpadding-bottom)にiframeの幅に対する高さの比率を指定します。つまり、

高さ÷幅×100%=360÷640×100%=56.25%

となります。 そしてheightには0を指定します。 これで縦横比を保ったまま可変する要素を実装することができます。
そしてiframeに絶対配置で基準点を親要素の左上にし、幅と高さが親要素と同じになるように指定すればウインドウ幅に応じて可変するiframeを実装できます。