2012-09-12

【画面サイズごとのデザイン】

【画面サイズごとのデザイン】
今日の授業でのサイト　
http://rara.mods.jp/green/

2012-09-11

【固定レイアウト：レイアウトの設定】

【固定レイアウト：レイアウトの設定】
授業の流れで、友人の雀荘のHPを作ってみました。
http://rara.mods.jp/vm/

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>まぁじゃんバイオレンスモンキーズ</title>
<link rel="stylesheet" href="css/style-l.css">
<link rel="stylesheet" href="css/style-m.css" media="only screen and (min-width:640px) and (max-width:979px)">
<link rel="stylesheet" href="css/style-s.css" media="only screen and (max-width:639px)">
<!--webfont-->
<link href="http://fonts.googleapis.com/css?familiy=Maven+pro:900,400" rel="stylesheet" type="text/css">
</head>
<body>
<!--container-->
<div id="container">
<!--header-->
<div id="header">
<div id="site">
<h1><img src="img/log1.png" alt=""></h1>
</div><!--site-->
<div id="nav">
<ul>
<li><a href="index.html">トップ</a></li>
<li><a href="rule.html">ルール</a></li>
<li><a href="info.html">基本情報</a></li>
<li><a href="map.html">アクセス</a></li>
</ul>
</div><!--nav-->
</div><!--header-->
<!--headerpost-->
<div id="headerpost">
<img src="img/ch.png">
<div id="lead"><img src="img/5vm.gif">
<h2>まぁじゃんバイオレンスモンキーズで<br>マージャンしよう！</h2>
<p class="main">八王子駅からすぐ！
フリーもセットもやってます♪</p>
<p class="main">2012年8月3日</p>
<img src="img/majan.gif">
<p class="more"><a href="url">MORE</a></p>
</div>
</div><!--headerpost-->
<!--content-->
<div id="content">
<!--post-->
<div class="post">
<a href="url">
<img src="img/mans.png" alt="">
<h2>七萬</h2>
<p>=========================…</p>
<p class="date">2012年8月1日</p>
<p class="more_s">MORE</p>
</a>
</div><!--post-->
<!-- ▼.post -->
<div class="post">
<a href="url">
<img src="img/p1.png" alt="">
<h2>ドサ健</h2>
<p>=========================…</p>
<p class="date">2012年7月28日</p>
<p class="more_s">MORE</p>
</a>
</div>
<!-- ▲.post -->
<!-- ▼.post -->
<div class="post">
<a href="url">
<img src="img/ojii.png" alt="">
<h2>フリーは5半荘打つとお食事サービスがつきます♪</h2>
<p>=========================…</p>
<p class="date">2012年7月20日</p>
<p class="more_s">MORE</p>
</a>
</div>
<!-- ▲.post -->
<!-- ▼.post -->
<div class="post">
<a href="url">
<img src="img/vm.jpg" alt="">
<h2>セットでもフリーでも楽しめます♪</h2>
<p>=========================…</p>
<p class="date">2012年7月5日</p>
<p class="more_s">MORE</p>
</a>
</div>
<!-- ▲.post -->
</div><!--content-->
<!-- ▼#footer -->
<div id="footer">
<p>バイオレンスモンキーズ</p>
<!-- ▼#iconmenu -->
<div id="iconmenu">
<ul>
<li><a href="url"><img src="img/btn_tw.png" alt="Twitter"></a></li>
<li><a href="url"><img src="img/btn_fb.png" alt="Facebook"></a></li>
<li><a href="url"><img src="img/btn_gplus.png" alt="Google Plus"></a></li>
<li><a href="url"><img src="img/btn_rss.png" alt="RSS Feed"></a></li>
</ul>
</div>
<!-- ▲#iconmenu -->
<!-- ▼#submenu -->
<div id="submenu">
<ul>
<li><a href="url">Privacy Policy</a></li>
<li><a href="url">Terms of Use</a></li>
<li><a href="url">Contact</a></li>
</ul>
</div>
<!-- ▲#submenu -->
<small>Copyright &copy; バイオレンスモンキーズ</small>
</div>
<!-- ▲#footer -->

</div><!--container-->


</body>
</html>

@charset "utf-8";
/* CSS Document */

