ウェブ学のすすめ

Study of Web Design & Programing

jQueryMobileのCSSをフルカスタマイズする

jQueryMobile CSS

jQueryMobileの解説記事「ASCII.jp：西畑一馬のjQuery Mobileデザイン入門」を参考にjQueryMobileのCSSをフルカスタマイズしてみました。

記事内で作られたサンプルサイトと読み込むjQuery、jQueryMobileのバージョンを変更しています。

バージョンが異なると吐き出されるHTML内のclass名が何箇所か変更されていました。（とくにアコーディオンメニュー部分）。

＜記事＞

＜今回挑戦したバージョン＞

ASCII.jp：西畑一馬のjQuery Mobileデザイン入門

プレビュー


↓別ウィンドウを開いて見る
jQuery Mobile Sample


↓QRコード

※おすすめQRコード読み取りアプリ

お父さんQR
カテゴリ: ユーティリティ
サイズ: 2.3 MB
価格： 無料


ポイント

data-theme
  • デフォルトテーマを適用させないようにa〜e以外のものを指定する。
    例）data-theme="z"
吐き出されるHTMLのclass名を確認するには
  • IE、Chrome、FireFox、Safariなどブラウザーの開発ツールを利用する（F12）
気になったCSSプロパティ
  • background-size：背景画像のサイズを指定する
  • content：要素の前後に内容（文字列や画像等）を追加する
気になったCSSセレクタ
  • :before疑似要素：指定した要素の直前に指定した内容を挿入する
  • :after擬似要素：指定した要素の直後に指定した内容を挿入する
  • :nth-of-type擬似クラス：ある要素の同じ子要素を最初から数えて、n番目に当たる要素にスタイルを適用する
  • :last-of-type擬似クラス：ある要素の同じ子要素の最後の要素にスタイルを適用する

コード

HTML
<!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">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</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" data-transition="slide"><img src="http://jsrun.it/assets/i/d/5/p/id5p4.jpg" width="82" height="70" alt=""></a></div>
<div class="ui-block-b"><a href="#detail" data-transition="slide"><img src="http://jsrun.it/assets/5/C/j/5/5Cj5T.jpg" width="82" height="70" alt=""></a></div>
<div class="ui-block-c"><a href="#detail" data-transition="slide"><img src="http://jsrun.it/assets/c/a/R/V/caRV2.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-transition="slide" data-direction="reverse">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="http://jsrun.it/assets/i/d/5/p/id5p4.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="http://jsrun.it/assets/b/f/D/M/bfDMF.jpg" alt=""></a>
</div>
</body>
</html>
CSS
body{
	background-image:url("http://jsrun.it/assets/4/p/o/h/4pohs.jpg");
	background-size:100%;
	font-family:sans-serif;
}

