<CSSをカスタマイズ①>
以下のサンプルHTMLを記述。
<!DOCTYPE html>
<html>
<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.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;
}
/*Retina display以外の場合*/
.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;
}
/*Retina displayの場合*/
@media only screen and (-webkit-min-device-pixel-ratio: 2){
.ui-body-z .ui-header h1{
background-image:url("./images/[email protected]"); /*倍の解像度の画像*/
-webkit-background-size:192px 15px; /*通常サイズ*/
background-size:192px 15px; /*通常サイズ*/
}
}
.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
-------------------*/
/* アコーディオンのラベル部分のCSS */
.ui-body-z .ui-collapsible-set{
margin-top:20px;
}
/* アコーディオンパネル2（ラベル） */
.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;
}
/* アコーディオンパネル3（グラデーション） */
.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));
}
/* アコーディオンパネル4（パネルが開いているときのラベルのスタイル） */
.ui-body-z .ui-collapsible-contain:nth-of-type(1) h3:not(.ui-collapsible-heading-collapsed){
border-bottom:4px #95be66 solid;
}
/* アコーディオンパネル3（グラデーション） */
.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));
}
/* アコーディオンパネル4（パネルが開いているときのラベルのスタイル） */
.ui-body-z .ui-collapsible-contain:nth-of-type(2) h3:not(.ui-collapsible-heading-collapsed){
border-bottom:4px #b0ba63 solid;
}
/* アコーディオンパネル3（グラデーション） */
.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));
}
/* アコーディオンパネル4（パネルが開いているときのラベルのスタイル） */
.ui-body-z .ui-collapsible-contain:nth-of-type(3) h3:not(.ui-collapsible-heading-collapsed){
border-bottom:4px #bfa65c solid;
}
/* アコーディオンパネル3（グラデーション） */
.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));
}
/* アコーディオンパネル4（パネルが開いているときのラベルのスタイル） */
.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;
/* アコーディオンパネル5（ボックスの内側に影） */
-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;
}
/* アコーディオンパネル6（ボックスの下部分を角丸） */
.ui-body-z .ui-collapsible-contain:last-of-type .ui-collapsible-content{
border-bottom: 1px solid #ccc49a;
border-radius: 0 0 8px 8px;
}
/* アコーディオンパネル7（アイコン：サイズ） */
.ui-body-z .ui-collapsible-heading a span.ui-btn {
width:15px;
height:15px;
}
/* アコーディオンパネル7（アイコン：アイコンの背景） */
.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;
}
/* アコーディオンパネル7（アイコン：ボーダーの太さや色） */
.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 © 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 © 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>
【meta要素】
viewportには「width=device-width, initial-scale=1」を指定し、横幅を端末の画面幅に、初期の拡大率を100％に設定します。また、jQuery Mobileに必要なjQuery本体とjQuery Mobileのスクリプトファイル、jQuery Mobileのスタイルシートを読み込んでおきます（jQuery Mobileの執筆時のバージョンはベータ3）。
【ヘッダ】
ヘッダーではh1要素でサイト名を、h2要素でキャッチコピーを、p要素でサイトの紹介文をマークアップします。
■記述ソースとブラウザ表示の違い
実際にブラウザを通して見るとclass属性をはじめとするさまざまな属性が追加される。
jQuery Mobileは、カスタムデータ属性などの値に応じて
JavaScriptでHTMLの内容を書き換え、実際に表示されるページを生成しています。場合によっては、原型をとどめないほどHTMLが書き換えられることもありますので、CSSはWebインスペクタなどで実際のHTMLを確認しながら記述しましょう。
※classは、data-theme属性「z」＝「.ui-body-z」に置き換わる
●ヘッダーのCSS
.ui-body-zを起点にする
CSSセレクターは「.ui-body-z .ui-header」といった具合に、冒頭に「.ui-body-z」を付けて記述していきます。
この.ui-body-zは、data-theme属性「z」を指定しているときにページ要素に自動的に付加されるclass属性です。.ui-body-zを起点にすることで、他のテーマ（たとえばdata-theme属性「a」）を適用したいときに、オリジナルテーマである「z」が干渉してデザインが崩れるのを防げます。
例：
.ui-body-z .ui-header{
▼端末の向きによって画面幅が変わるスマートフォンの特性に対応
ヘッダーの背景に「background-size:100% 104px;」を指定
例：
-webkit-background-size:100% 104px; ……【2】
background-size:100% 104px;
※background-sizeプロパティは、背景画像のサイズを設定する[[CSS3]]のプロパティで、2つの値を与えると幅と高さを個別に設定できます
背景画像の幅は要素に対して100%に調整され、高さは104pxで固定
▼before擬似要素／after擬似要素による画像の挿入
iPhoneやAndroidでは、CSS3のセレクターである「::before」（before擬似要素）や「::after」と（after擬似要素）を利用し、要素の前後にcontentプロパティで画像やテキストを追加できます。
例：
.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-headerに「position:relative」を指定しておくと、追加した画像は「position:aboslute」で絶対位置が指定できます。HTMLは触らずに、画面の横幅に左右されない画像を配置できます。
●特定ページに対するCSSの指定
セレクターの前にIDの指定をする。別のページで同じdata-theme属性を使っていても問題なし。
⇒#[該当のID(ページ)].ui-body-z .ui-header｛ 内容 }
●コンテンツ領域のCSS
a要素にclass属性「new」が付いている場合に、「new」というアイコンを表示しているのがポイントです。
このアイコンはbefore擬似要素とafter擬似要素を利用して表現しています。
before擬似要素でアイコンの土台となる矩形のプレートを作成し、after擬似要素で右側の三角形を表現します。
擬似要素を利用して空の要素を追加し、そのborderプロパティで三角形を描いており、画像は使用していません。
▼アコーディオンパネル1
見出しとなっているラベル部分、コンテンツが隠れているパネル部分、ラベルの左側にあるアイコン部分に分けてCSSを設定。
大まかには次の図のような構造になっています。
▼アコーディオンパネル2（ラベル）
アコーディオンパネルのラベル部分は以下の図のような構造になっていて、パネルが閉じているときはラベル同士が少し重なっています
※全体を5px上にずらすことで、下のラベルが上のラベルに重なるように設定
▼アコーディオンパネル3（グラデーション）
グレースフルデグラデーション（関連記事）の考え方に基づき、-webkit-gradientに対応しているデバイスにのみグラデーションを適用し、対応していないブラウザーにはbackgroundで設定した背景色が適用されるように設定。
CSS3のnth-of-type擬似クラスを利用して、行ごとのグラデーションカラーを設定
▼アコーディオンパネル4（パネルが開いているときのラベルのスタイル）
アコーディオンパネルが閉じていると、h3要素にclass属性「ui-collapsible-heading-collapsed」が自動的に追加されます。セレクターで h3:not(.ui-collapsible-heading-collapsed) とすると、パネルが閉じていないとき（つまりパネルが開いているとき）のスタイルを設定できます。サンプルでは、4pxのボーダーをボックスの下に設定しています。
▼アコーディオンパネル5（ボックスの内側に影）
box-shadowプロパティを使ってボックスの内側に影を付けています。box-shadowプロパティの値にinsetを指定すると、ボックスの内側に影を設定でき、ボーダーよりも淡いふちを表現したいときに利用できます。
▼アコーディオンパネル6（ボックスの下部分を角丸）
後のパネルだけ、ボックスの下部分を角丸にしています。
border-radiusプロパティは、値が1つのときはすべての角の半径をまとめて、値が2つの場合は左上・右下と右上・左下の半径、値が3つの場合は左上と右上・左下の半径、値が4つの場合は左上と右上と右下と左下の半径が個別に設定できます。実際にはすべての値をまとめて設定するか、個別に設定することが多い。
▼アコーディオンパネル7（アイコン）
.ui-collapsible-heading a span.ui-btn や .ui-collapsible-contain .ui-iconにはデフォルトのアイコンの設定があります。
デフォルトのスタイルを部分的に上書きして新しいアイコンを設定。
アイコンのサイズを15×15pxに、アイコンの背景をチェックマークの画像に変更。
アイコンの周りの丸は、border-radiusプロパティを使って表現。
※jQuery Mobileのデフォルトでは以下のように設定されていますので、ボーダーの太さや色だけを上書きします。
デフォルト：
.ui-btn-corner-all {
border-radius: 1em 1em 1em 1em;
}
●フッタCSS
背景画像はヘッダーと同じようにbackground-sizeを利用してデバイスの横幅にフィット
●詳細ページのモーダルウィンドウ
詳細ページで画像をタップすると表示されるモーダルウィンドウを設定
例＞
記述：
<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>
ブラウザ：
<div data-role="dialog" id="img" class="modal ui-page ui-body-z ui-dialog ui-page-active" data-theme="z" data-url="img" tabindex="0" role="dialog" style="min-height: 821px; ">
<a href="" class="ui-link" data-transition="pop" data-direction="reverse">
<img src="./images/image01.jpg" alt="">
</a>
</div>
CSS:/*
.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%;
}
a要素に対してposition:absoluteのletf:50%とtop:50%、img要素に対してmargin-top:-50%とmargin-left:-50%を指定することで画像を中央に表示しています。
また、画像がウィンドウからはみ出さないように、max-width:100%とmax-height:100%をそれぞれ指定しています。
▼Retina displayへの対応▼
Retinaディスプレイに対応するには、CSS3のメディアクエリーを利用して、min-device-pixel-ratioが「2」の端末に対してのみCSSを適用します。min-device-pixel-ratioは端末のピクセル密度を表す値で、iPhone 4やAndroid端末の高解像度端末（IS03など）では値が「2」になります。min-device-pixel-ratioはベンダープリフィックスを付ける必要がありますので注意してください。
@media only screen and (-webkit-min-device-pixel-ratio: 2){
/*device-pixel-ratioが2の場合の指定*/
}
例:
@media only screen and (-webkit-min-device-pixel-ratio: 2){
.ui-body-z .ui-header h1{
background-image:url("./images/[email protected]"); /*倍の解像度の画像*/
-webkit-background-size:192px 15px; /*通常サイズ*/
background-size:192px 15px; /*通常サイズ*/
}
}
▼iPhoneで横向きにすると拡大される▼
サンプルサイトをiPhoneで開き、端末をlandscapeモード（横向き）にすると、ページが拡大されて表示されます。
この問題はiPhoneの仕様で、meta要素のviewportを次のように変更すると問題を回避できます。
例：
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<CSSをカスタマイズ②>
リストのテーマカラーをカスタマイズする。
1.HTML上でdeta-theme属性を指定します。
値はデフォルトで定義されている「a」～「e」以外なら何でも構いませんが、今回は「f」を指定
※この段階ではHTMLに対して共通CSSのみが適用されています
例：
<div data-role="page" id="index" data-theme="f">
<div data-role="header" data-theme="f">
<h1>ヘッダー</h1></div>
<div data-role="content">
<ul data-role="listview">
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div>
<div data-role="footer">
<h4>フッター</h4>
</div>
</div>
2.基本カラーテーマを作成
例：
.ui-bar-f {
border: 1px solid #669999;
background: #709f9f;
color: #ffffff;
font-weight: bold;
text-shadow: 0 -1px 1px #669999;
background-image: -webkit-gradient(linear, left top, left bottom, from(#b4cece), to(#709f9f));
background-image: -webkit-linear-gradient(top, #b4cece, #709f9f);
background-image: -moz-linear-gradient(top, #b4cece, #709f9f);
background-image: -ms-linear-gradient(top, #b4cece, #709f9f);
background-image: -o-linear-gradient(top, #b4cece, #709f9f);
background-image: linear-gradient(top, #b4cece, #709f9f);
}
※この状態ではサイト内のいくつかのパーツに、オリジナルカラーがまだ適用されていません（ボタンのテキストなど）
⇒CSSを追加して、残りのパーツにもオリジナルカラーを適用
3.ボタンのCSSを変更
hover時のスタイルを「.ui-btn-hover-f」に、down時のスタイルを「.ui-btn-down-f」に、active時のスタイルを「.ui-btn-active」に指定できます。これらのスタイルはボタンだけでなく、フォームやリストをタップしたときなどにも利用されます。
※注意したいのは、「.ui-btn-active」が、共通CSSで定義されているスタイルだということです。共通CSSを上書きすると、他のテーマを利用するときに影響してしまう可能性があります。他のテーマへの干渉を防ぐために、共通CSSでは冒頭に「.ui-body-f」といった親要素を指定するセレクターを追加し、テーマ「f」の場合にのみ適用されるようにしましょう。
例：
.ui-btn-up-f {
text-decoration: none;
border: 1px solid #669999;
background: #709f9f;
color: #ffffff;
font-weight: bold;
text-shadow: 0 -1px 1px #669999;
background-image: -webkit-gradient(linear, left top, left bottom, from(#b4cece), to(#709f9f));
background-image: -webkit-linear-gradient(top, #b4cece, #709f9f);
background-image: -moz-linear-gradient(top, #b4cece, #709f9f);
background-image: -ms-linear-gradient(top, #b4cece, #709f9f);
background-image: -o-linear-gradient(top, #b4cece, #709f9f);
background-image: linear-gradient(top, #b4cece, #709f9f);
}
.ui-btn-hover-f , .ui-btn-down-f , .ui-body-f .ui-btn-active {
text-decoration: none;
border: 1px solid #669999;
background: #709f9f;
color: #ffffff;
font-weight: bold;
text-shadow: 0 -1px 1px #669999;
background-image: -webkit-gradient(linear, left top, left bottom, from(#709f9f), to(#5B8888));
background-image: -webkit-linear-gradient(top, #709f9f, #5B8888);
background-image: -moz-linear-gradient(top, #709f9f, #5B8888);
background-image: -ms-linear-gradient(top, #709f9f, #5B8888);
background-image: -o-linear-gradient(top, #709f9f, #5B8888);
background-image: linear-gradient(top, #709f9f, #5B8888);
}
最終更新：2012年04月25日 17:41