/*layout*/
body {
	margin:24px 10px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	}
	
	#container {
		width:960px;
		margin:auto;
		}
		#header {
			margin-bottom:10px;
			overflow:hidden;
			}
			#headerpost {
				margin-bottom:30px;
				}
				#content {
					margin-bottom:30px;
					}
					/*#content*/
					#content {
						overflow:hidden;
						}
						.post {
							float:left;
							width:216px;
							margin-right:32px;
							margin-bottom:25px;
							}
							.post:last-child {
								margin-right:0;
								}
								.post+.post+.post+.post {
									margin-right:0;
									}
	/*.post*/
	.post img {
		width:216px;
		height:auto;
		vertical-align:bottom;
		border:none;
		}
		h2 {
			color:#000;
			}
		.main {
			color:#000000;
			}
		.post h2 {
			font-size:16px;
			margin:5px 0 0;
			}
			.post p {
				font-size:12px;
				margin:10px 0;
				}	
				.post .date {
					float:left;
					margin:0;
					}
					.post .more_s {
						float:right;
						color:#FFFFFF;
						font-size:14px;
						font-family:Arial, Helvetica, sans-serif;
						background-color:#666;
						background-image:;
						background-repeat:no-repeat;
						background-position:94% 50%;
						padding:3px 25px 3px 5px;
						margin:0;
						}		
						.post a {
							color:#000;
							text-decoration:none;
							display:block;
							overflow:hidden;
							}
							.post a:hover {
								background-color:#cfffb2;
								}
/*site*/
#site {
	float:left;
	}
	#site h1 {
		margin:0;
		}
		#site img {
			vertical-align:bottom;
			}
			/*nav*/
			"nav {
				float:right;
				font-size:22px;
				font-family:Arial, Helvetica, sans-serif;
				padding-top:30px;
				}
				#nav ul {
					margin:0;
					padding:0;
					}
					#nav li {
						list-style-type:none;
						float:left;
						}
						#nav li a {
							display:block;
							float:left;
							margin-left:20px;
							text-decoration:none;
							border-bottom:solid 5px transparent;
							color:#000000;
							}
							#nav li a:hover {
								border-bottom-color:#ff1e97;
								}
/*#headerpost*/
#headerpost img {
	float:left;
	vertical-align:bottom;
	}
	#headerpost #lead {
		float:left;
		width:300px;
		color:#fff;
		margin-left:25px;
		overflow:hidden;
		}
		#headerpost h2 {
			margin:20px 0;
			}
			#headerpost .more {
				font-size:18px;
				font-family:Arial, Helvetica, sans-serif;
				text-align:right;
				}
				#headerpost .more a {
					color:#fff;
					background-image:;
					background-repeat:no-repeat;
					background-position:right center;
					display:block;
					padding:10px 40px 10px 0;
					text-decoration:none;
					}
	#headerpost { background-color: #FF0;
	background: -webkit-gradient(linear,left top, left bottom, from(#FFF), to(#FF0));
	background: -webkit-linear-gradient(#FFF 0%, #FF0 100%);
	background: -moz-linear-gradient(#FFF 0%, #FF0 100%);
	background: -o-linear-gradient(#FFF 0%, #FF0 100%);
	background: -ms-linear-gradient(#FFF 0%, #FF0 100%);
	background: linear-gradient(#FFF 0%, #FF0 100%);
	overflow: hidden;

}

/*footer*/
#footer {
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
	background-color:#333;
	padding:10px 10px 20px;
	}
	#footer p {
		float:left;
		margin:0;
		}
		/*#iconmenu*/
		#iconmenu {
			float:right;
			}
			##iconmenu ul{
				margin:0;
				padding:3px 0 0;
				}
				#iconmenu li {
					display:inline;
					list-style-type:none;
					}
					#iconmenu img {
						border:none;
						}
						/*#submenu*/
						#submenu {
							clear:both;
							}
							#submenu ul {
								margin:10px 0;
								padding:3px 0 0;
								font-size:12px;
								}
								#submenu li {
									display:inline;
									list-style-type:none;
									}
									#submenu a {
										color:#ff1e97;
										font-weight:bold;
										border-right:solid 1px #fff;
										padding-right:6px;
										margin-right:3px;
										text-decoration:none;
										}
										#submenu li:last-child a {
											border:none;
											}
											#submenu li+li+li a{
												border:n;
												}
				
/* Copyright */
small {
	font-size: 12px;
	font-weight: bold;
	display: block;
}								
																
