2012-09-05

グーグルマップで表示２＿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>

2012-09-05

グーグルマップで表示(場所は地元)

<!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>

2012-08-31

youtubeを埋め込む

youtube動画埋め込みテスト

2012-08-20

php_form get postの違い

formで使うgetとpostの違い
get→送信した時に書いた内容がアドレス内に表示される。検索物はだいたいこれ。グーグルマップとか。getでないと個別のアドレスが全部表示されないのでgetじゃないとブログ等に貼れない。

post→表示されない。入力された個人情報とかもれない。

つまりform的にはpost が基本。

2012-07-25

wordpress テーマの場所

dreamweaver上での現在適用されてるテーマの場所について。
wp-content→themes→テーマの置いてある場所（どこにあるかは、テーマの外観のところに書いてある。現在のテーマというとこ)→header　で見つかる。
wordpress上でもテーマ編集で見える、が黒文字オンリーなので見にくい。

2012-07-23

おいしいご飯

<!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;
}

2012-07-23

確認テスト＿パス

確認テスト２番
<!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);
}