初心者だけどPerlが大好き

コードが世界を変える!

jQueryMobileでスマホサイト( スマホ用サイト)

jQueryMobile

画像は　360 ×　480　の物を何枚も用意しました


まずは　スマホ用スタイルシート　spstyle.cssです

@charset "utf-8";
* {margin: 0; padding: 0; 
font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",
"Hiragino Kaku Gothic Pro",
Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;}
body{ width:100%; overflow:hidden; line-height:1;margin:0;}
h1{font-size:2em;}
h2{font-size:1.5em;}
h3{font-size:1em;}
p{font-size:1em;line-height: normal;padding-top:10px} 
ul{list-style:none;	padding:0;}
li{	padding:0;line-height:1.8em}
.top{ padding-top: 0px;width:100%;}
img {
 display: block;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
 max-width: 100%;
 height: auto;}
#gameiframe {
 display: block;
 margin-left:0;
 text-align: center;
 width:320;
 height: 350;}
.ui-header .ui-title{
	top:0;
  margin-left: 15%;
  margin-right: 15%}
/* テキストを省略せずに表示する */
.ui-footer .ui-title,.ui-btn-inner,.ui-li-heading,
.ui-li .ui-btn-text a.ui-link-inherit,.ui-li-desc{
  overflow: visible;}
#map {
  width: 100%;
  height: 300px;
  border: 8px solid #ccc;
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
}
#mmap {
  width: 100%;
  height: 300px;
  border: 8px solid #ccc;
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
}

次に　スマホサイト　sphone.html

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<script>
if(navigator.userAgent.indexOf("Android") == -1 && navigator.userAgent.indexOf("iPhone") == -1 && navigator.userAgent.indexOf("iPod") == -1){
    window.location.href="index.html";
}
</script>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>京都・島原・高砂太夫</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel='stylesheet' type='text/css' href="css/base.css">
<link rel="stylesheet" href="css/spstyle.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 data-role="page" id="index"  >
<div data-role="header" >
<h1>京都・島原・高砂太夫</h1>
<div class="top"><img src="spimages/ttop.jpg"></div>
</div>
<div data-role="content" >	
<ul data-role="listview">
<li><a href="#page2">催事のご案内</a></li>
<li><a href="#page3">高砂太夫</a></li>
<li><a href="#page4">菊川太夫</a></li>
<li><a href="#page5">嶋原界隈</a></li>
<li><a href="#game">お座敷遊び</a></li>
</ul>	
</div>
<div data-role="footer" >
<h4>置屋くし菊　<a href="tel:075-351-4908">075-351-4908</a></h4>
</div>
</div>

<div data-role="page" id="page2"   >
<div data-role="header" >
<a href="#index" data-role="button" data-transition="slideup" data-icon="home" data-iconpos="notext">Home</a> 
<h1>催事のご案内</h1></div>
<div data-role="navbar">
<ul>
<li><a href="#page3" >高砂太夫</a></li>
<li><a href="#page4" >菊川太夫</a></li>
<li><a href="#page5" >嶋原界隈</a></li>
</ul>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><h3><a href="#page6">法住寺さんでお茶会</a></h3>
<p>五月六日</p>
</li>
<li>
<h3><a href="#page7">嶋原の太夫道中</a></h3>
<p>随時(準備中)</p>
</li>
<li>
<h3><a href="#page8">嶋原のお餅つき</a></h3>
<p>毎年　12月にあります(準備中)　</p>
</li>
</ul>
詳しくは 　お問い合わせください <br>
当日は　普段着で　おこしやす
</div>
<div data-role="footer" >
<h4>置屋くし菊　<a href="tel:075-351-4908">075-351-4908</a></h4>
</div>
</div>

<div data-role="page" id="page3">
<div data-role="header"  >
<a href="#index" data-role="button" data-transition="slideup" data-icon="home" data-iconpos="notext">Home</a><h1>高砂太夫</h1>
</div>
<div data-role="navbar">
<ul>
<li><a href="#page2" >催事のご案内</a></li>
<li><a href="#page4" >菊川太夫</a></li>
<li><a href="#page5" >嶋原界隈</a></li>
</ul>
</div>
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">
<div  class="ui-bar ui-bar-c">
<img src="spimages/pic1_R.jpg" ></div>
</div>
<div class="ui-block-b">
<div  class="ui-bar ui-bar-c">
<img src="spimages/pic2_R.jpg"></div>
</div>
<div class="ui-block-a">
<div  class="ui-bar ui-bar-c">
<img src="spimages/pic3_R.jpg" ></div>
</div>
<div class="ui-block-b">
<div  class="ui-bar ui-bar-c">
<img src="spimages/pic4_R.jpg" ></div>
</div>
<div class="ui-block-a">
<div  class="ui-bar ui-bar-c">
<img src="spimages/pic5_R.jpg" ></div>
</div>
<div class="ui-block-b">
<div  class="ui-bar ui-bar-c">
<img src="spimages/pic6_R.jpg"></div>
</div>
<div class="ui-block-a">
<div  class="ui-bar ui-bar-c">
<img src="spimages/pic7_R.jpg" ></div>
</div> 
<div class="ui-block-b">
<div  class="ui-bar ui-bar-c">
<img src="spimages/pic8_R.jpg" ></div>
</div>
</div>
</div>
<div data-role="footer"  >
<h4>置屋くし菊　075-351-4908</h4>
</div>
</div>

