2012-08-08

スマートフォンサイト01

mobile site

●　テーマ変更
●　リスト表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css">
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery.mobile-1.0.1.js"></script>
</head>

<body>
<div data-role="page" id="index" data-theme="c">
<div data-role="header" data-theme="b">
<h1>TOPページ</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">メニュー</li>
<li><a href="#about"><h3>このサイトについて</h3></a></li>
<li><a href="#seminar"><h3>セミナー情報</h3></a></li>
<li><a href="#access"><h3>アクセス</h3></a></li>
<li><a href="#contact"><h3>お問い合わせ</h3></a></li>
</ul>
</div>
<div data-role="footer" data-theme="b">
<h4>&copy; 2012 Smartphone</h4>
</div>
</div>

<div data-role="page" id="about">
<div data-role="header">
<h1>このサイトについて</h1>
</div>
<div data-role="content">
<p><a href="#index">TOPページ</a></p>
</div>
<div data-role="footer">
<h4>&copy; 2012 Smartphone</h4>
</div>
</div>

<div data-role="page" id="seminar">
セミナー情報
</div>
<div data-role="page" id="access">
アクセス
</div>
<div data-role="page" id="contact">
お問い合わせ
</div>
</body>
</html>

●MEMO●

デザイン（色）カスタム...[data-theme](ページ要素に対して)

リスト表示...
[data-role="content"]（コンテンツ領域内）
[data-role="listview"](ul要素に対し)

リスト見出し...
[data-role="list-divider"]（li要素に）

立体的角丸...[data-inset="true"](ul要素に）

●　aboutページの作成

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css">
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery.mobile-1.0.1.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="c">
<div data-role="header" data-theme="b">
<h1>TOP</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">menu</li>
<li><a href="#about"><h3>about</h3></a></li>
<li><a href="#seminar"><h3>workshop</h3></a></li>
<li><a href="#access"><h3>access</h3></a></li>
<li><a href="#contact"><h3>contact</h3></a></li>
</ul>
</div>
<div data-role="footer" data-theme="b">
<h4>&copy; 2012 Smartphone</h4>
</div>
</div>

<div data-role="page" id="about" data-theme="c">
<div data-role="header" data-theme="b">
<h1>About</h1>
</div>
<div data-role="content">
<h2 class="h1">このサイトについて</h2>
<p>海外からのペットグッズを取り扱っています</p>
<h3 class="h1">ペットショップ○○について</h3>
<p>主に犬の輸入おもちゃ、服などを扱っています。</p>
<p>実店舗とネットでの販売を行っております。</p>
</div>
<div data-role="footer" data-theme="b">
<h4>&copy; 2012 Smartphone</h4>
</div>
</div>

<div data-role="page" id="seminar">
workshop
</div>
<div data-role="page" id="access">
access
</div>
<div data-role="page" id="contact">
contact
</div>
</body>
</html>

●MEMO●

-classのつけ方について-
jQuery Mobileのようなフレームワークでは、フレームワークが定めるルールに沿ってマークアップする必要があるため、HTMLドキュメント内の見出し要素と、見た目上の見出しレベルを一致できない場合がある。
見た目としての見出しレベルをclass属性で定義し、CSSで記述したスタイルを適用している。
○参考サイト○　http://www38.atwiki.jp/hear_br0wn/m/pages/79.html?

2012-08-07

Youtube動画を挿入

mobile site

1,Youtubeの共有ボタンを押し、埋め込みコードをクリックする。
2,[動画が終わったら関連動画を表示する]を解除し、サイズをカスタムで[幅300×高さ169]設定する。
3,取得したコードを挿入して完了！

Googleマップ挿入
1,Googleマップで挿入したい住所を表示し、リンクボタンをクリックするとURLが表示。
2,下記内容を記述

/* Googleマップのスタイル */
.googlemap {
    border: none; /* borderを削除 */
}

2012-08-04

CSSのみでポップアップ画像を表示

HTML CSS

-SAMPLE-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<title>CSSでポップアップ画像を表示</title>
<style type="text/css">
<!--
#wrapper {
	margin: 50px;
	padding: 30px 0 0 15px;
	height: 508px;
	width: 910px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:12px;
}
.block1,
.block2 {
	display: inline;
	float: left;
	margin: 0 14px 0 0;
	height: 197px;
	width: 160px;
}
img {
	border: none;
}
.photo, .photo2 {
	position: relative;
	top: 0;
	left: 0;
	width: 160px;
}
.photo a .large {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	height: 1px;
	width: 1px;
	z-index: -10;
}
.photo a.popup,
.photo a.popup:visited {
	display: block;
	left: 0;
	top: 0;
	width: 160px;
}
.photo a.popup:hover {
	background-color: #fff;
}
.photo a.popup:hover .large {
	display: inline;
	position: absolute;
	left: 0;
	top: -15px;
	height: 220px;
	width: 285px;
	z-index: 100;
}
.photo2 a img.large2 {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	height: 1px;
	width: 1px;
}
.photo2 a.popup:hover .large2 {
	display: block;
	position: absolute;
	left: -125px;
	top: -15px;
	height: 220px;
	width: 285px;
	z-index: 1000;
}
/*IE6 7*/
/*↓これを入れないとIE6,7Sでポップアップしないらしい*/
.photo a.popup:hover {
	background-color: #fff;
}
-->
</style>
</head>
<body>
<div id="wrapper">

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/01.jpg" width="160" height="138" alt="" /><img src="img/01.jpg" width="285" height="220" alt="" class="large" /></a>
</div>
<p class="caption">Temperate Rainforest Olympic</p>
</div>

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/02.jpg" width="160" height="138" alt="" /><img src="img/02.jpg" width="285" height="220" alt="" class="large" /></a>
</div>
<p class="caption">Close-Up of Moth on Tree Bark Mont-Saint-Bruno</p>
</div>

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/03.jpg" width="160" height="138" alt="" /><img src="img/03.jpg" width="285" height="220" alt="" class="large" /></a>
</div>
<p class="caption">Koke</p>
</div>

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/04.jpg" width="160" height="138" alt="" /><img src="img/04.jpg" width="285" height="220" alt="" class="large" /></a>
</div>
<p class="caption">Understory plants in rainforest</p>
</div>

<div class="block2">
<div class="photo2">
<a href="#" title="" class="popup"><img src="img/05.jpg" width="160" height="138" alt="" /><img src="img/05.jpg" width="285" height="220" alt="" class="large2" /></a>
</div>
<p class="caption">Leaf</p>
</div>

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/06.jpg" width="160" height="138" alt="" /><img src="img/06.jpg" width="285" height="220" alt="" class="large" /></a>
</div> 
<p class="caption">Clover</p>
</div>

<div class="block1">
<div class="photo">
<a href="shop/index.html#remontop2" title="" class="popup"><img src="img/07.jpg" width="160" height="138" alt="" /><img src="img/07.jpg" width="285" height="220" alt="" class="large" /></a>
</div>  
<p class="caption">Trillium Lyndeshores Conservation Area</p>
</div>

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/08.jpg" width="160" height="138" alt="" /><img src="img/08.jpg" width="285" height="220" alt="" class="large" /></a>
</div>
<p class="caption">Close-Up of Foliage </p>
</div>

<div class="block1">
<div class="photo">
<a href="shop/index.html#kakitop2" title="" class="popup"><img src="img/09.jpg" width="160" height="138" alt="" /><img src="img/09.jpg" width="285" height="220" alt="" class="large" /></a>
</div>
<p class="caption">sunagoke</p>
</div>

<div class="block2">
<div class="photo2">
<a href="#" title="" class="popup"><img src="img/10.jpg" width="160" height="138" alt="" /><img src="img/10.jpg" width="285" height="220" alt="" class="large2" /></a>
</div> 

<p class="caption">Cress</p>
</div> 
</div>
</div>
</body>
</html>

2012-08-03

JQuery 横スライド

