スマホサイト作例 「HOUSEPLANT STORE」 CSSカスタマイズ
小さな観葉植物を扱うショップのスマートフォン用サイト。
jquery Mobileをフルカスタマイズしてスマホサイトを作る。
ピンチイン／ピンチアウト
下記のように、横幅を端末の画面幅に、初期の拡大率を100%に設定するとピンチイン／ピンチアウトの操作が可能になる。
<meta name="viewport" content="width=device-width, initial-scale=1">
※ピンチイン、ピンチアウトとは？
アップルでは、iPhone/iPod touchでの2本指でつまむ操作を「ピンチ（pinch）」と呼ぶ。
ピンチイン（pinch-in）は、画面上に表示されている画像を縮小する動作。ピンチクローズ（pinch-close）と呼ばれることもある。
ピンチアウト（pinch-out）は、画面上に表示されている画像を拡大する動作。ピンチオープン（pinch-open）とも呼ばれる。
data-theme属性は「z」を指定する
デフォルトテーマ「a」〜「e」以外の値を指定する。
CSSは、書き換え後のHTMLを確認してから作成する
カンプをもとにHTMLを書いたら、Safariで開き、「開発者メニュー」から「webインスペクタ」を起動する。
最初に書いたHTMLが書き換えられているので、このHTMLをもとにCSSを作成する。
※書き換えられるのはなぜ？
jQuery Mobileは、カスタムデータ属性などの値に応じてJavaScript で HTML の内容を書き換えて実際に表示されるページを生成しているから。
index.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,maximum-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile.structure-1.0.min.css" /> <link rel="stylesheet" href="style.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.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.html" rel="external" class="new"><img src="images/thumbnail01.jpg" width="82" height="70" alt=""></a></div> <div class="ui-block-b"><a href="detail.html" rel="external"><img src="images/thumbnail02.jpg" width="82" height="70" alt=""></a></div> <div class="ui-block-c"><a href="detail.html" rel="external"><img src="images/thumbnail03.jpg" width="82" height="70" alt=""></a></div> </div> <div data-role="collapsible-set"> <div data-role="collapsible"> <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"> <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"> <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"> <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 © 2011.</small> </div> </div> </body> </html>
detail.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.0/jquery.mobile.structure-1.0.min.css" /> <link rel="stylesheet" href="style.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page" id="detail" data-theme="z"> <div data-role="header" data-theme="z"> <h1><a href="sample02.html" rel="external">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 © 2011.</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>
style.css
@charset "UTF-8";
body{
background-image:url("./image/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");
-webkit-background-size:100% 170px;
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{
margin-top:-5px;
}
.ui-body-z .ui-collapsible h3{
border-radius:8px 8px 0 0;
margin:0 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-collapsed){
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-collapsed){
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-collapsed){
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{
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:last-of-type a{
padding-bottom:8px;
}
.ui-body-z .ui-collapsible .ui-btn-inner{
border:none;
}
.ui-body-z .ui-collapsible .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 .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-body-z .ui-collapsible .ui-icon {
border: 3px solid #e6edc5;
background: #5f9c17 url("./images/icon-check.png") no-repeat 1px 5px;
width:15px;
height:15px;
border-radius:15px;
}
.ui-body-z .ui-collapsible:nth-of-type(2) .ui-icon {
background-color: #849212;
}
.ui-body-z .ui-collapsible:nth-of-type(3) .ui-icon {
background-color: #9a780f;
}
.ui-body-z .ui-collapsible:nth-of-type(4) .ui-icon {
background-color: #a15411;
}
.ui-body-z .ui-collapsible .ui-btn-hover-z .ui-icon{
background-color:rgba(255,255,255,.1)
}
/*
.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{
display:block;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
text-align: center;
}
.ui-body-z.modal a img{
margin-top:50%;
max-width:100%;
max-height:100%;
}
