おかず index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>おかず</title>
<link rel="stylesheet" href="css/style.css">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>

<body>
<article>
<header>
<h1><img src="img/logo01.png" alt=""></h1>

<nav>
<ul>
<li><a><img src="img/nav01_01.png" alt=""></a></li>
<li><a><img src="img/nav02_01.png" alt=""></a></li>
<li><a><img src="img/nav03_01.png" alt=""></a></li>
<li><a><img src="img/nav04_01.png" alt=""></a></li>
</ul>
</nav>
</header>

  
<section>
<p><img src="img/ph8_my.jpg"></p>
<p><img src="img/ph9_s.jpg"></p>
<p><img src="img/ph10_s.jpg"></p>
</section>

<section>
<p><img src="img/ph19_l.jpg"></p>
</section>

<section>
<p><img src="img/ph11_l.jpg"></p>
</section>

<section>
<p><img src="img/ph20_s.jpg"></p>
<p class="right"><img src="img/ph21_mt.jpg"></p>
<p><img src="img/ph22_s.jpg"></p>
</section>

<section>
<p><img src="img/ph1_l.jpg"></p>
</section>

<section>
<p><img src="img/ph12_s.jpg"></p>
<p class="right"><img src="img/ph14_mt.jpg"></p>
<p><img src="img/ph13_s.jpg"></p>
</section>

<section>
<p><img src="img/ph23_s.jpg"></p>
<p><img src="img/ph24_s.jpg"></p>
<p><img src="img/ph25_my.jpg"></p>
</section>


<section>
<p><img src="img/ph2_mt.jpg"></p>
<p><img src="img/ph3_s.jpg"></p>
<p><img src="img/ph4_s.jpg"></p>
</section>

<section>
<p><img src="img/ph15_l.jpg"></p>
</section>

<section>
<p><img src="img/ph26_s.jpg"></p>
<p><img src="img/ph27_s.jpg"></p>
<p><img src="img/ph28_s.jpg"></p>
<p><img src="img/ph29_s.jpg"></p>
</section>


<section>
<p><img src="img/ph5_my.jpg"></p>
<p><img src="img/ph6_s.jpg"></p>
<p><img src="img/ph7_s.jpg"></p>
</section>

<section>
<p><img src="img/ph16_s.jpg"></p>
<p><img src="img/ph17_s.jpg"></p>
<p><img src="img/ph18_my.jpg"></p>
</section>

<section>
<p><img src="img/ph30_l.jpg"></p>
</section>
</article>
</body>
</html>

Google Maps API oizumi.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps API</title>

<!-- 【1】Google Maps APIを呼び出し-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>

<!-- 【2】どんな地図を描くかのメイン処理 -->
<script type="text/javascript">

// ■地図初期化し表示
function initialize() {

  // ■地図を表示する緯度経度を指定する
  var latlng = new google.maps.LatLng(36.25827223578943,139.40834999084473);
  
  // ■地図必須プロパティを設定
  var myOptions = {
    
    // ■ズームレベルの指定 0〜17
    zoom: 14,
    
    // ■地図の中心を指定(上記で設定の緯度経度latlng)
    center: latlng,
    
    // ■地図のタイプ設定
    //  ROADMAP:デフォルト、SATELLITE:写真タイル、HYBRID:写真タイルと主要な機能、TERRAIN:物理的な起伏を示すタイル
    mapTypeId: google.maps.MapTypeId.ROADMAP
    
  };// 地図プロパティここまで
  
  // ■<div id="map_canvas">と結びつけて、その領域に地図を描く
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  // ■中心にマーカーの表示
  var marker1 = new google.maps.Marker({
  position: latlng,
  title:"東武小泉線 西小泉駅"
  });
  marker1.setMap(map);
	
	// ■マーカーの追加表示(緯度経度指定の場合)
  var myLatlng = new google.maps.LatLng(36.256078020047106,139.40699011087418);
  var marker2 = new google.maps.Marker({
  position: myLatlng,
  title:"いずみ緑道"
  });
  marker2.setMap(map);
	
	// ■マーカーをクリックしたら、情報ウィンドウを表示
  var marker1text = 'ここは<span style="color:#f00;">東武小泉線 西小泉駅</span>です'
  var infowindow1 = new google.maps.InfoWindow({
    content: marker1text,
    maxWidth:200
  });
  google.maps.event.addListener(marker1, 'click', function() {
  infowindow1.open(map,marker1);
  });
	
  var marker2text = 'ここで毎月1回<span style="color:#f00;">グルメ横丁</span>が開催されます'
  var infowindow2 = new google.maps.InfoWindow({
    content: marker2text,
    maxWidth:200
  });
  google.maps.event.addListener(marker2, 'click', function() {
  infowindow2.open(map,marker2);
  });

}//initialize() 

