おかず style.css
@charset "UTF-8"; /* CSS Document */ html,body,article,header,h1,section,ul,li,p,figure{ margin:0; padding:0; } article{ width:960px; margin:10px auto; overflow:hidden; } header,section{ width:320px; float:left; } ul{ list-style-type:none; } img{ margin:10px; float:left; } .right{ float:right; }
おかず 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>
download.php
<?php $file=$_GET["url"]; $fullpath=$file; $filename='qrcode.png'; header("Content-type:image/png"); header('Content-Disposition: attachment; filename="' . $filename . '"'); readfile($fullpath); ?>
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>