<div data-role="page" id="page4">
<div data-role="header" >
<a href="#index" data-role="button" data-transition="slideup" data-icon="home" data-iconpos="notext">Home</a> 
<h1>菊川太夫</h1>
</div>
<div data-role="navbar">
<ul>
<li><a href="#page2" >催事のご案内</a></li>
<li><a href="#page3" >高砂太夫</a></li>
<li><a href="#page5" >嶋原界隈</a></li>
</ul>
</div>
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">
<div  class="ui-bar ui-bar-c">
<img src="spimages/pic110_R.jpg"></div>
</div>
<div class="ui-block-b">
<div  class="ui-bar ui-bar-c">
<img src="spimages/pic111_R.jpg" ></div>
</div>
<div class="ui-block-a">
<div  class="ui-bar ui-bar-c">
<img src="spimages/pic102_R.jpg" ></div>
</div>
<div class="ui-block-b">
<div  class="ui-bar ui-bar-c">
<img src="spimages/pic103_R.jpg" ></div>
</div>
<div class="ui-block-a">
<div  class="ui-bar ui-bar-c">
<img src="spimages/pic104_R.jpg"></div>
</div>
<div class="ui-block-b">
<div  class="ui-bar ui-bar-c">
<img src="spimages/pic105_R.jpg"></div>
</div>
<div class="ui-block-a">
<div  class="ui-bar ui-bar-c">
<img src="spimages/pic106_R.jpg"></div>
</div> 
<div class="ui-block-b">
<div  class="ui-bar ui-bar-c">
<img src="spimages/pic107_R.jpg"></div>
</div>
</div>
</div>
<div data-role="footer" >
<h4>置屋くし菊　<a href="tel:075-351-4908">075-351-4908</a></h4>
</div>
</div>

<div data-role="page" id="page5">
<script type="text/javascript">
// 地図ページ
	$('#page5').bind('pageshow', function(){
		var TITLE = '嶋原',
		LAT = 34.992685,
		LNG = 135.743251,
		MAP_ID = 'map';

		//地図作成
		var infowindow = new google.maps.InfoWindow(),
		latLng = new google.maps.LatLng(LAT, LNG),
		map = new google.maps.Map(document.getElementById(MAP_ID), {
			zoom: 15,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		}),
		marker = new google.maps.Marker({
			title: TITLE,
			position: latLng,
			map: map
		});

		//地図表示
		map.setCenter(latLng);
		infowindow.open(map);
	});

</script>
<div data-role="header" >
<a href="#index" data-role="button" data-transition="slideup" data-icon="home" data-iconpos="notext">Home</a><h1>嶋原界隈</h1>
</div>
<div data-role="navbar">
<ul>
<li><a href="#page2">催事のご案内</a></li>
<li><a href="#page3" >高砂太夫</a></li>
<li><a href="#page4" >菊川太夫</a></li>
</ul>
</div>
<div data-role="content">
<div id="map"></div><div data-role="collapsible-set">
<div data-role="collapsible" >
<h3>出口の柳</h3>
<p>入口にあるのに出口といいます</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<div style="text-align:center;font-size:14px;" class="ui-bar ui-bar-c">
<img src="spimages/201_R.jpg"></div>
</div>
<div class="ui-block-b">
<div style="text-align:center;font-size:14px;" class="ui-bar ui-bar-c">
<img src="spimages/202_R.jpg"></div>
</div></div>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>角　屋</h3>
<p>江戸時代の揚屋さんでした</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<div style="text-align:center;font-size:14px;" class="ui-bar ui-bar-c">
<img src="spimages/204_R.jpg"  /></div>
</div>
<div class="ui-block-b">
<div style="text-align:center;font-size:14px;" class="ui-bar ui-bar-c">
<img src="spimages/206_R.jpg"></div>
</div></div>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>輪違屋</h3>
<p>いまも営業されています</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<div style="text-align:center;font-size:14px;" class="ui-bar ui-bar-c">
<img src="spimages/211_R.jpg"  ></div>
</div>
<div class="ui-block-b">
<div style="text-align:center;font-size:14px;" class="ui-bar ui-bar-c">
<img src="spimages/209_R.jpg"></div>
</div></div>
</div><div data-role="collapsible">
<h3>壬　生</h3>
<p>新撰組の屯所がありました</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<div style="text-align:center;font-size:14px;" class="ui-bar ui-bar-c">
<img src="spimages/213_R.jpg"><br />壬生寺</div>
</div>
<div class="ui-block-b">
<div style="text-align:center;font-size:14px;" class="ui-bar ui-bar-c">
<img src="spimages/214_R.jpg"><br />前川邸</div>
</div></div>
</div>  
</div>
</div>
<div data-role="footer" >
<h4>置屋くし菊　<a href="tel:075-351-4908">075-351-4908</a></h4>
</div>
</div>