</script>

</head>
<body onload="initialize()">

<!-- 地図はここに描画される -->
<div id="map_canvas" style="width: 640px; height: 480px;"></div>

</body>
</html>

QR CODE.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps API</title>

<!-- 【1】Google Maps APIを呼び出し-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>

<!-- 【2】どんな地図を描くかのメイン処理 -->
<script type="text/javascript">

// ■地図初期化し表示
function initialize() {

  // ■地図を表示する緯度経度を指定する
  var latlng = new google.maps.LatLng(36.25827223578943,139.40834999084473);
  
  // ■地図必須プロパティを設定
  var myOptions = {
    
    // ■ズームレベルの指定 0〜17
    zoom: 14,
    
    // ■地図の中心を指定(上記で設定の緯度経度latlng)
    center: latlng,
    
    // ■地図のタイプ設定
    //  ROADMAP:デフォルト、SATELLITE:写真タイル、HYBRID:写真タイルと主要な機能、TERRAIN:物理的な起伏を示すタイル
    mapTypeId: google.maps.MapTypeId.ROADMAP
    
  };// 地図プロパティここまで
  
  // ■<div id="map_canvas">と結びつけて、その領域に地図を描く
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  // ■中心にマーカーの表示
  var marker1 = new google.maps.Marker({
  position: latlng,
  title:"東武小泉線 西小泉駅"
  });
  marker1.setMap(map);
	
	// ■マーカーの追加表示(緯度経度指定の場合)
  var myLatlng = new google.maps.LatLng(36.256078020047106,139.40699011087418);
  var marker2 = new google.maps.Marker({
  position: myLatlng,
  title:"いずみ緑道"
  });
  marker2.setMap(map);
	
	// ■マーカーをクリックしたら、情報ウィンドウを表示
  var marker1text = 'ここは<span style="color:#f00;">東武小泉線 西小泉駅</span>です'
  var infowindow1 = new google.maps.InfoWindow({
    content: marker1text,
    maxWidth:200
  });
  google.maps.event.addListener(marker1, 'click', function() {
  infowindow1.open(map,marker1);
  });
	
  var marker2text = 'ここで毎月1回<span style="color:#f00;">グルメ横丁</span>が開催されます'
  var infowindow2 = new google.maps.InfoWindow({
    content: marker2text,
    maxWidth:200
  });
  google.maps.event.addListener(marker2, 'click', function() {
  infowindow2.open(map,marker2);
  });

}//initialize() 

</script>

</head>
<body onload="initialize()">

<!-- 地図はここに描画される -->
<div id="map_canvas" style="width: 640px; height: 480px;"></div>

</body>
</html>

QR CODE.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>検索フォーム</title>
<style>
     body{
			 text-align:center;
		 }
</style>
</head>

<body>
<p>QRコードにしたい文字を入力してください</p>
<form action="QR_CODE.php" method="get">
キーワード:<input type="text" name="keyword" size="40">
<input type="submit" value="検索">
</form>
</body>
</html>