jQueryMobileでスマホサイト( パソコン用サイト)
私ごとですが 五月六日に京都にお茶会のお手伝いに行ってまいります。
三十三間堂隣の 由緒正しいお寺「法住寺」さんにおりますので
よろしかったら みなさま お誘い合わせのうえ お越しくださいませ。
綺麗な嶋原の 菊川太夫さんが お点前を。私がお運びをします。
Kyoto.pm の皆様にも呼びかけようと思いましたが
面識がないので やめときました。
さて。では コードを貼ります。
京都・島原・高砂太夫
http://takasagotayuu.web.fc2.com/
スマホから ここを見ると JavaScriptでスマホサイトへ飛びます(sphone.html)
パソコンからみると パソコン用サイトが表示されます(index.html)
まずは
base.css(リセットするものです)
@charset "UTF-8";
/* ブラウザ標準値をReset
------------------------------------------------------------*/
html.body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,blockquote,th,td { margin: 0;padding: 0; }
body { font-size: 62.5%; }
h1,h2,h3,h4,h5,h6 {
font-size: 100%;
/* font-weight: normal; */}
li { list-style-type: none; }
address,cite,code,dfn,em,strong,var{font-style:normal;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
/* HTML5
------------------------------------------------------------*/
article, aside, dialog, figure, footer, header,hgroup, nav, section {
display: block;
margin: 0;
padding: 0;
}
/* scrollbug for FF
------------------------------------------------------------*/
html {color:#000;/*background:#FFF;*/ ; overflow-y: scroll; }
/* Fonts
------------------------------------------------------------*/
body {
font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
-webkit-text-size-adjust: none;
line-height: 1.8;
}
/* Form
------------------------------------------------------------*/
input,textarea { outline: none; }
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend { display: none; }
fieldset { border: 0; }
/* Table
------------------------------------------------------------*/
table {border-collapse: collapse;border-spacing: 0; }
th { font-weight:normal;text-align: left; font-style:normal;}
caption{text-align:left;font-style:normal;font-weight:normal;}
/* Media
------------------------------------------------------------*/
object,embed { vertical-align: top; }
img ,a img{vertical-align: bottom;font-size: 0;line-height: 0; border: 0; }
/* clearfix
------------------------------------------------------------*/
.clearfix:after {
content: '';
display: block;
clear: both;
height: 0; visibility:hidden;}
.clearfix { display:inline-table;zoom: 1; }/*for IE 5.5-7*/
/* Hides from IE-mac \*/
*1367601276* html .clearfix{height:1%;}
.clearfix{display:block;}
/* End hide from IE-mac */
/* float
------------------------------------------------------------*/
.floatL { float: left; }
.floatR { float: right; }
.clear {clear: both; }
@charset "UTF-8";
/* ******************************************************************
1 : Common
****************************************************************** */
body{background-color: #000000;font-size:1em;}
.contentArea{position: relative;
width: 960px;
height:768px;
margin: auto;
padding: 0px 0px 0px 0px;
}
/* ******************************************************************
2 : Header
****************************************************************** */
.header{width: 960px;height:85px;margin-bottom:20px;}
h1{font-size:2em;
position: absolute;
height:50px;
padding-left:100px;
color:#ffcc00;
margin-bottom:0;
}
h1 a {text-decoration:none; color: #FFcc00;}/* 黄色 */
h1 a:hover{color:#adff2f;} /* 黄緑色 */
h1 a:visited{ color:#e752ff; } /* 赤紫 */
h2{ font-size:1.5em;
position: absolute;
margin-top:50px;
padding-left:400px;
width:500px;
height:35px;
color:#adff2f;
}
/* ******************************************************************
3 : Content
****************************************************************** */
h3{color: #B22222;
font-size: 1em;}/* 緋色 */
.innerContent{
margin-top:20px;
width: 600px;
height: 480px;
margin-left:20%;
margin-right:20%;
font-color:#FFF;}/* 白色 */
.textContent{overflow-y:scroll;
color:#FFF;
margin-top:20px;
width: 870px;
height:480px;
margin-left:50px;}
.textContent3{
position:absolute;
margin-left:auto;
margin-right:auto;
color:#FFF;
left: 150px;
top: 108px;
}
.jpgContent2{
position: absolute;
width: 960px;
height: 465px;
padding-top: 50px;
margin-left:10%;
margin-right:10%;
}
#screen {
position: relative;
width: 692px;
height: 505px;
margin-top:50px;
margin-left:500px;
margin-right:500px;
left:-300px;
position: absolute;
padding:0px;
background: #000;
overflow: hidden;
top: 52px;
}
#screen img, canvas {
position: absolute;
left: -9999px;
cursor: pointer;
image-rendering:
optimizeSpeed; }
#screen .href{
border: #FFF dotted 1px;
}
#screen .fog{
position: absolute;
background: #fff;
opacity: 0.1;
filter: alpha(opacity=10);}
#command {
color:#ffcc00;
position:absolute;
width: 168px;
z-index: 30000;
border: #000 solid 1em;
height: 92px;
left: 0px;
}
#bar {
position: absolute;
margin-top:20%;
left: 15px;
top: 94px;
height: 174px;
float: left;
margin-left: 30px;
width: 141px;
}
#bar .button{
position: absolute;
background: #222;
width: 20px;
height: 20px;
cursor: pointer;}
#bar .loaded{
background: #666;}
#bar .viewed{
background: #fff;}
#bar .selected{
background: #f00;}
#urlInfo{
position: absolute;
background: url(images/r.gif) no-repeat 0 4px;
visibility: hidden;
z-index: 30000;
cursor: pointer;}
.jpg1{
width:425px;
position: absolute;
margin-left:0px;
float:left;
height:auto;
padding:0px;
margin-top:50px;
left: 10px;
top: -26px;
}
.jpg2{
margin-top:0px;
position: absolute;
margin-left:450px;
width:300;
padding:0px;
top: 41px;
left: 3px;
}
.jpg3{
position: absolute;
width:300;
left: 449px;
top: 277px;
}
.okiyatext{font:1em;
position: absolute;
margin-left:100px;
margin-top:440px;
clear:both;
line-height: 2em;
left: 12px;
height: 38px;
top: 32px;
color:#ffffff;
}
/* ******************************************************************
4 : Footer
****************************************************************** */
.footer{
width: 960px;
position: absolute;
font-size:1.2em;
left: 2px;
top: 586px;
}
ul{ padding-top:30px;
margin-left: 130px; }
li{display: block
margin: 0px 0px 0px 40px;
float:left;
padding: 0px;
width: 150px;
line-height:30px;
}/* ［上］と［右］と［下］と［左］を指定 */
li a{text-decoration: none;
color: #FFcc00;}/* 黄色 */
li a:hover{color: #adff2f;} /* 黄緑色 */
li a:visited{ color: #e752ff;}/* 赤紫 */index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script>
if(navigator.userAgent.indexOf("Android") != -1 || navigator.userAgent.indexOf("iPhone") != -1 || navigator.userAgent.indexOf("iPod") != -1){
window.location.href="sphone.html";
}
</script>
<title>京都・島原・高砂太夫</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="京都の島原太夫の置屋くし菊の公式ホームページ" />
<meta name="keywords" content="太夫,島原,嶋原,京都観光,京都イベント" />
<meta name="robots" content="index,follow"/>
<link rel='stylesheet' type='text/css' href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-13125829-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div class="contentArea">
<div class="header" ><h1><a href="index.html">京都・島原・高砂太夫</a></h1>
<h2>置屋 くし菊 電話 075−351−4908</h2></div>
<div class="innerContent"><img src="images/top.jpg" alt="高砂太夫表紙" width="600" height="450"></div>
<div class="footer">
<ul>
<li><a href="shimabara.html">嶋原の歴史</a></li>
<li><a href="kotsutai.html">こったいさん</a></li>
<li><a href="takasago.html">高砂太夫</a></li>
<li><a href="kushigiku.html">置屋くし菊</a></li>
<li><a href="saiji.html">催事ご案内</a></li>
<li><a href="kikugawa.html">菊川太夫</a></li>
<li><a href="mochituki.html">お餅つき</a></li>
<li><a href="ochiyakai.html">お茶会</a></li>
<li><a href="shimabarakaiwai.html">嶋原界隈</a></li>
<li><a href="kashiyokunokai.html">華燭の会</a></li>
</ul>
</div>
</div>
</body>
</html>HTML5のパズルゲーム game.html
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta name="viewport"
content="width=320, user-scalable=no" />
<style> * { margin:0; padding:0; position: absolute; }
#title {
background-color: blue; color: white;
padding:3px; font-size:14px;
width:314px; height: 14px;
}
#game_canvas {
top:20px; width:320px; height:320px;
}
</style>
</head><body>
<canvas id="game_canvas" width="320" height="320"></canvas>
<script type="text/javascript">
// 設定
var main_image = "spimages/game.jpg";
var panels = [];
var cell_w = 320 / 4;
var cell_h = 320 / 4;
var image_per = 1, image_w = 320; // 画像の拡大率と基本となる幅
var pos_array = [[-1,0],[1,0],[0,-1],[0,1]]; // 上下左右の座標
// Canvasのコンテキストを取得する
var canvas = document.getElementById("game_canvas");
var con = canvas.getContext("2d");
// 画像の読み込み
var image = new Image();
image.src = main_image;
image.onload = function() {
if (image.width < 320 || image.height < 320) {
var per_w = image.width / 320;
var per_h = image.height / 320;
image_per = per_h;
image_w = image.height;
if (per_w < per_h) {
image_per = per_w;
image_w = image.width;
}
}
con.drawImage(image, 0, 0, image_w, image_w, 0, 0, 320, 320);
setTimeout(shufflePanel, 9000);
}
// パネルをシャッフルする
function shufflePanel() {
// パネルを初期化
for (var i = 0; i < 16; i++) {
panels[i] = i;
}
// シャッフル
for (var j = 0; j < 16; j++) {
var r = Math.floor(Math.random() * 16);
var tmp = panels[r];
panels[r] = panels[j];
panels[j] = tmp;
}
drawPanels();
}
// パネルを番号に応じて描画する
function drawPanels() {
for (var i = 0; i < 16; i++) {
var no = panels[i];
var pcol = no % 4;
var prow = Math.floor(no / 4);
var px = pcol * cell_w;
var py = prow * cell_h;
var tx = (i % 4) * cell_w;
var ty = Math.floor(i / 4) * cell_h;
if (no == 15) {
// 穴を表示する
con.beginPath();
con.fillStyle = "#ffff66";
con.fillRect(tx, ty, cell_w, cell_h);
} else {
// 画像を切り取って表示する
con.drawImage(image,
px * image_per, py * image_per, image_w / 4, image_w / 4,
tx, ty, cell_w, cell_w);
}
// 枠を描画する
con.beginPath();
con.moveTo(tx + cell_w, ty);
con.lineTo(tx, ty);
con.lineTo(tx, ty + cell_h);
con.strokeStyle = "#999999";
con.stroke();
}
}
// ユーザーのタッチイベントに反応する
canvas.ontouchstart = function(e) { // for iPhone
if (e.touches.length > 0) {
var t = e.touches[0];
checkPanelXY(t.clientX, t.clientY);
}
e.preventDefault();
};
canvas.onmousedown = function(e) { // for PC
checkPanelXY(e.clientX, e.clientY);
};
function checkPanelXY(sx, sy) {
// タップされたパネルを取得する
var col = Math.floor(sx / cell_w);
var row = Math.floor((sy-20) / cell_h);
var no = row * 4 + col;
// 穴の上なら何もしない
if (panels[no] == 15) { return; }
// 穴に隣接しているか確認
for (var i = 0; i < pos_array.length; i++) {
var row2 = pos_array[i][0] + row;
var col2 = pos_array[i][1] + col;
var check = getPanelNo(row2, col2);
if (check == 15) {
swapPanel(row, col, row2, col2);
}
}
};
// 行(row)と列(col)からパネル番号を返す
function getPanelNo(row, col) {
// 範囲外なら -1 を返す
if (col < 0 || row < 0 || col >= 4 || row >= 4) {
return -1;
}
return panels[row * 4 + col];
}
// パネルを入れ替える
function swapPanel(row1, col1, row2, col2) {
var index1 = row1 * 4 + col1;
var index2 = row2 * 4 + col2;
var tmp = panels[index1];
panels[index1] = panels[index2];
panels[index2] = tmp;
drawPanels();
}
</script>
</body></html>