/* .ui-header */
.ui-body-z .ui-header{
  　　　background-image:url("http://jsrun.it/assets/i/1/F/o/i1Fo9.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("http://jsrun.it/assets/K/Y/B/0/KYB0O.png");
  　　　position:absolute;
  　　　left:5px;
  　　　top:0;
}
.ui-body-z .ui-header::after{
  　　　content:url("http://jsrun.it/assets/a/B/H/w/aBHwY.png");
  　　　position:absolute;
  　　　right:0px;
  　　　bottom:15px;
}

.ui-body-z .ui-header h1{
    　　text-indent:-9999px;
    　　background-image:url("http://jsrun.it/assets/a/v/4/S/av4SH.png");
   　　 background-repeat:no-repeat;
   　　 background-position:0 23px;
    　　width:192px;
    　　height:15px;
    　　min-height:15px;
    　　padding:23px 0 0;
    　　margin:0 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("http://jsrun.it/assets/f/m/P/J/fmPJd.jpg");
	background-size:100% 170px;
	height:170px;
}
#index.ui-body-z .ui-header:after{
	content:url("http://jsrun.it/assets/q/J/I/2/qJI2M.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-collapsible-set */
.ui-body-z .ui-collapsible-set{
	margin-top:25px;
}

/* .ui-collapsible */
.ui-body-z .ui-collapsible h3{
	border-radius:8px 8px 0 0;
	margin:-10px 8px;
	font-weight:normal;
}
.ui-body-z .ui-collapsible:last-of-type h3{
	border-radius:8px;
}
.ui-body-z .ui-collapsible:nth-of-type(1) h3{
	background:#95be66;
	background: -webkit-gradient(linear, left top, left bottom,from(#95be66),to(#649f1f));
}
.ui-body-z .ui-collapsible:nth-of-type(1) h3:not(.ui-collapsible-heading-toggle){
	border-bottom:4px #95be66 solid;
}
.ui-body-z .ui-collapsible:nth-of-type(2) h3{
	background:#b0ba63;
	background: -webkit-gradient(linear, left top, left bottom,from(#b0ba63),to(#8c9a1b));
}
.ui-body-z .ui-collapsible:nth-of-type(2) h3:not(.ui-collapsible-heading-toggle){
	border-bottom:4px #b0ba63 solid;
}
.ui-body-z .ui-collapsible:nth-of-type(3) h3{
	background:#bfa65c;
	background: -webkit-gradient(linear, left top, left bottom,from(#bfa65c),to(#a07d10));
}
.ui-body-z .ui-collapsible:nth-of-type(3) h3:not(.ui-collapsible-heading-toggle){
	border-bottom:4px #bfa65c solid;
}
.ui-body-z .ui-collapsible:nth-of-type(4) h3{
	background:#bf8a5c;
	background: -webkit-gradient(linear, left top, left bottom,from(#bf8a5c),to(#a15411));
}
.ui-body-z .ui-collapsible: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 a{
	color:white;
	text-shadow:1px 0 1px rgba(0,0,0,0.3); 
	text-decoration:none;
	padding:8px 0 8px 0;
}
.ui-body-z .ui-collapsible:last-of-type a{
	padding-bottom:8px;
}
.ui-body-z .ui-btn-inner{
    　　font-size:14px;
	border:none;
    　　margin:0 0 5px -2px;
}


/* .ui-collapsible-content */
.ui-body-z .ui-collapsible-content {
	background-color:#edf3e4;
	margin:0 8px ;
	padding:15px;
	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-content p{
	margin:5px;
	color:#665400;
	font-size:12px;
}
.ui-body-z .ui-collapsible:last-of-type .ui-collapsible-content{ 
	border-bottom: 1px solid #ccc49a;
	border-radius: 0 0 8px 8px;
}

/* .ui-icon */
.ui-body-z .ui-icon {
    　　width:15px;
	height:15px;
    　　position: absolute;
    　　top: 50%;
    　　margin: -9px 0 0 -2px;
    　　-webkit-background-size:13px 7px;
	background-size:13px 7px;
	-webkit-box-shadow:none;
	box-shadow:none;
}
.ui-body-z .ui-btn-hover-z .ui-icon{
	border: 3px solid #e6edc5;
	background:rgba(255,255,255,.5) url("http://jsrun.it/assets/a/J/n/a/aJnaK.png") no-repeat 1px 5px;
}
.ui-body-z .ui-btn-up-z .ui-icon{
    　　background: #5f9c17 url("http://jsrun.it/assets/a/J/n/a/aJnaK.png") no-repeat 1px 5px;
    　　border: 3px solid #e6edc5;
}
.ui-body-z .ui-collapsible:nth-of-type(2) .ui-btn-up-z .ui-icon{
    　　background: #849212 url("http://jsrun.it/assets/a/J/n/a/aJnaK.png") no-repeat 1px 5px;
}
.ui-body-z .ui-collapsible:nth-of-type(3) .ui-btn-up-z .ui-icon{
	background: #9a780f url("http://jsrun.it/assets/a/J/n/a/aJnaK.png") no-repeat 1px 5px; 
}
.ui-body-z .ui-collapsible:nth-of-type(4) .ui-btn-up-z .ui-icon{
	background: #a15411 url("http://jsrun.it/assets/a/J/n/a/aJnaK.png") no-repeat 1px 5px;
}
.ui-body-z .ui-icon-shadow {
   　　 -moz-border-radius: 1em;
   　　 -webkit-border-radius: 1em;
    　　border-radius: 1em;
}

/* .footer */
.ui-body-z .ui-footer{
	background-image:url("http://jsrun.it/assets/j/n/p/r/jnprm.jpg");
	background-size:100% 64px;
	height:64px;
}
.ui-body-z .ui-footer small{
    padding:40px 0 0;
	font-size:10px;
	color:#504510;
	text-align:center;
	display:block;
}
.ui-body-z .ui-footer small:before{
	content:url("http://jsrun.it/assets/5/O/Y/X/5OYXP.png");
	padding-right:1em;
}

/* .modal */
.ui-overlay-a{
	background-image:url("http://jsrun.it/assets/4/p/o/h/4pohs.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%;
}