JSFiddle - React, Tailwind, and code Playground
by secretgspot
HTML
<article>
<div class="slide">
<section class="point">
<header class="pointInner">
<h1>もしも、<br /><span class="attA">マークアップエンジニア</span>が<br />ひとりでWebサイトをつくったら<br /><span class="note attB">～HTML5でつくるWebアプリ～</span></h1>
</header>
</section>
<!-- /.slide --></div>
<div class="slide">
<h2>自己紹介</h2>
<ul style="float: left; width: 60%;">
<li>比留間 和也(ひるま かずや)</li>
<li>
面白法人カヤック
<dl class="note">
<dt>所属部署</dt>
<dd>意匠部 ME課(メカ)</dd>
</dl>
</li>
<li>コーディング歴は7年くらいです。</li>
<li>twitterID：<a href="http://twitter.com/edo_m18">@edo_m18</a></li>
</ul>
<p style="float: right; width: 35%;"><img src="http://dl.dropbox.com/u/298712/seminar/kayac_site.png" alt="" class="reflect fixImg" style="max-width: 400px;" /></p>
<!-- /.slide --></div>
<div class="slide">
<h2>普段はなにしてるの？</h2>
<div style="float: left; width: 60%;" class="note">
<p>普段は主にマークアップしてます。</p>
<p>それ以外にも、Movable Typeの構築や、JavaScriptなんかも書いてます。</p>
<div class="optSlide">
<p>社外活動としては、CSS関連の記事を配信するブログ(<a href="http://css-eblog.com/" target="_blank">CSS-EBLOG</a>)を書いてたりします。</p>
</div>
</div>
<div class="optSlide" style="float: right; width: 35%;"><p><img src="http://dl.dropbox.com/u/298712/seminar/eblog_site.png" style="max-width: 400px;" class="reflect fixImg" width="400" height="369" /></p></div>
<div class="optSlide coverCont">
ちなみにこのスライドは、<br />弊社サービスのjsdo.it上ですでに公開されています。<br />興味がある方は<br /><a href="http://jsdo.it/edo_m18/seminar/">http://jsdo.it/edo_m18/seminar/</a><br />にアクセスしてください。<span class="note2">(jsdo.itの説明)</span>
</div>
<!-- /.slide --></div>
<div class="slide">
<h2>アジェンダ</h2>
<ul>
<li>このセッションの目的</li>
<li>HTML5ってなに？(なにがすごいの？)</li>
<li>既存サービスにHTML5を応用するとこんなに便利！</li>
<li>マークアップエンジニアが作るWebアプリ</li>
<li>Webアプリ作成で使ったHTML5の新機能</li>
<li>今後求められるスキル</li>
<li>お知らせ</li>
</ul>
<!-- /.slide --></div>
<div class="slide">
<div class="point" style="width: 100%;"><div class="pointInner" style="text-align: center;"><strong class="attB">このセッションの目的</strong></div></div>
<!-- /.slide --></div>
<div...CSS
@charset "utf-8";
article , header , footer , nav , section , aside {
display: block;
}
html {
height: 100%;
}
html,body,p,dl,dt{
margin:0;
padding:0;
}
body {
padding: 5%;
font-family: 'メイリオ', 'ＭＳ Ｐゴシック', 'Lucida Grande', 'Trebuchet MS', sans-serif;
height: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-box-sizing: border-box;
}
.slide p{
line-height:1.4;
margin:.5em 0;
}
h1,h2{
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
h1 {
font-size: 100%;
line-height: 1.2;
-webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, color-stop(0.6, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.15)));
}
h2 {
color: #f63;
line-height: 0.8;
-webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, color-stop(0.2, rgba(0,0,0,0)), color-stop(0.9, rgba(0,0,0,0.2)));
}
html {
}
.slidemode{
background: url(http://dl.dropbox.com/u/298712/seminar/bg.png) left top repeat;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
}
.slidemode .slide{
position:absolute;
top:5%;
bottom:5%;
left:2.5%;
color:#fff;
text-shadow:rgba(0,0,0,0.1) 1px 1px;
letter-spacing: 0.15em;
padding: 5%;
overflow:hidden;
width: 95%;
border-radius:20px;
opacity:0;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.slide {
border: solid 1px #444;
background-image: -webkit-gradient(linear, left bottom, left top,color-stop(0, rgba(50,50,50,0.8)),color-stop(1, rgba(10,10,10,0.7)));
background-image: -moz-linear-gradient(90deg,rgba(50,50,50,0.7) 0%,rgba(10,10,10,0.7) 100%);
background-image: linear-gradient(90deg,rgba(50,50,50,0.7) 0%,rgba(10,10,10,0.7) 100%);
}
.slidemode .slide.left{
right:100%;
left:-200%;
/*height:0%;*/
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
...JavaScript
// まずはページ幅取得
var width = document.documentElement.clientWidth;
document.body.className = 'slidemode';
// フォントサイズ調整
document.body.style.fontSize = width / 5.5 + '%';
var slides = [];
var SV = 'slide view';
var SR = 'slide right';
var SL = 'slide left';
// スライドの各ページを取得
// divタグのクラス名で判定
var divs = document.body.getElementsByTagName('div');
for (var i = 0,l = divs.length;i<l;i++){
if(/^slide/i.test(divs[i].className)){
divs[i].className = SR;
slides.push(divs[i]);
}
}
//現在のページ
var current = 0;
var count = slides.length;
//全ページ数を表示
var page = document.querySelector('.pageCnt');
page.innerHTML = current+'/'+count;
document.body.onclick = function(e){
var ev = e||window.event;
var x = ev.clientX;
if (width*0.95 < x && slides[current+1]){
//右余白がクリックされたとき
next();
} else if (width*0.05 > x && slides[current-1]) {
//左余白がクリックされたとき
prev();
}
};
var Down = -1, Up = 1;
if (document.body.onmousewheel !== void 0 || window.opera){
// onmousewheelが使えるか判定(Firefox以外はこちら)
document.body.onmousewheel = mousewheel;
} else {
// 実質Firefox用の処理。onmousewheelをサポートしたら上の処理だけで済むようになるはず
document.body.addEventListener('DOMMouseScroll',mousewheel,false);
}
function mousewheel(e){
var ev = e||window.event;
var dir = ev.wheelDelta || -ev.detail;
dir = dir < 0 ? Down : Up;
if (dir === Down && slides[current+1]){
next();
} else if (dir === Up && slides[current-1]) {
prev();
}
};
document.onkeydown = key_slide;
var J = 74, K = 75, Left = 37, Right = 39;
function key_slide(evt){
if (!evt) {
evt = window.event;
}
if ((evt.keyCode === K || evt.keyCode === Left) && slides[current-1]){// k
prev();
return false;
} else if ((evt.keyCode === J || evt.keyCode === Right) && slides[current+1]) {// j
next();
return false;
}
}
function next(){
var optObjs = slides[current].getElementsByTagName('div');
for( var i=0; i<optObjs.length; i++ ) {
if( optObjs[i].className.indexOf('optSlide') != -1 &&...