<div data-role="page" id="page6">
<script type="text/javascript">
// 地図ページ
// 「会場　ACCESS」ページ
$('#page6').bind('pageshow', function(){
var TITLE = '法住寺',
        LAT = 34.987834,
        LNG = 135.772648,
        MAP_ID = 'mmap';

//地図作成
var infowindow = new google.maps.InfoWindow(),
    latLng = new google.maps.LatLng(LAT, LNG),
                  map = new google.maps.Map(document.getElementById(MAP_ID), {
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                  }),
                  marker = new google.maps.Marker({
                    title: TITLE,
                    position: latLng,
                       map: map
                  });

          //地図表示
          map.setCenter(latLng);
          infowindow.open(map);
});
</script>
<div data-role="header" >
<a href="#index" data-role="button" data-transition=" slideup" data-icon="home" data-iconpos="notext">Home</a> <h1>法住寺さんでお茶会</h1>
</div>
<div data-role="navbar">
<ul>
<li><a href="#page2" >催事のご案内</a></li>
<li><a href="#page4" >菊川太夫</a></li>
<li><a href="#page5" >嶋原界隈</a></li>
</ul>
</div>
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">
<div style="text-align:center;font-size:14px;" class="ui-bar ui-bar-c">
<img src="spimages/tea_R.jpg" >菊川太夫さん</div>
</div>
<div class="ui-block-b">
<div style="text-align:center;vertical-align:middle;" >
<h2>五月六日</h2>
<p>午前11時から<br/>午後3時の間<br/>
薄茶・点心・拝観料で<br/>
会費は３千円です<br/>
観光客さん歓迎どす</p>
</div>
</div>
</div>
<h3>法住寺  京都府京都市東山区三十三間堂廻リ655</h3>
<div id="mmap"></div>
</div>
<div data-role="footer" >
<h4>置屋くし菊　<a href="tel:075-351-4908">075-351-4908</a></h4>
</div>
</div>

<div data-role="page" id="page7">
<div data-role="header" >
<a href="#index" data-role="button" data-transition="slideup" data-icon="home" data-iconpos="notext">Home</a> <h1>嶋原太夫道中</h1>
</div>
<div data-role="navbar">
<ul>
<li><a href="#page2" >催事のご案内</a></li>
<li><a href="#page4" >菊川太夫</a></li>
<li><a href="#page5" >嶋原界隈</a></li>
</ul>
</div>
<div data-role="content">
<div class="ui-grid-a">
<div style="text-align:center;font-size:14px;" class="ui-bar ui-bar-c">
<img src="spimages/kushugiku_R.jpg" width="480" height="360">太夫道中は随時、承ります</div>
</div>
</div>
<div data-role="footer" >
<h4>置屋くし菊　<a href="tel:075-351-4908">075-351-4908</a></h4>
</div>
</div>

<div data-role="page" id="page8">
<div data-role="header"  >
<a href="#index" data-role="button" data-transition="slideup" data-icon="home" data-iconpos="notext">Home</a> <h1>嶋原のお餅つき</h1>
</div>
<div data-role="navbar">
<ul>
<li><a href="#page2" >催事のご案内</a></li>
<li><a href="#page4" >菊川太夫</a></li>
<li><a href="#page5" >嶋原界隈</a></li>
</ul>
</div>
<div data-role="content">
<div class="ui-grid-a">
<div style="text-align:center;font-size:14px;" class="ui-bar ui-bar-c">
<img src="spimages/pic20_R.jpg" width="480" height="360">江戸時代から嶋原の太夫さんたちは<br>師走に賑やかに、お餅つきをしてはりました</div>
</div>
</div>
<div data-role="footer" >
<h4>置屋くし菊　<a href="tel:075-351-4908">075-351-4908</a></h4>
</div>
</div>

<div data-role="page" id="game">
<div data-role="header"  >
<a href="#index" data-role="button" data-transition="slideup" data-icon="home" data-iconpos="notext">Home</a> <h1>お座敷遊び</h1>
</div>
<div data-role="navbar">
<ul>
<li><a href="#page2" >催事のご案内</a></li>
<li><a href="#page4" >菊川太夫</a></li>
<li><a href="#page5" >嶋原界隈</a></li>
</ul>
</div>
<div data-role="content">
<iframe src="game.html" frameborder="yes" scrolling="yes" id="gameiframe"  width="320"  height="450">
html5対応お座敷パズルゲームです
</iframe>
</div>
<div data-role="footer" >
<h4>置屋くし菊　<a href="tel:075-351-4908">075-351-4908</a></h4>
</div>
</div>
</body>
</html>