CLUCT,FUCT,SCANNERを扱う恵比寿のセレクトショップFIRMのファッションスナップを集めたサイト

サイト制作

http://sk8.fool.jp/firm/
ポートフォリオ用に一応レスポンシブデザインで作った恵比寿のセレクトショップのファンサイト。GoogleMapの位置がなぜか合わなかったが、終点・始点を交換してみたら正しく示した。
PCサイズ

tabletサイズ

smart phoneサイズ

HTML5 レスポンシブデザイン　Media Queries 外部スタイルシートの読み込み

HTML5

レスポンシブデザイン「Media Queries」の外部スタイルシートの読み込みの記述。

<link rel="stylesheet" href="style-l.css">//PC用
<link rel="stylesheet" href="style-m.css" media="only screen and (min-width:640px) and (max-width:979px)">//tablet用
<link rel="stylesheet" href="style-s.css" media="only screen and (max-width:639px)">//smart phone用

HTML5　レスポンシブデザインサイト　スタイルシートの書き方

HTML5

HTML5　レスポンシブデザインサイト　スタイルシートの書き方

以下のようにスタイルシートを3つ用意する。
各サイズで読み込むスタイルシートが変わる。

<link rel="stylesheet" href="style-small.css">//スマートフォンサイト用

<link rel="stylesheet" href="style-medium.css" media="only screen and (min-width:600px) and (max-width:979px)">//タブレット用

<link rel="stylesheet" href="style-large.css" media="only screen and (min-width:980px)">//PC用

Google Map　吹き出し（テキスト）　カスタマイズ方法

JavaScript

Google Mapのカスタマイズ方法

Geocoding - 住所から緯度経度を検索

  • Google　GeocordingでGoogle　Mapで表示したい住所を入力し、検索
  • 取得した緯度経度を以下のScriptのvar pointabs = new GLatLng(緯度,経度);部分にペースト
  • あとは表示したいテキストを変更する。var text = 'テキスト入力';
<body>
<div id="container">
<div id="map" style="width: 800px; height: 450px;"></div>
<script src="http://maps.google.com/maps?file=api&v=2.78&key=ABQIAAAAY3QhpAivo_9PrarKLGIpURS9lFaAjcEgZ-Tj2TWZiSgqOU4cVxQm-Xt_Pvw7dVQq72clu65U5BfDdg"></script> 
<script> 
var map = null;
var geocoder = null;
var pointabs = new GLatLng(35.66,139.73);//ここに取得した緯度経度をペースト
var text = '<div class="google"><h3>〒106-0032 東京都港区六本木６丁目 六本木ヒルズ</h3><br><p>2013年12月18日開講 Webサイト制作科募集中！</p><p><img src="img/01.jpg" width="90px" height="50px"></p></div>';
//タグも打てるので、スタイルシートでの見栄えも変えられる。
var marker = new GMarker(pointabs);
 
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.enableContinuousZoom();
 
map.enableScrollWheelZoom();
function wheelevent(e) {
if (!e) e = window.event;
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
}
GEvent.addDomListener(map.getContainer(), "DOMMouseScroll", wheelevent);
map.getContainer().onmousewheel = wheelevent;
 
map.setCenter(pointabs, 17);
map.addOverlay(marker);
marker.openInfoWindowHtml(text);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(text);
});
}
}
load();
</script>
</div>
</body>

レスポンシブデザインで作ったサイトを『i Phone』画面で検証方法

HTML5
  1. OSがWindowsの場合は、まずSafariをダウンロード。
  2. Safariのツールから[設定]を選択。
  3. 詳細の下にある、メニューバーを開発にチェックをつける。
  4. [開発]→ユーザーエージェント→ i Phoneを選択。

HTML5　レスポンシブデザイン『Media Queries』の記述

HTML5

ヘッド内に以下のメタの記述。

<meta name="viewpoint" content="width=device-width">
//for IE
<!--[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]-->

各サイズのCSSを記述するとき。

/* タブレット向けのスタイル：481px 〜 768px */
@media only screen and (min-width: 481px){
//ここにタブレット向けのスタイルシートを記入。
}
/*  PC向けのスタイル：769px〜960px */
@media only screen and (min-width: 769px) {
//ここにPC向けのスタイルシートを記入。
}

その他Media QueriesのCSS記述。

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display:block;
}
blockquote: before, blockquote: after,
q: before, q: after{
  content:'';
  content: none;
}
ins{
  background-color: #bbe3d7;
  color: #000;
  text-decoration: none;
}

mark{
  background: #bbed3d7;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
del{
  text-decoration: line-through;
}
abbr[title],dfn[title]{
  border-bottom: 1px dotted;
  cursor: help;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}

hr {
  display:block;
  height:1px;
  border:0;   
  border-top:1px solid #CCCccc;
  margin:1em 0;
  padding:0;
}

input, select {
  vertical-align:middle;
}

/* clearfix */
.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }