Webサイト制作科 - 作品紹介

Webサイト制作科 - 作品紹介

CSSカスタマイズ

JQM

HTMLの作成

作例を引用して解説します。


  • meta要素のviewportには「width=device-width, initial-scale=1」を指定し、横幅を端末の画面幅に、初期の拡大率を100％に設定します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Sample33</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
<body>
<!--トップページ-->
<div data-role="page" id="index" data-theme="z">
<div data-role="header" data-theme="z">
     (中略)   
</div>
<div data-role="content">
     (中略)   
</div>
<div data-role="footer" data-theme="z">
     (中略)   
</div>
</div>
<!--詳細ページ-->
<div data-role="page" id="detail" data-theme="z">
<div data-role="header" data-theme="z">
     (中略)   
</div>
<div data-role="content">
     (中略)   
</div>
<div data-role="footer" data-theme="z">
     (中略)   
</div>
</div>
</body>
</html>
  • トップページは「#index」というページを、詳細ページは「#detail」というページをdata-role属性の「page」で設定しています
  • サンプルサイトでは解説の都合上、すべての商品の詳細ページを#detailにしていますが、実際にはそれぞれ個別のページを作成する必要があります
  • 各ページ内にはdata-role属性「header」でヘッダーを、data-role属性「content」でコンテンツ領域を、data-role属性「footer」でフッターを作成します
  • また、ページ要素とヘッダー、フッターにはdata-theme属性「z」を指定します。「z」はjQuery Mobileのデフォルトテーマである「a」〜「e」以外の値なら何でも構いません
  • デフォルトのテーマの値以外を設定すると、jQuery Mobileの基本的なスタイルのみが適用され、オリジナルのスタイルが楽に設定できます


トップページのマークアップ

  • ヘッダーではh1要素でサイト名を、h2要素でキャッチコピーを、p要素でサイトの紹介文をマークアップします
<div data-role="header" data-theme="z">
	<h1>HOUSEPLANT STORE</h1>
	<h2>I LOVE HOUSEPLANT</h2>
	<p>sample text sample text sampletext sample text sample text sample text</p>
</div>



<div data-role="content">
<h2>RECOMMEND</h2>
<!--新着商品-->
<div class="ui-grid-b recommend">
<div class="ui-block-a"><a href="#detail" class="new"><img src="images/thumbnail01.jpg" width="82" height="70" alt=""></a></div>
<div class="ui-block-b"><a href="#detail"><img src="images/thumbnail02.jpg" width="82" height="70" alt=""></a></div>
<div class="ui-block-c"><a href="#detail"><img src="images/thumbnail03.jpg" width="82" height="70" alt=""></a></div>
</div>
<!--アコーディオン-->
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="true">
<h3>SITE MENU 1</h3>
<p>sample text sample text  sampletext sample text sample text sample text</p>
<p>sample text sample text  sampletext sample text sample text sample text</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>SITE MENU 2</h3>
<p>sample text sample text  sampletext sample text sample text sample text</p>
<p>sample text sample text  sampletext sample text sample text sample text</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>SITE MENU 3</h3>
<p>sample text sample text  sampletext sample text sample text sample text</p>
<p>sample text sample text  sampletext sample text sample text sample text</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>SITE MENU 4</h3>
<p>sample text sample text  sampletext sample text sample text sample text</p>
<p>sample text sample text  sampletext sample text sample text sample text</p>
</div>
</div>
  • 見出しをh2要素でマークアップし、新着商品はグリッドレイアウトの機能を利用してマークアップします
  • 3カラムのグリッドにするclass属性「ui-grid-b」を指定した要素の中に、class属性「ui-block-a」〜「ui-block-c」を指定した要素を配置します
  • グリッド内にはimg要素と詳細ページ（#detail）をhref属性に指定したa要素を指定します
  • 最後に、フッターにsmall要素でコピーライトを表示します
  • small要素は免責条項や著作権表記などの細目を表すHTML5の要素です
<div data-role="footer" data-theme="z">
<small>Copyright &copy; 2012 ASCII MEDIA WORKS. All rights reserved.</small>
</div>

詳細ページのマークアップ

<div data-role="page" id="detail" data-theme="z">
<div data-role="header" data-theme="z">
<h1><a href="#index" data-rel="back">HOUSEPLANT STORE</a></h1>
<h2>I LOVE HOUSEPLANT</h2>
</div>
<div data-role="content">
<h2>ITEMS</h2>
<p><a href="#img" data-rel="dialog" data-transition="pop"><img src="./images/thumbnail01.jpg" width="82" height="70" alt="" align="left"></a>sample text sample text sampletext sample text sample text sample text sample text sample text</p>
(中略)
<p>sample text sample text sampletext sample text sample text sample text sample text sample text</p>
</div>
<div data-role="footer" data-theme="z">
<small>Copyright &copy; 2011 ASCII MEDIA WORKS. All rights reserved.</small>
</div>
</div>
  • ヘッダーのh1要素はa要素で包み、data-rel="back"を指定すると、前のページへスライドして戻ります
  • href属性の値は動作に影響しませんが、JavaScriptがオフの環境も考慮して「#index」を指定しておきます
  • コンテンツ領域では、商品画像をa要素で包み、data-rel属性「dialog」、data-transition属性「pop」を指定します
  • これで、画像がタップされるとダイログがポップアップして拡大画像が開きます
<div data-role="page" id="img" class="modal" data-theme="z">
  <a href="#detail" data-rel="back"><img src="./images/image01.jpg" alt=""></a>
</div>
  • 画像にdata-rel属性「back」を指定し、タップされたらダイアログを閉じて元のページに戻るように設定しています

以上でHTMLは完成です。


CSSの作成

<div data-role="page" id="index" data-theme="z">
<div data-role="header" data-theme="z">
<h1>HOUSEPLANT STORE</h1>
<h2>I LOVE HOUSEPLANT</h2>
<p>sample text sample text sampletext sample text sample text sample text</p>
</div>
  (中略)
</div>
  • ところが、このページをSafariで開き、開発者メニューからWebインスペクタを起動すると、次のように表示されます


  • 前のHTMLと比べると、class属性をはじめとするさまざまな属性が追加されているのが分かります
  • jQuery Mobileは、カスタムデータ属性などの値に応じてJavaScriptでHTMLの内容を書き換え、実際に表示されるページを生成しています
  • 場合によっては、原型をとどめないほどHTMLが書き換えられることもありますので、CSSはWebインスペクタなどで実際のHTMLを確認しながら記述しましょう
ヘッダーのCSS
  • エンベッド
/*
.ui-header
-------------------*/
.ui-body-z .ui-header{
  background-image:url("./images/header-background.jpg");
  -webkit-background-size:100% 104px;
  background-size:100% 104px;
  position:relative;
  height:104px;
  z-index:1;
}
.ui-body-z .ui-header::before{
  content:url("./images/header-flag.png");
  position:absolute;
  left:5px;
  top:0;
}
.ui-body-z .ui-header::after{
  content:url("./images/header-reef-s.png");
  position:absolute;
  right:0px;
  bottom:15px;
}
.ui-body-z .ui-header h1{
  text-indent:-9999px;
  background-image:url("./images/logo.png");
  width:192px;
  height:15px;
  min-height:15px;
  padding:0;
  margin:23px auto 4px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2){
  .ui-body-z .ui-header h1{
    background-image:url("./images/logo@2.png");
    -webkit-background-size:192px 15px;
    background-size:192px 15px;
  }
}
.ui-body-z .ui-header h2{
  color:#6f5b00;
  font-weight:normal;
  font-size:12px;
  text-align:left;
  margin:0 auto;
  width:192px;
}
.ui-body-z .ui-header p{
  font-size:12px;
  color:#4c8d00;
  margin:0 125px 0 15px;
}
.ui-body-z .ui-content{
  position:relative;
  margin-top:-40px;
  z-index:2;
}
/*
#index .ui-header
-------------------*/
#index.ui-body-z .ui-header{
  background-image:url("./images/header-background-top.jpg");
  background-size:100% 170px;
  height:170px;
}
#index.ui-body-z .ui-header:after{
  content:url("./images/header-reef.png");
  bottom:20px;
}
#index.ui-body-z .ui-header h1{
  margin-bottom:18px;
}
#index.ui-body-z .ui-header h2{
  width:auto;
  margin:0 auto 5px 15px;
}
#index.ui-body-z .ui-content{
  margin-top:-50px;
}

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<meta charset="UTF-8">
<title>jQuery Mobile Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>

	<style>