/*map*/
#map_canvas {
	text-align:center;
	width:100%;
	height:100%;
	}		
	
	#wrapper {
		background-color: #FF0;
	background: -webkit-gradient(linear,left top, left bottom, from(#FFF), to(#FF0));
	background: -webkit-linear-gradient(#FFF 0%, #FF0 100%);
	background: -moz-linear-gradient(#FFF 0%, #888888 100%);
	background: -o-linear-gradient(#FFF 0%, #FF0 100%);
	background: -ms-linear-gradient(#FFF 0%, #FF0 100%);
	background: linear-gradient(#FFF 0%, #FF0 100%);
	overflow: hidden;}

@charset "utf-8";
/* CSS Document */

/*layout*/
#container {
	width:620px;
	}
	/*.post*/
	.post {
		width:300px;
		margin-right:20px;
		}
		.post:nth-child(even) {
			margin-right:0;
			}
			.post img {
				width:300px;
				}
				.post h2 {
					font-size:22px;
					}
					.post p {
						font-size:16px;
						}
						.post .more_s {
							font-size:18px;
							}
/*nav*/
#nav {
	padding-top:0;
	}
	#nav li:nth-child(2) {
		float:none;
		overflow:hidden;
		}				
		/*#headerpost*/
		#headerpost {
			position:relative;
			}
			#headerpost img {
				float:none;
				}
				#headerpost #lead {
					float:none;
					position:absolute;
					left:0;
					bottom:0;
					background-color:rgba(0,0,0,0.7);
					width:auto;
					padding:10px 20px;
					margin:0;
					}
					#headerpost h2 {
						font-size:20p;
						margin:10px 0 10px 0;
						}	
						#headerpost p {
							font-size:14px;
							margin:0 0 20px 0;
							}
							#headerpost .date {
								float:left;
								margin:0;
								}
								#headerpost .moer {
									float:right;
									margin:-12px 15px 0 0;
									}

@charset "utf-8";
/* CSS Document */

/*layout*/
#container {
	width:300px;
	}
	.post {
		float:none;
		width:300px;
		margin-right:0;
		}
		/*post*/
		.post img {
			width:300px;
			}
			.post h2 {
				font-size:22px;
				}
				.post p {
					font-size:16px;
					}
					.post .more_s {
						font-size:18px;
						}
						/*site*/
						#site {
							float:none;
							}
							#site img {
								width:300px;
								height:auto;
								}
/*nav*/
#nav {
	float:none;
	font-size:14px;
	padding-top:6px;
	}
	#nav ul li a {
		margin-left:0;
		margin-right:10px;
		}
		/*headerpost*/
		#headerpost img {
			float:none;
			width:300px;
			height:auto;
			}
			#headerpost #lead {
				float:none;
				background-color:#252525;
				width:auto;
				padding:10px 10px;
				margin:0;
				}	
				#headerpost h2 {
					font-size:20px;
					margin:10px 0 10px 0;
					}	
					#headerpost p {
						font-size:14px;
						margin:0 0 20px 0;
						}
						#headerpost .date {
							float:left;
							margin:0;
							}
							#headerpost .more {
								float:right;
								margin:-12px 15px 0px 0;
								}

2012-09-05

【Google Map API】

Google Maps ルート検索を応用して終点を固定してみました。

http://rara.mods.jp/map_0905/map6

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps ルート検索</title>
<style>
  div#map_canvas {
    width:700px;
    height:500px;
  }
  div#container {
    margin:40px;
  }
	.box {
		display:none;
		}
		.map {
			font-size:30px;
			}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="mapdrow1.js"></script>
</head>
<body onload="initialize();">
<div id="container">
<h1>Google Maps ルート検索</h1>
<p>テキストフィールドに始点と終点を入力すると、ルート検索を行います。</p>
<p class="map">
始点：<input type="text" name="start" id="start" size="12" maxlength="100">
 &nbsp;終点：ちとよってこ屋<span class="box"><input type="text" name="end" id="end" size="12" maxlength="100"></span>
</p>
<p>
 <input type="button" value="検索" onclick="searchRoute()" />
</p>
<div id="map_canvas"></div>
</div>
</body>
</html>

// JavaScript Document
var map;
var directionsRenderer;
var directions;
var err = google.maps.DirectionsStatus;
var directionsErr = new Array();
directionsErr[err.INVALID_REQUEST] = "指定された DirectionsRequest が無効です。";
directionsErr[err.MAX_WAYPOINTS_EXCEEDED] = "DirectionsRequest に指定された DirectionsWaypoint が多すぎます。ウェイポイントの最大許容数は 8 に出発地点と到着地点を加えた数です。";
directionsErr[err.NOT_FOUND] = "出発地点、到着地点、ウェイポイントのうち、少なくとも 1 つがジオコード化できませんでした。";
directionsErr[err.OVER_QUERY_LIMIT] = "ウェブページは、短期間にリクエストの制限回数を超えました。";
directionsErr[err.REQUEST_DENIED] = "ウェブページではルート サービスを使用できません。";
directionsErr[err.UNKNOWN_ERROR] = "サーバー エラーのため、ルート リクエストを処理できませんでした。もう一度試すと正常に処理される可能性があります。";
directionsErr[err.ZERO_RESULTS] = "出発地点と到着地点間でルートを見つけられませんでした。";