STUDY MEMO Jquery

■JQuery/ 横スライド
-SAMPLE-

・下記サイトよりダウンロード（jsファイルに入っている　easySlider1.7.js　のみ使用。）
Easy Slider 17 Numeric Navigation jQuery Slider

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jquery easySlider</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(function(){
  $("#slider").easySlider({
	controlsShow:false,
	speed:1200,
	auto:true,
	continuous:true
  });
});
</script>
<style type="text/css">
<!--
#slider ul{
 list-style-type: none;
 margin: 0;
 padding: 0;
}
#slider li{
 width: 640px;
 height: 427px;
}
-->
</style>
</head>
<body>
<div id="slider">
<ul>
<li><img src="images/01.jpg" /></li>
<li><img src="images/02.jpg" /></li>
<li><img src="images/03.jpg" /></li>
<li><img src="images/04.jpg" /></li>
</ul>
</div>
</body>
</html>

■JQuery NIVO_slider
-SAMPLE-

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<head>
<title>Nivo Slider</title>
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen">
<link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen">
<link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen">
<link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen">
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen">
<link rel="stylesheet" href="demo/style.css" type="text/css" media="screen">
</head>
<body>
<div id="wrapper">

<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/01.jpg" data-thumb="images/01.jpg" alt="">
<a href="http://dev7studios.com"><img src="images/02.jpg" data-thumb="images/02.jpg" alt="" title="This is an example of a caption"></a>
<img src="images/03.jpg" data-thumb="images/03.jpg" alt="" data-transition="slideInLeft">
<img src="images/04.jpg" data-thumb="images/04.jpg" alt="" title="#htmlcaption">
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
</div>
</div>

</div>
<script type="text/javascript" src="demo/scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.js"></script>
<script type="text/javascript">
	$(window).load(function() {
			$('#slider').nivoSlider();
	});
</script>
</body>
</html>

○nivoslider 参考サイト○
Nivo Slider
http://webhako.net/jquery/plugin-nivo_slider/

2012-07-13

横スクロール&Lighboxとクロスフェード

Jquery

●横スクロール
-SAMPLE-

下記サイトよりダウンロード
Minimal setup for scrollable
JQuery Scrollable

●配列を使ったクロスフェード

下記サイトよりダウンロード
BrandSpankingNew Crossfader→BrandSpankingNew

-SAMPLE-

2012-07-12

【HTML5課題17】音声再生

HTML5

○音声を再生させなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="">
<script src=""></script>
<!--[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]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>

<body>
<h1>サンプル音声を再生</h1>
<audio src="image/sample.mp3" controls>
<p>ブラウザ上で再生できない方は<a href="image/sample.mp3">音声のダウンロード</a>をどうぞ。</p>
</audio>
</body>
	
</html>

○audio要素：プラグインなしで、音声を再生
○src属性：音声ファイルのアドレスを指定
○controls属性：音声の再生や停止ボタンなどのユーザーインターフェイスを表示
○autoplay属性：音声が再生可能になると自動で再生
○loop属性：再生終了後、最初に戻って再生を続ける

2012-07-12

【HTML5課題16】動画表示

HTML5

○動画を表示させなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="">
<script src=""></script>
<!--[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]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>

<body>
<h1>サンプル動画を表示</h1>
<video src="image/sample.mp4" controls>
<p><img src="image/sample.jpg" alt="動画のサムネイル"></p>
<p><a href="image/sample.mp4">動画のダウンロード</a></p>
</video>
<p>※サンプル動画は無音です。</p>
</body>
	
</html>

○video要素：プラグインを使わずに動画を再生
○src属性：動画ファイルのアドレスを指定
○controls属性：ビデオの再生や停止ボタンなどのユーザーインターフェイスを表示
○autoplay属性：動画を読み込むと自動で再生
○loop属性：再生終了後、最初に戻って再生を続ける
○poster属性：動画を読み込み中に。表示しておきたい画像を指定
※2012年時点で、ブラウザの対応が異なり表示は統一されてはいない