body{
	background-image:url("./images/background.jpg");
	background-size:100%;
	font-family:sans-serif;
}

/*
 .ui-header
-------------------*/
.ui-body-z .ui-header{
	background-image:url("./images/header-background.jpg");
	-webkit-background-size:100% 104px;
	background-size:100% 104px;
	position:relative;
	height:104px;
	z-index:1;
}

.ui-body-z .ui-header::before{
	content:url("./images/header-flag.png");
	position:absolute;
	left:5px;
	top:0;
}
.ui-body-z .ui-header::after{
	content:url("./images/header-reef-s.png");
	position:absolute;
	right:0px;
	bottom:15px;
}
.ui-body-z .ui-header h1{
	text-indent:-9999px;
	background-image:url("./images/logo.png");
	width:192px;
	height:15px;
	min-height:15px;
	padding:0;
	margin:23px auto 4px;
}
.ui-body-z .ui-header a{
	display:block;
	width:100%;
	height:100%;
}
.ui-body-z .ui-header h2{
	color:#6f5b00;
	font-weight:normal;
	font-size:12px;
	text-align:left;
	margin:0 auto;
	width:192px;
}
.ui-body-z .ui-header p{
	font-size:12px;
	color:#4c8d00;
	margin:0 125px 0 15px;
}
.ui-body-z .ui-content{
	position:relative;
	margin-top:-40px;
	z-index:2;
}
/*
 #index .ui-header
-------------------*/

#index.ui-body-z  .ui-header{
	background-image:url("./images/header-background-top.jpg");
	background-size:100% 170px;
	height:170px;
}
#index.ui-body-z .ui-header:after{
	content:url("./images/header-reef.png");
	bottom:20px;
}
#index.ui-body-z .ui-header h1{
	margin-bottom:18px;
}
#index.ui-body-z .ui-header h2{
	width:auto;
	margin:0 auto 5px 15px;
}
#index.ui-body-z .ui-content{
	margin-top:-50px;
}

/*
 .ui-content
-------------------*/
.ui-body-z .ui-content h2{
	font-size:14px;
	font-weight:bold;
	color:#5b9a12;
}
.ui-body-z .ui-content p{
	font-size:12px;
	color:#665400;
}
.ui-body-z .ui-content p img{
	border:solid 3px #ae9f59;
	margin:5px;
}
/*
 .ui-content .recommend
-------------------*/
.ui-body-z .ui-content .recommend{
	text-align:center;
}
.ui-body-z .ui-content .recommend img{
	border:solid 3px #ae9f59;

}
.ui-body-z .ui-content .recommend a{
	position:relative;
	display:inline-block;
	padding-top:5px;
	text-decoration:none;
}
.ui-body-z .ui-content .recommend a.new:before{
	content:"new";
	display:block;
	font-size:11px;
	color:white;
	background:#a06d24;
	padding:2px 5px;
	position:absolute;
	top:-3px;
	left:10px;
}
.ui-body-z .ui-content .recommend a.new:after{
	content:"";
	display:block;
	width:0;
	border-bottom:3px solid #7e4d06;
	border-left:3px solid #7e4d06;
	border-top:3px solid transparent;
	border-right:3px solid transparent;
	position:absolute;
	top:-1px;
	left:39px;
}
/*
 .ui-content .ui-collapsible-set
-------------------*/