//onload時の処理
function initialize() {
	//Google Maps初期設定
	var opts = {
		zoom:14,
		center:new google.maps.LatLng(35.6461402,139.3547749),
		mapTypeId:google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById("map_canvas") , opts);		//Google Maps作成
	
	//ルートレンダラ生成
	directionsRenderer = new google.maps.DirectionsRenderer({
	polylineOptions: {
        strokeColor: '#FF0000',
        strokeWeight: 4,
        strokeOpacity: 0.7
      }
	});	
	directionsRenderer.setMap(map);	//ルートレンダラにマップを関連付け
}

//検索開始
function searchRoute() {
	//textboxからの値を取得
	var start = document.getElementById("start").value;
	var end = document.getElementById("end").value;
	var end = new google.maps.LatLng(35.6461402,139.3547749);
	//検索設定
	directions = new google.maps.DirectionsService();	//ルート生成
	//ルートリクエスト
	directions.route({
		origin:start,		//開始地点
		destination:end,	//終了地点
		 
		travelMode:google.maps.DirectionsTravelMode.DRIVING,	//ルートタイプ(車)
		avoidHighways:true,		//高速道路(使わない)
		avoidTolls:true,		//有料道路(使わない)
		 optimizeWaypoints: true,	//最適化された最短距離にする。
	},
	function(results, status) {	//ルート結果コールバック関数
		if (status == err.OK) {	//検索結果がtrueの場合
			directionsRenderer.setDirections(results);
		} else {	//検索結果がfalseの場合
			alert(directionsErr[status]);
		}
	});
}

2012-09-03

【サムネールを作成する】

2012-08-31

【YouTubeの埋め込み】

YouTube

2012-08-29

【CSS3】

CSS

【CSS3】
授業でCSS3の勉強をしましたが、その流れで
小学校のHPを作ってみました。

2012-08-22

【phpの勉強】

PHP

【phpの勉強】

http://rara.mods.jp/php/0821_index

http://rara.mods.jp/php/search.html

【index.html】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせ入力フォーム</title>
<link href="style.css" rel="stylesheet" media="screen, print">
</head>
<body>
<form action="check3.php" method="post" id="inquiry">
<table summary="お問い合わせに関する入力項目名とその入力欄">
<tr>
<th><label for="name">お名前</label></th>
<td><input type="text" name="name" size="30" id="name" class="text1"></td>
</tr>
<tr>
<th><label for="email">メールアドレス</label></th>
<td><input type="text" name="email" size="30" id="email" class="text2"></td>
</tr>
<tr>
<th><label for="message">ご意見</label></th>
<td><textarea name="message" cols="30" rows="5" class="text3" id="message"></textarea></td>
</tr>
</table>
<input type="submit" value="確認画面へ">
</form>
</body>
</html>

【search.html】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>検索</title>
<link href="style.css" rel="stylesheet" media="screen, print">
</head>
<body>
<form action="search.php" method="post" id="search">
code:<input type="text" name="code" size="20" id="code">
name:<input type="text" name="name" size="20" id="name">
<br>
<input type="submit" value="検索" />
</form>
<ul>
<li><a href="menu.html">メニューに戻る</a></li>
</ul>
</body>
</html>

【search.php】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>検索画面</title>
<link href="style.css" rel="stylesheet" media="screen, print">
</head>
<body>
<?php
 $code = $_POST['code'];
$name=$_POST['name'];

 $dsn = 'mysql:dbname=xxxx;host=xxxx';
 $user = 'xxxx';
 $password = 'xxxx';
 $dbh = new PDO($dsn, $user, $password);
 $dbh -> query('SET NAMES UTF8');
	
  $sql = 'SELECT * FROM inquiry WHERE code=? OR name=?';
 $stmt = $dbh -> prepare($sql);
 $data[] = $code;
 $data[] = $name;
 $stmt -> execute($data);

 while(1) {
   $rec = $stmt -> fetch(PDO::FETCH_ASSOC);
   if($rec == false) {
        break;
   }
			
  echo $rec['code'].'：&nbsp;';
  echo $rec['name'].'：&nbsp;';
  echo $rec['email'].'：&nbsp;';
  echo $rec['message'];
  echo '<br>';
	}
	
 $dbh = null;
 

?>
 <ul>
<li><a href="search.html">検索画面に戻る</a></li>
</ul>
</body>
</html>

Today & Tomorrow...

勝手気ままな、備忘録的な感じです。

【画面サイズごとのデザイン】

【固定レイアウト：レイアウトの設定】

【Google Map API】

【サムネールを作成する】

【YouTubeの埋め込み】

【CSS3】

【phpの勉強】