グーグルマップで表示2_A~Bまでの道のり表示
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Maps API SDK</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script> <script type="text/javascript"> function initialize(position) { var latlng = new google.maps.LatLng(35.801922, 139.717583); var myOptions = { zoom: 15, ) center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };// 地図プロパティここまで //ルート検索 var rendererOptions = { draggable: true, preserveViewport:false }; var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); var directionsService = new google.maps.DirectionsService(); var request = { origin: "川口駅",//出発点 destination: "南鳩ヶ谷駅",//到着点 travelMode: google.maps.DirectionsTravelMode.DRIVING,//運転モード unitSystem: google.maps.DirectionsUnitSystem.METRIC, optimizeWaypoints: true, avoidHighways: false, avoidTolls: false }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); directionsDisplay.setPanel(document.getElementById("directionsPanel")); } }); var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); directionsDisplay.setMap(map); }//initialize() </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 640px; height: 480px;"></div> <div id="directionsPanel" style="width: 640px; height: 480px;"></div> </body> </html>
グーグルマップで表示(場所は地元)
<!DOCTYPE html> <html lsng="ja"> <head> <meta charset="UTF-8"> <title>グーグルマップ(Static Maps API)</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(35.801922,139.717583); var myOptions = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };// 地図プロパティここまで 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(35.816778, 139.736259); 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 markertext='ここは<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>
youtubeを埋め込む
youtube動画埋め込みテスト
php_form get postの違い
formで使うgetとpostの違い
get→送信した時に書いた内容がアドレス内に表示される。検索物はだいたいこれ。グーグルマップとか。getでないと個別のアドレスが全部表示されないのでgetじゃないとブログ等に貼れない。
post→表示されない。入力された個人情報とかもれない。
つまりform的にはpost が基本。
wordpress テーマの場所
dreamweaver上での現在適用されてるテーマの場所について。
wp-content→themes→テーマの置いてある場所(どこにあるかは、テーマの外観のところに書いてある。現在のテーマというとこ)→header で見つかる。
wordpress上でもテーマ編集で見える、が黒文字オンリーなので見にくい。
おいしいご飯
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>楽しいおかず</title> <link rel="stylesheet" href="css/style1.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> <div id="container"> <div class="le"> <figure class="box"> <ul> <li><img src="tate01/logo01.png"></li> </ul> </figure> <figure class="box"> <ul> <li class="le"><img src="tate01/nav01_01_o.png" class="ma_ri" ></li> <li><img src="tate01/nav02_01_o.png" class="ma_bo"></li> <li class="le"><img src="tate01/nav03_01_o.png" class="ma_ri"></li> <li><img src="tate01/nav04_01_o.png"></li> </ul> </figure> <figure class="box"> <ul> <li><img src="tate01/ph26_l.jpg"></li> </ul> </figure> <figure class="box"> <ul> <li class="le"><img src="tate01/ph36_mt.jpg" class="ma_ri"></li> <li><img src="tate01/ph19_s.jpg" class="ma_bo"></li> <li><img src="tate01/ph37_s.jpg"></li> </ul> </figure> <figure class="box"> <ul> <li class="le"><img src="tate01/ph23_my.jpg" class="ma_bo"></li> <li class="le"><img src="tate01/ph28_s.jpg" class="ma_ri"></li> <li class="le"><img src="tate01/ph05_s.jpg"></li> </ul> </figure> </div> <div class="le"> <figure class="box"> <ul> <li class="le"><img src="tate02/ph12_my.jpg" class="ma_bo"></li> <li class="le"><img src="tate02/ph02_s.jpg" class="ma_ri"></li> <li class="le"><img src="tate02/ph22_s.jpg"></li> </ul> </figure> <figure class="box"> <ul> <li><img src="tate02/ph10_l.jpg"></li> </ul> </figure> <figure class="box"> <ul> <li class="ri"><img src="tate02/ph07_mt.jpg" ></li> <li><img src="tate02/ph21_s.jpg" class"=ma_bo"></li> <li><img src="tate02/ph03_s.jpg" class="ma_ri"></li> </ul> </figure> <figure class="box"> <ul> <li><img src="tate02/ph09_l.jpg"></li> </ul> </figure> <figure class="box"> <ul> <li class="le"><img src="tate02/ph13_s.jpg" class="ma_ri"></li> <li class="ri"><img src="tate02/ph27_s.jpg" class="ma_bo"></li> <li><img src="tate02/ph24_my.jpg"></li> </ul> </figure> </div> <div class="le"> <figure class="box"> <ul> <li><img src="tate03/ph11_l.jpg"></li> </ul> </figure> <figure class="box"> <ul> <li class="ri"><img src="tate03/ph01_mt.jpg"></li> <li><img src="tate03/ph18_s.jpg" class="ma_bo"></li> <li><img src="tate03/ph17_s.jpg" class="ma_ri"></li> </ul> </figure> <figure class="box"> <ul> <li class="le"><img src="tate03/ph20_s.jpg" class="ma_ri"></li> <li class="ri"><img src="tate03/ph06_s.jpg" class="ma_bo"></li> <li><img src="tate03/ph15_my.jpg"></li> </ul> </figure> <figure class="box"> <ul> <li class="le"><img src="tate03/ph25_s.jpg" class="ma_ri"></li> <li><img src="tate03/ph08_s.jpg" class="ma_bo"></li> <li class="le"><img src="tate03/ph16_s.jpg" class="ma_ri"></li> <li><img src="tate03/ph04_s.jpg"></li> </ul> </figure> <figure class="box"> <ul> <li class="t5"><img src="tate03/ph14_l.jpg"></li> </ul> </figure> </div> </div> </body> </html>
@charset "UTF-8"; *{ margin:0; padding:0; list-style-type:none; } #container { width: 960px; height: auto; background-color:#CCC; margin:20px; } .box{ width:300px; height:300px; margin: 0 20px 20px 0; } .le{ float:left; } .ri{ float:right; } .ma_ri { margin-right:20px; } .ma_bo { margin-bottom:20px; }
確認テスト_パス
確認テスト2番 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>パス確認テスト</title> </head> <body> <img src="../images/btn.jpg"> </body> </html>
確認テスト1番2番4番 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>パスの確認テスト</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <img src="items/images/ph.jpg"> <ul> <li id="btn01"><a href="#">01</a></li> </ul> </body> </html>
@charset "UTF-8"; ul{ list-style-type:none; } #btn01 a{ display:block; } #btn01 a:link{ background-image:url(../images/btn.jpg); } #btn01 a:hover{ background-image:url(../images/btn2.jpg); }