.ui-body-z .ui-collapsible-set{
	margin-top:20px;
}
.ui-body-z .ui-collapsible-contain{
	margin-top:-5px;
}
.ui-body-z .ui-collapsible-contain h3{
	border-radius:8px 8px 0 0;
	margin:0 8px;
	font-weight:normal;
}
.ui-body-z .ui-collapsible-contain:last-of-type h3{
	border-radius:8px;
}
.ui-body-z .ui-collapsible-contain:nth-of-type(1) h3{
	background:#95be66;
	background: -webkit-gradient(linear, left top, left bottom,from(#95be66),to(#649f1f));
}
.ui-body-z .ui-collapsible-contain:nth-of-type(1) h3:not(.ui-collapsible-heading-collapsed){
	border-bottom:4px #95be66 solid;
}
.ui-body-z .ui-collapsible-contain:nth-of-type(2) h3{
	background:#b0ba63;
	background: -webkit-gradient(linear, left top, left bottom,from(#b0ba63),to(#8c9a1b));
}
.ui-body-z .ui-collapsible-contain:nth-of-type(2) h3:not(.ui-collapsible-heading-collapsed){
	border-bottom:4px #b0ba63 solid;
}
.ui-body-z .ui-collapsible-contain:nth-of-type(3) h3{
	background:#bfa65c;
	background: -webkit-gradient(linear, left top, left bottom,from(#bfa65c),to(#a07d10));
}
.ui-body-z .ui-collapsible-contain:nth-of-type(3) h3:not(.ui-collapsible-heading-collapsed){
	border-bottom:4px #bfa65c solid;
}
.ui-body-z .ui-collapsible-contain:nth-of-type(4) h3{
	background:#bf8a5c;
	background: -webkit-gradient(linear, left top, left bottom,from(#bf8a5c),to(#a15411));
}
.ui-body-z .ui-collapsible-contain:nth-of-type(4) h3:not(.ui-collapsible-heading-collapsed){
	border-radius:8px 8px 0 0;
	border-bottom:4px #bf8a5c solid;
}

.ui-body-z .ui-collapsible-contain a{
	font-size:14px;
	color:white;
	text-shadow:1px 0 1px rgba(0,0,0,0.3); 
	text-decoration:none;
	padding:8px 0 10px;
}
.ui-body-z .ui-collapsible-contain:last-of-type a{
	padding-bottom:8px;
}
.ui-body-z .ui-collapsible-contain .ui-btn-inner{
	border:none;
}


.ui-body-z .ui-collapsible-contain .ui-collapsible-content{
	background-color:#edf3e4;
	margin:0 8px;
	padding:8px;
	border-left: 1px solid #ccc49a;
	border-right: 1px solid #ccc49a;
	-webkit-box-shadow: 0 0 10px #c7ad77 inset;
	box-shadow: 0 0 10px #c7ad77 inset;
}
.ui-body-z .ui-collapsible-contain .ui-collapsible-content p{
	margin:5px;
	color:#665400;
	font-size:12px;
}
.ui-body-z .ui-collapsible-contain:last-of-type .ui-collapsible-content{
	border-bottom: 1px solid #ccc49a;
	border-radius: 0 0 8px 8px;
}


.ui-body-z .ui-collapsible-heading a span.ui-btn {
	width:15px;
	height:15px;
}
.ui-body-z .ui-collapsible-contain .ui-icon{
	background:url("./images/icon-check.png") no-repeat 0 5px;
	-webkit-background-size:13px 7px;
	background-size:13px 7px;
	-webkit-box-shadow:none;
	box-shadow:none;
	width:15px;
	height:15px;
}
.ui-body-z .ui-collapsible-contain .ui-btn-hover-d{
	border: 3px solid #e6edc5;
	background:rgba(255,255,255,.5)
}
.ui-body-z .ui-collapsible-contain .ui-btn-up-d {
	border: 3px solid #e6edc5;
	background: #5f9c17;
}
.ui-body-z .ui-collapsible-contain:nth-of-type(2) .ui-btn-up-d {
	background: #849212;
}
.ui-body-z .ui-collapsible-contain:nth-of-type(3) .ui-btn-up-d {
	background: #9a780f;
}
.ui-body-z .ui-collapsible-contain:nth-of-type(4) .ui-btn-up-d {
	background: #a15411;
}
/*
 .footer
-------------------*/
.ui-body-z .ui-footer{
	background-image:url("./images/footer-background.jpg");
	background-size:100% 64px;
	height:64px;
}
.ui-body-z .ui-footer small{
	margin-top:40px;
	font-size:10px;
	color:#504510;
	text-align:center;
	display:block;
}
.ui-body-z .ui-footer small:before{
	content:url("./images/footer-reef.png");
	padding-right:1em;
}
/*
 .modal
-------------------*/
.ui-body-z.modal{
	background-image:url("./images/background.jpg");
}
.ui-body-z.modal a{
	position:absolute;
	left:50%;
	top:50%;
}
.ui-body-z.modal a img{
	margin-top:-50%;
	margin-left:-50%;
	max-width:100%;
	max-height:100%;
}

</style>
</head> 
<body>
<div data-role="page" id="index" data-theme="z">
<div data-role="header" data-theme="z">
<h1>HOUSEPLANT STORE</h1>
<h2>I LOVE HOUSEPLANT</h2>
<p>sample text sample text  sampletext sample text sample text sample text</p>

</div>
<div data-role="content">
<h2>RECOMMEND</h2>
<div class="ui-grid-b recommend">
<div class="ui-block-a"><a href="#detail" class="new"><img src="./images/thumbnail01.jpg" width="82" height="70" alt=""></a></div>
<div class="ui-block-b"><a href="#detail"><img src="./images/thumbnail02.jpg" width="82" height="70" alt=""></a></div>
<div class="ui-block-c"><a href="#detail"><img src="./images/thumbnail03.jpg" width="82" height="70" alt=""></a></div>
</div>

<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="true">
<h3>SITE MENU 1</h3>
<p>sample text sample text  sampletext sample text sample text sample text</p>
<p>sample text sample text  sampletext sample text sample text sample text</p>
</div>
<div data-role="collapsible" data-collapsed="true">

<h3>SITE MENU 2</h3>
<p>sample text sample text  sampletext sample text sample text sample text</p>
<p>sample text sample text  sampletext sample text sample text sample text</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>SITE MENU 3</h3>
<p>sample text sample text  sampletext sample text sample text sample text</p>

<p>sample text sample text  sampletext sample text sample text sample text</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>SITE MENU 4</h3>
<p>sample text sample text  sampletext sample text sample text sample text</p>
<p>sample text sample text  sampletext sample text sample text sample text</p>
</div>

</div>
</div>
<div data-role="footer" data-theme="z">
<small>Copyright &copy; 2011 ASCII MEDIA WORKS. All rights reserved.</small>
</div>
</div>
<div data-role="page" id="detail" data-theme="z">

<div data-role="header" data-theme="z">
<h1><a href="#index" data-rel="back">HOUSEPLANT STORE</a></h1>
<h2>I LOVE HOUSEPLANT</h2>
</div>
<div data-role="content">
<h2>ITEMS</h2>
<p><a href="#img" data-rel="dialog" data-transition="pop"><img src="./images/thumbnail01.jpg" width="82" height="70" alt="" align="left"></a>sample text sample text  sampletext sample text sample text sample text sample text sample text</p>

<p>sample text sample text  sampletext sample text sample text sample text sample text sample text</p>
<p>sample text sample text  sampletext sample text sample text sample text sample text sample text</p>
<p>sample text sample text  sampletext sample text sample text sample text sample text sample text</p>
<p>sample text sample text  sampletext sample text sample text sample text sample text sample text</p>
<p>sample text sample text  sampletext sample text sample text sample text sample text sample text</p>
<p>sample text sample text  sampletext sample text sample text sample text sample text sample text</p>

<p>sample text sample text  sampletext sample text sample text sample text sample text sample text</p>
</div>
<div data-role="footer" data-theme="z">
<small>Copyright &copy; 2011 ASCII MEDIA WORKS. All rights reserved.</small>
</div>
</div>

<div data-role="page" id="img" class="modal" data-theme="z">

<a href="#detail" data-rel="back"><img src="./images/image01.jpg" alt=""></a>
</div>
</body>
</html>