hear_br0wn @ ウィキ
http://w.atwiki.jp/hear_br0wn/
hear_br0wn @ ウィキ
ja
2012-04-25T18:36:01+09:00
1335346561
-
jQuery
https://w.atwiki.jp/hear_br0wn/pages/76.html
[[jQuery Mobile1(基礎)>http://www38.atwiki.jp/hear_br0wn/pages/77.html]]
[[jQuery Mobile2(タグとか1)>http://www38.atwiki.jp/hear_br0wn/pages/78.html]]
[[jQuery Mobile3(タグとか2)>http://www38.atwiki.jp/hear_br0wn/pages/80.html]]
[[jQuery Mobile4(CSSの技てきなさむしんぐ1)>http://www38.atwiki.jp/hear_br0wn/pages/79.html]]
[[jQuery Mobile5(CSSの技てきなさむしんぐ2)>http://www38.atwiki.jp/hear_br0wn/pages/81.html]]
参考
[[jQuery Mobileを使ってみよう！ (1/5)>http://libro.tuyano.com/index3?id=619005&page=1]]
[[西畑一馬のjQuery Mobileデザイン入門>http://ascii.jp/elem/000/000/607/607366/]]
[[jQuery Mobile を学ぶ過程で作った日本語リファレンス>http://dev.screw-axis.com/doc/jquery_mobile/]]
[[IEのバージョン別にスクリプトを変える方法>http://coliss.com/articles/build-websites/operation/css/css-specific-for-ie-by-webdesignerwall.html]]
2012-04-25T18:36:01+09:00
1335346561
-
jQuery Mobile5(CSSの技てきなさむしんぐ2)
https://w.atwiki.jp/hear_br0wn/pages/81.html
*<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/logo@2.png"); /*倍の解像度の画像*/
-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>
#ref(CSS サイト概要.jpg)
***【meta要素】
viewportには「width=device-width, initial-scale=1」を指定し、横幅を端末の画面幅に、初期の拡大率を100％に設定します。また、jQuery Mobileに必要なjQuery本体とjQuery Mobileのスクリプトファイル、jQuery Mobileのスタイルシートを読み込んでおきます（jQuery Mobileの執筆時のバージョンはベータ3）。
***【ヘッダ】
ヘッダーではh1要素でサイト名を、h2要素でキャッチコピーを、p要素でサイトの紹介文をマークアップします。
#ref(CSS 【ヘッダ】.jpg)
***■記述ソースとブラウザ表示の違い
実際にブラウザを通して見ると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は触らずに、画面の横幅に左右されない画像を配置できます。
#ref(CSS 端末の向きによって画面幅が変わるスマートフォンの特性に対応.jpg)
*●特定ページに対するCSSの指定
セレクターの前にIDの指定をする。別のページで同じdata-theme属性を使っていても問題なし。
⇒#[該当のID(ページ)].ui-body-z .ui-header｛ 内容 }
*●コンテンツ領域のCSS
a要素にclass属性「new」が付いている場合に、「new」というアイコンを表示しているのがポイントです。
このアイコンはbefore擬似要素とafter擬似要素を利用して表現しています。
before擬似要素でアイコンの土台となる矩形のプレートを作成し、after擬似要素で右側の三角形を表現します。
擬似要素を利用して空の要素を追加し、そのborderプロパティで三角形を描いており、画像は使用していません。
#ref(CSS コンテンツ領域のCSS.jpg)
***▼アコーディオンパネル1
見出しとなっているラベル部分、コンテンツが隠れているパネル部分、ラベルの左側にあるアイコン部分に分けてCSSを設定。
大まかには次の図のような構造になっています。
#ref(CSS アコーディオン.jpg)
***▼アコーディオンパネル2（ラベル）
アコーディオンパネルのラベル部分は以下の図のような構造になっていて、パネルが閉じているときはラベル同士が少し重なっています
※全体を5px上にずらすことで、下のラベルが上のラベルに重なるように設定
#ref(CSSアコーディオンパネル2（ラベル）.jpg)
***▼アコーディオンパネル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を指定すると、ボックスの内側に影を設定でき、ボーダーよりも淡いふちを表現したいときに利用できます。
#ref(CSS アコーディオンパネル5（ボックスの内側に影）.jpg)
***▼アコーディオンパネル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;
}
#ref(CSSアコーディオンパネル7（アイコン）.jpg)
*●フッタCSS
背景画像はヘッダーと同じようにbackground-sizeを利用してデバイスの横幅にフィット
#ref(CSS フッタCSS.jpg)
*●詳細ページのモーダルウィンドウ
詳細ページで画像をタップすると表示されるモーダルウィンドウを設定
例＞
記述：
<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/logo@2.png"); /*倍の解像度の画像*/
-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">
#ref(CSS iPhoneで横向きにすると拡大される1.jpg)
#ref(CSS iPhoneで横向きにすると拡大される2.jpg)
*<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-25T17:41:14+09:00
1335343274
-
jQuery Mobile4(CSSの技てきなさむしんぐ1)
https://w.atwiki.jp/hear_br0wn/pages/79.html
#ref(リスト ul.jpg)
*●グラデーション
・iPhoneやAndroidのデフォルトブラウザーに対しては-webkit-gradientを利用
・Firefoxに対しては-moz-linear-gradientを利用
・IE8以上のIEに対しては-ms-filterを利用
.ui-body-b {
background: #cccccc; 【グラデーションに対応していないブラウザー】
background-image: -moz-linear-gradient(top, #e6e6e6, #cccccc); 【Firefox】
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #cccccc)); 【iPhoneやAndroid】
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#e6e6e6', EndColorStr='#cccccc')"; 【IE8以上】
}
※[[jQuery]] Mobileでは、「グレースフル・デグラデーション(graceful degradation)」という考え方を採用しています。
グレースフル・デグラデーションとは、ある水準を満たすブラウザーに対しては表現したい機能やデザインを提供し、水準未満のブラウザーに対してはそつのないデザインを提供する考え方です。
●見出しの調整（文字のサイズ変更）
data-role="content"内のh1～h6要素の文字サイズはデフォルトでは大きすぎるので、少し小さめに変更
※基本見出しは<h2>要素を使うものとする。
***＞html
<h2 class="h1">to-Rについて</h2>
***＞css
.ui-content .h1{
color:#5E87B0;
font-size:17px;
text-shadow:1px 0 0 #FFF;
}
※ui-contentは、カスタムデータ属性「data-role="content"」が付いた要素に対してjQuery Mobileが自動的に付加するclass属性
*<classのつけ方について>
見出しの調整（文字のサイズ変更）をする場合、
h2要素に対して「h1」という名前のclass属性を付けています。
要素名と同じclass名を付けることに対して、「気持ちが悪い」と感じた方もいるでしょう。
一般的に見出し要素は、h1～h5の見出しレベルに沿ってスタイルを定義します。h1要素が一番大きく、h5要素が一番小さくなる、といった具合です。ところが、jQuery Mobileのようなフレームワークでは、フレームワークが定めるルールに沿ってマークアップする必要があるため、HTMLドキュメント内の見出し要素と、見た目上の見出しレベルを一致できない場合があります。
そこで、サンプル3では、見た目としての見出しレベルをclass属性で定義し、CSSで記述したスタイルを適用しています。
この方法は、米ヤフーのNicole Sullivan（@stubbornella）が提唱する「OOCSS（オブジェクト指向CSS）」で採用されているCSS設計の考え方に沿ったものです。
*●テキスト省略機能の無効化
リストなどの文字は一定以上だと「...」と省略される。
これは、jQuery Mobileの仕様で、[[CSS3]]の「text-overflow:ellipsis」を使って特定の要素の内側の幅を超える文字列を「...」と省略してしまう。
***▼折り返して表示するように変更
1.wordbreak」というクラスを作成し、text-overflowを初期化するスタイルを定義
例:
.wordbreak{
overflow: visible;
white-space: normal;
}
※「oveflow: visible」で文字列を省略をしないように、「white-space: normal」で改行するように設定
2.CSSで定義したclass属性「wordbreak」をテキストが省略されている要素に対して追加
*●iframeは使わずに、Google Maps APIを使って地図を読み込む
※Googleマップから取得したタグを貼り付けても、一部のスマートフォンでは地図が表示されないため。
Google Maps API：
https://developers.google.com/maps/documentation/javascript/?hl=ja
***1.Google Maps APIのスクリプトをhead要素内で読み込みます
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
***2.コンテンツ要素内にid属性「map」、class属性「ui-shadow」を付けたdiv要素を配置
※class属性「ui-shadow」は、要素に対してドロップシャドウを付けるスタイルで、jQuery Mobileであらかじめ定義されています。
例：
<div data-role="content">
<h2 class="h1">アクセス</h2>
<div id="map" class="ui-shadow"></div>
</div>
***3.CSSでdiv#mapに対して、width、height、borderを設定します。コンテンツ幅が100%を超えて描画されないように、CSS3のbox-sizing:border-boxを利用し、borderをwidthに含めるようにも設定
例：
div#map{
width:100%;
height:400px;
border:4px solid white;
-webkit-box-sizing: border-box;
box-sizing:border-box;
}
***4.JavaScriptの設定、Google Maps APIで公開されているサンプルコードをもとに、地図を表示する簡単なスクリプトを書く
例：
<script>
$(function(){
var myLatlng = new google.maps.LatLng(緯度,経度);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
});
});
</script>
※経度と緯度のところには、目的地の緯度・経度を記述してください。緯度・経度は「経度緯度検索」（http://www.webcreativepark.net/labs/longitude_iatitude/）などのサービスで調べられます
***5.スクリプトの不具合の修正
※jQuery Mobileでは[[JavaScript]]を使ってページを擬似的に生成しているので、先ほどのスクリプトが実行された時点では、地図を表示する要素がまだ表示されていません。表示されていない要素に地図を表示しようとすると、座標が狂ったり、灰色の地図が描画されたりしてしまう不具合があるので、次のようなスクリプトで調整します。
例:
<script>
$(function(){
....中略...
$('div#access').live('pageshow',function(){
google.maps.event.trigger(map, 'resize'); 【1】
map.setCenter(myLatlng); 【2】
});
});
</script>
⇒$(ページ要素).live('pageshow',function(){...}); 内に記述した処理は、jQuery Moblieによってページが生成されたときに実行されます。サンプル17では、【1】で地図の再描画を、【2】で地図の中央位置を再設定するGoogle Maps APIの命令を実行し、アクセスページに遷移したタイミングで地図を調整しています。
2012-04-25T17:40:30+09:00
1335343230
-
jQuery Mobile2(タグとか2)
https://w.atwiki.jp/hear_br0wn/pages/80.html
*●グリッドレイアウト
スマートフォンはPCに比べて画面幅が狭いので、1ページを複数カラムに分割するレイアウトはスマートフォンサイトに向きません。
しかし、タブナビゲーションを実装する場合など、複数カラムに分割したい場合もあります。
[[jQuery]] Mobileでは要素を均等に分割して並べる「グリッドレイアウト」の機能が用意されています。
***▼2カラム①
class属性「ui-grid-a」を付けた要素の内側に、class属性「ui-block-a」とclass属性「ui-block-b」を付けた要素をそれぞれ配置します
例：
<div class="ui-grid-a">
<div class="ui-block-a">
<strong>I'm Block A</strong>
</div>
<div class="ui-block-b">
<strong>I'm Block B</strong>
</div>
</div>
#ref(2カラム.jpg)
***▼2カラム②（デザインの変更）
デフォルトだと少し分かりにくいので、それぞれのカラムの内側の要素にclass属性「ui-bar」と「ui-bar-e」を付与し、背景や余白が設定された「ui-bar」というスタイルで表示。
例：
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e">
<strong>I'm Block A</strong>
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-e">
<strong>I'm Block B</strong>
</div>
</div>
</div>
#ref(2カラム②（デザインの変更）.jpg)
***▼3カラム
class属性「ui-grid-b」を親要素に適用
例：
<div class="ui-grid-b">
<div class="ui-block-a">
<div class=" ui-bar ui-bar-e">
Block A
</div>
</div>
<div class="ui-block-b">
<div class=" ui-bar ui-bar-e">
Block B
</div>
</div>
<div class="ui-block-c">
<div class=" ui-bar ui-bar-e">
Block C
</div>
</div>
</div>
#ref(3カラム.jpg)
***▼4カラム
class属性「ui-grid-c」を親要素に適用
<div class="ui-grid-c">
<div class="ui-block-a">
<div class=" ui-bar ui-bar-e">A</div>
</div>
<div class="ui-block-b">
<div class=" ui-bar ui-bar-e">B</div>
</div>
<div class="ui-block-c">
<div class=" ui-bar ui-bar-e">C</div>
</div>
<div class="ui-block-d">
<div class=" ui-bar ui-bar-e">D</div>
</div>
</div>
#ref(4カラム.jpg)
***▼5カラム
class属性「ui-grid-d」を親要素に適用
<div class="ui-grid-d">
<div class="ui-block-a">
<div class=" ui-bar ui-bar-e">A</div>
</div>
<div class="ui-block-b">
<div class=" ui-bar ui-bar-e">B</div>
</div>
<div class="ui-block-c">
<div class=" ui-bar ui-bar-e">C</div>
</div>
<div class="ui-block-d">
<div class=" ui-bar ui-bar-e">D</div>
</div>
<div class="ui-block-e">
<div class=" ui-bar ui-bar-e">E</div>
</div>
</div>
#ref(5カラム.jpg)
*●開閉パネル1
要素にdata-role属性「collapsible」を指定すると、開閉パネルを作成できます。
開閉パネルではh1～h6要素で見出しを設定し、その後ろの要素でパネルの内容を記述します。
例:
<div data-role="collapsible">
<h3>開閉パネル</h3>
<p>クリックするとパネルが開きます。</p>
</div>
#ref(開閉パネル1.jpg)
***▼開閉パネル2（パネルを閉じて表示）
デフォルトではパネルが開いた状態で表示されますが、 data-collapsed属性「true」を指定するとパネルを閉じて表示します
例：
<div data-role="collapsible" data-collapsed="true">
<h3>開閉パネル</h3>
<p>クリックするとパネルが開きます。</p>
</div>
#ref(開閉パネル2（パネルを閉じて表示）.jpg)
***▼開閉パネル3（アコーディオンパネル）
複数の開閉パネルをdata-role属性「collapsible-set」を指定した要素で包むと、アコーディオンパネルを作成できます。
例:
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>パネル1</h3>
<p>パネル1が開きます。</p>
</div>
<div data-role="collapsible">
<h3>パネル2</h3>
<p>パネル2が開きます。</p>
</div>
<div data-role="collapsible">
<h3>パネル3</h3>
<p>パネル3が開きます。</p>
</div>
</div>
#ref(開閉パネル3（アコーディオンパネル）.jpg)
※デフォルトでは最後のパネルが開いた状態で表示されますが、任意のパネル要素にdata-collapsed属性「false」を付与するとそのパネルは開いて、そのほかのパネルは閉じて表示されます。
ただし、執筆時のバージョン（ベータ2）では正常に動作しておらず、閉じたいパネルすべてにdata-collapsed属性「true」を指定する必要があります。
*●フォームUI
jQuery MobileのフォームUIは、data-role属性「fieldcontain」を指定した要素に包んで記述します。
***▼テキスト入力ボックス
type属性「text」のinput要素を記述すると
例：
<div data-role="fieldcontain">
<label for="name">名前</label>
<input type="text" id="name"> </div>
#ref(テキスト入力ボックス.jpg)
***▼検索ボックス
HTML5で追加されたtype属性<input type="search">を使うと、虫眼鏡アイコンが付いた検索用の入力フィールドが表示されます。
例：
<div data-role="fieldcontain">
<label for="search">検索</label>
<input type="search" name="search" id="search" value="" />
</div>
#ref(検索ボックス.jpg)
***▼複数行入力ボックス（テキストエリア）
例:
<div data-role="fieldcontain">
<label for="contact">お問い合わせ内容</label>
<textarea id="contact"></textarea>
</div>
#ref(複数行入力ボックス（テキストエリア）.jpg)
***▼スライダー
HTML5で追加された<input type="range">でスライダーUIを利用できます。value属性にスライダーの初期値、min属性にスライダーの最小値、max属性にスライダーの最大値を指定します。
例：
<div data-role="fieldcontain">
<label for="year">生まれた年</label>
<input type="range" name="year" id="year" value="1980" min="1900" max="2011" />
</div>
#ref(スライダー.jpg)
***▼フリップスイッチ
「フリップスイッチ」とは、2つの選択肢からどちらか1つをタッチ操作で選択できるUIのことです。フリップスイッチは、select要素にdata-role属性「slider」を指定すると利用でき、select要素の内側に2つのoption要素を書いて項目を指定します。
例：
<div data-role="fieldcontain">
<label for="gender">性別</label>
<select name="gender" id="gender" data-role="slider">
<option value="男性">男性</option>
<option value="女性">女性</option>
</select>
</div>
#ref(フリップスイッチ.png)
***▼ラジオボタン1
type属性に「check」を指定したinput要素をそれぞれlabel要素で関連付けし、data-role属性「controlgroup」を指定したfiledset要素で包みます。filedset要素の冒頭にはlegend要素で項目名を指定します
例：
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>購入回数</legend>
<input type="radio" name="number" id="n1" value="1回" checked="checked" />
<label for="n1">1回</label>
<input type="radio" name="number" id="n2" value="2回" />
<label for="n2">2回</label>
<input type="radio" name="number" id="n3" value="3回" />
<label for="n3">3回</label>
<input type="radio" name="number" id="n4" value="4回" />
<label for="n4">4回以上</label>
</fieldset>
</div>
#ref(ラジオボタン1.jpg)
***▼ラジオボタン2
ラジオボタンはデフォルトでは縦に表示されますが、fieldset要素にdata-type属性「horizontal」を指定すると、横（水平方向）に並んだボタンにもできます。
例：
<fieldset data-role="controlgroup" data-type="horizontal">
※ボタンが1行に収まらない場合は、次のようにCSSで余白を調整する
例：
.ui-controlgroup .ui-radio .ui-btn-inner{
/*ボタンの左右の余白を25pxから15pxに変更している*/
padding: .6em 15px;
}
#ref(ラジオボタン2.jpg)
***▼チェックボックス
type属性に「check」を指定したinput要素をそれぞれlabel要素で関連付けし、data-role属性「controlgroup」を指定したfiledset要素で包みます。filedset要素の冒頭にはlegend要素で項目名を指定
例：
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>お問い合わせ種別</legend>
<input type="checkbox" name="type1" id="type1" value="HP新規作成">
<label for="type1">HP新規作成</label>
<input type="checkbox" name="type2" id="type2" value="HPリニューアル">
<label for="type2">HPリニューアル</label>
<input type="checkbox" name="type3" id="type3" value="システム開発">
<label for="type3">システム開発</label>
<input type="checkbox" name="type4" id="type4" value="コンサルティング">
<label for="type4">コンサルティング</label>
</fieldset>
</div>
#ref(チェックボックス.jpg)
▼セレクトメニュー
例：
<div data-role="fieldcontain">
<label for="number">購入回数</label>
<select name="number" id="number">
<option value="">選択してください</option>
<option value="n1">1回</option>
<option value="n2">2回</option>
<option value="n3">3回</option>
<option value="n4">4回以上</option>
</select>
</div>
#ref(セレクトメニュー.jpg)
▼カスタムセレクトメニュー1
select要素にdata-native-menu属性「false」を指定
例：
<div data-role="fieldcontain">
<label for="number">購入回数</label>
<select name="number" id="number" data-native-menu="false">
<option value="">選択してください</option>
<option value="n1">1回</option>
<option value="n2">2回</option>
<option value="n3">3回</option>
<option value="n4">4回以上</option>
</select>
</div>
#ref(カスタムセレクトメニュー1.jpg)
***▼カスタムセレクトメニュー2
カスタムセレクトメニューでは、option要素のvalue属性の値が空／option要素の中にテキストがない／data-pleceholder属性に「true」が指定されている、のいずれのかの場合、その項目が見出しとして機能します。サンプル21では、最初のoption要素である「<option value="">選択してください</option>」が見出しとなり、項目としては選択できません。
例：
<div data-role="fieldcontain">
<label for="type">お問い合わせ種別</label>
<select name="type" id="type" multiple="multiple" data-native-menu="false">
<option value="">選択してください</option>
<option value="HP新規作成">HP新規作成</option>
<option value="HPリニューアル">HPリニューアル</option>
<option value="システム開発">システム開発</option>
<option value="コンサルティング">コンサルティング</option>
</select>
</div>
#ref(カスタムセレクトメニュー2.jpg)
***▼ネイティブフォームの利用
data-role属性「none」を指定すると、ブラウザーのデフォルトのUIで表示されます
例：
<div data-role="fieldcontain">
<label for="name">名前</label>
<input type="text" id="name" data-role="none">
</div>
#ref(ネイティブフォームの利用.jpg)
***▼ボタンの装飾1
data-theme属性でテーマを反映できます
例：
<input type="button" value="キャンセル" data-theme="b">
<input type="submit" value="送信" data-theme="b">
#ref(ボタンの装飾1.jpg)
***▼ボタンの装飾2（文字サイズにフィットしたボタン）
data-inline属性「true」を指定
例：
<input type="button" value="キャンセル" data-inline="true">
<input type="submit" value="送信" data-inline="true">
#ref(ボタンの装飾2（文字サイズにフィットしたボタン）.jpg)
***▼ボタンの装飾3（アイコン）
data-icon属性でアイコンも付けられます
例：
<input type="button" value="キャンセル" data-icon="delete">
<input type="submit" value="送信" data-icon="arrow-r">
#ref(ボタンの装飾3（アイコン）.jpg)
***※アイコンの種類
|左向き矢印 |data-icon="arrow-l"|
| 右向き矢印| data-icon="arrow-r"|
| 上向き矢印| data-icon="arrow-u"|
| 下向き矢印| data-icon="arrow-d"|
| ×(バツ)| data-icon="delete"|
| ＋（プラス）| data-icon="plus"|
| -（マイナス）| data-icon="minus"|
| チェック| data-icon="check"|
| 歯車| data-icon="gear"|
| リフレッシュ| data-icon="refresh"|
| 進む| data-icon="forward"|
| 戻る| data-icon="back"|
| テーブル状| data-icon="grid"|
| 星| data-icon="star"|
| i(情報)| data-icon="info"|
| 家| data-icon="home"|
| 虫眼鏡| data-icon="search"|
#ref(アイコンの種類.jpg)
***▼ボタンの装飾4（アイコンの表示位置）
アイコンの表示位置はdata-iconpos属性で変更できます。値には、right（右）、left（左）、top（上）、bottom（下）を指定します。
例：
<button data-icon="star" data-iconpos="top"> data-iconpos="top"</button>
<button data-icon="star" data-iconpos="bottom"> data-iconpos="bottom"</button>
<button data-icon="star" data-iconpos="left"> data-iconpos="left"</button>
<button data-icon="star" data-iconpos="right"> data-iconpos="right"</button>
#ref(ボタンの装飾4（アイコンの表示位置）.jpg)
*●文字の省略について
jQueryMobileの仕様で、[[CSS3]]の「text-overflow:ellipsis」を使って特定の要素の内側の幅を超える文字列を「...」と省略してしまう。
文字列を省略せず、折り返して表示するように変更するには、text-overflowを初期化するスタイルを定義。
例：
wordbreakクラスを作り、text-overflow設定 ⇒ テキストが省略されている要素に対して追加
.wordbreak{
overflow: visible;
white-space: normal;
}
***【表示の種類】
「overflow: visible;」 ：文字列を省略をしない
「white-space: normal;」 ：改行する
#ref(ボタンの装飾4（アイコンの表示位置）.jpg)
***********************予備**************************************
●フォーム
※スマートフォンのブラウザーに標準で用意されているフォーム部品はどれもサイズが小さく、そのままでは指による操作に適さないため、スマートフォンサイトの制作ではフォームをスマートフォンに最適化する。
フォーム部品は、data-role属性に「fieldcontain」を指定した要素で各パーツ（input要素やtextarea要素など）を包んで記述
例：
<div data-role="fieldcontain">
<label for="name">名前</label>
<input type="text" id="name">
</div>
【注意点】
同一サイト内でのid名の重複に注意！
jQuery Mobileのフォームを利用するときに注意したいのが、label要素とフォーム部品とを関連付けるid名の扱いです。
id名はもともと1つの文書内で1つの要素にしか付けられませんが、jQuery Mobileはページ管理にid属性を利用しているので、別のページであってもid名が重複していると誤動作を起こす可能性があります。jQuery Mobileでは同一サイト内で同じid名を使うことは推奨されていませんので、サイト全体でid名が重複しないように注意しましょう。
修正＞
▼テキストボックス（text）
例：
<div data-role="fieldcontain">
<label for="name">名前</label>
<input type="text" id="name">
</div>
↓
ページの見出し（h2要素）とフォームの間には不自然な余白があり、入力フォームの背景色がやや暗い、head要素内に次のようなCSSを追加してデザインを変更
例：
＞HTML
<div data-role="fieldcontain">
<label for="name">名前</label>
<input type="text" id="name">
</div>
＞CSS
/*入力フォームの背景を調整*/
textarea.ui-body-b,input.ui-body-b{
background-color:white;
}
/*見出しとフォーム部品の間の余白を調整*/
.ui-field-contain:first-child{
padding-top:0;
}
▼テキストエリア（textarea）
例：
<div data-role="fieldcontain">
<label for="comment">お問い合わせ内容</label>
<textarea id="comment"></textarea>
</div>
▼フリップスイッチ（2つの選択肢からどちらか一方を選択するUI）
select要素にdata-role属性「slider」を指定し、内側に2つのoption要素で項目を指定する
例：
<div data-role="fieldcontain">
<label for="gender">性別</label>
<select name="gender" id="gender" data-role="slider">
<option value="男性">男性</option>
<option value="女性">女性</option>
</select>
</div>
▼チェックボックス（checkbox）
type属性に「checkbox」を指定したinput要素で記述し、label要素でラベルと関連付けます。チェックボックス全体はdata-role属性に「controlgroup」を指定したfieldset要素で包み、fieldset要素の先頭にlegend要素で項目名（ここでは「お問い合わせ種別」）を記述
例：
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>お問い合わせ種別</legend>
<input type="checkbox" name="type1" id="type1" value="HP新規作成">
<label for="type1">HP新規作成</label>
<input type="checkbox" name="type2" id="type2" value="HPリニューアル">
<label for="type2">HPリニューアル</label>
<input type="checkbox" name="type3" id="type3" value="システム開発">
<label for="type3">システム開発</label>
<input type="checkbox" name="type4" id="type4" value="コンサルティング">
<label for="type4">コンサルティング</label>
</fieldset>
</div>
▼送信・キャンセルボタン
例：
<input type="button" value="キャンセル">
<input type="submit" value="送信">
▽data-theme属性を指定することでフォームのデザインテーマも変更可能
例：
<input type="button" value="キャンセル" data-theme="b">
<input type="submit" value="送信" data-theme="b">
▽文字数にフィットしたボタン
data-inline属性に「true」を指定する
例：
<input type="button" value="キャンセル" data-theme="b" data-inline="true">
<input type="submit" value="送信" data-theme="b" data-inline="true">
▽jQuery Mobileが用意したアイコンを表示
input要素にdata-icon属性を追加
例:
<input type="button" value="キャンセル" data-theme="b" data-icon="delete" data-inline="true">
<input type="submit" value="送信" data-theme="b" data-icon="arrow-r" data-inline="true">
2012-04-25T17:02:41+09:00
1335340961
-
jQuery Mobile2(タグとか1)
https://w.atwiki.jp/hear_br0wn/pages/78.html
*●ページ切り替えの方法（ページ遷移のアニメーションエフェクト）
a要素に対してカスタムデータ属性「data-transition="エフェクトの種類"」を指定
***【エフェクトの種類】
slide ：左右にスライドして切り替わる
slideup ：ページが下から上にスライドして切り替わる
slidedown ：ページが上から下にスライドして切り替わる
pop ：ページが拡大しながら切り替わる
fade ：ページがフェードイン／フェードアウトで切り替わる
flip ：ページが回転して切り替わる
none(もしくは記述しない) ：通常のリンクのように切り替わる
例：
<a href="#about" data-transition="slide">
※リンク（ページ）単位ではなく、サイト全体でページ遷移のアニメーションを一括して設定したい場合は、[[jQuery]]とjQuery Mobileのスクリプトファイルを読み込むscript要素の間に次のような[[JavaScript]]コードを追加します。
例：
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.defaultTransition = "flip";
});
</script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
***▼ページ切り替えの方向を逆にする。
a要素に対してdata-direction属性「reverse」を設定すると、指定したアニメーションと逆向きの動きでリンクを作成
例:
<a href="#page1" data-direction="reverse">page1</a>
*●リスト
ul、ol、li要素に対してカスタムデータ属性「data-role="listview"」を指定
例ul：
<div data-role="content">
<ul data-role="listview">
<li><a href="#page2">list</a></li>
<li><a href="#page2">list</a><a href="#page2">detail</a></li>
<li></li>
<li></li>
</ul>
</div>
#ref(リスト ul.jpg)
例ol：
<ol data-role="listview">
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
</ol>
#ref(リスト ol.jpg)
例aタグ：
<div data-role="content">
<ul data-role="listview">
<li><a href="#page2">list</a></li>
<li><a href="#page2">list</a><a href="#page2">detail</a></li>
<li></li>
<li></li>
</ul>
</div>
※li内に2つのリンクを記述すると、1つのリスト項目に2つのリンクを設定できる分割リストも作成できる。
#ref(リスト aタグ使用.jpg)
#ref(リスト 分割リストで表示する.jpg)
***▼分割リストのアイコンを変更する
分割リストで表示するアイコンは、data-split-icon属性で変更できる。
例：
<ul data-role="listview" data-split-icon="gear">
#ref(リスト 分割リストで表示する.jpg)
***▼分割リストのテーマを設定(カラー)
分割リストではdata-split-them属性を利用してテーマを適用できる。
例:
<ul data-role="listview" data-split-theme="a">
#ref(リスト 分割リストのテーマを設定(カラー).jpg)
***▼角丸のリスト
ul/ol要素に対してdata-inset属性「true」を付けると、角丸の立体的なリストにできる。
例：
<ul data-role="listview" data-inset="true">
#ref(リスト 角丸.jpg)
***▼説明付きのリスト1
見出し要素とp要素などを組み合わせることで説明を表示できる
例：
<ul data-role="listview">
<li><a href="#page2"><h1>見出し</h1><p>説明の内容</p></a></li>
<li><a href="#page2"><h1>見出し</h1><p>説明の内容</p></a></li>
<li><a href="#page2"><h1>見出し</h1><p>説明の内容</p></a></li>
<li><a href="#page2"><h1>見出し</h1><p>説明の内容</p></a></li>
</ul>
#ref(リスト 説明付きのリスト1.jpg)
***▼説明付きのリスト2
class属性「ui-li-aside」を設定した要素を記述すると、リスト項目の右上に補足的な情報も表示できる
例：
<ul data-role="listview">
<li>
<a href="#page2">
<p class="ui-li-aside">2011年7月20日</p>
<h1>見出し</h1>
<p>説明の内容</p>
</a>
</li>
<li>
<a href="#page2">
<p class="ui-li-aside">2011年7月20日</p>
<h1>見出し</h1>
<p>説明の内容</p>
</a>
</li>
<li>
<a href="#page2">
<p class="ui-li-aside">2011年7月20日</p>
<h1>見出し</h1>
<p>説明の内容</p>
</a>
</li>
</ul>
#ref(リスト 説明付きのリスト2.jpg)
***▼リストに見出しをつける
li要素にカスタムデータ属性「data-role="list-divider"」を付ける
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">見出し</li>
<li></li>
<li></li>
</ul>
</div>
#ref(リスト リストに見出しをつける.jpg)
***▼見出しのテーマ
例：
<ul data-role="listview" data-dividertheme="a">
<li data-role="list-divider">見出し</li>
<li><a href="#page2">list</a></li>
<li><a href="#page2">list</a></li>
<li data-role="list-divider">見出し</li>
<li><a href="#page2">list</a></li>
<li><a href="#page2">list</a></li>
</ul>
#ref(リスト 見出しテーマ.jpg)
***▼見出しのテーマの変更1（全体）
ul/ol要素にdata-theme属性でテーマを指定できます
例：
<ul data-role="listview" data-theme="e">
<li><a href="#page2">list</a></li>
<li><a href="#page2">list</a></li>
<li><a href="#page2">list</a></li>
<li><a href="#page2">list</a></li>
<li><a href="#page2">list</a></li>
</ul>
#ref(リスト 見出しのテーマの変更1（全体）.jpg)
***▼見出しのテーマの変更2（個別）
data-theme属性はul/ol要素の子要素であるli要素にも指定できます。li要素にdata-theme属性を設定すると、個々のリスト項目のテーマを変更できます
例:
<ul data-role="listview">
<li><a href="#page2">list</a></li>
<li data-theme="e"><a href="#page2">list</a></li>
<li><a href="#page2">list</a></li>
<li><a href="#page2">list</a></li>
<li><a href="#page2">list</a></li>
</ul>
#ref(リスト 見出しのテーマの変更2（個別）.jpg)
***▼カウントバブルの追加
リスト内に数値を記述し、class属性「ui-li-count」を付けた要素で包むと、リスト項目の右側にカウントバブルが表示される
※Webサイトの新着情報の件数を表示する場合などに利用できます。
例：
<ul data-role="listview">
<li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
<li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
<li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
<li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
<li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
</ul>
#ref(リスト カウントバブルの追加.jpg)
***▼カウントバブルのテーマの変更
ulタグにdata-count-theme属性をつけることで変更できる
例：
<ul data-role="listview" data-count-theme="a">
<li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
<li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
<li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
<li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
<li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
</ul>
#ref(リスト カウントダウンバブルのテーマ変更.jpg)
***▼画像付きのリスト1
各リスト項目内のimg要素を記述するだけ、img要素で指定した画像は80×80pxに自動的にリサイズされる。
例：
<ul data-role="listview">
<li><a href="#page2"><img src="thumbnail1.jpg">list</a></li>
<li><a href="#page2"><img src="thumbnail2.jpg">list</a></li>
<li><a href="#page2"><img src="thumbnail3.jpg">list</a></li>
<li><a href="#page2"><img src="thumbnail4.jpg">list</a></li>
<li><a href="#page2"><img src="thumbnail5.jpg">list</a></li>
</ul>
#ref(リスト 画像付きのリスト1.jpg)
***▼画像付きのリスト2
より小さな画像をアイコンのようにして表示したい場合は、class属性「ui-li-icon」を使います。画像が16×16pxで表示されます。
例：
<ul data-role="listview">
<li><a href="#page2"><img src="thumbnail1.jpg" class="ui-li-icon">list</a></li>
<li><a href="#page2"><img src="thumbnail2.jpg" class="ui-li-icon">list</a></li>
<li><a href="#page2"><img src="thumbnail3.jpg" class="ui-li-icon">list</a></li>
<li><a href="#page2"><img src="thumbnail4.jpg" class="ui-li-icon">list</a></li>
<li><a href="#page2"><img src="thumbnail5.jpg" class="ui-li-icon">list</a></li>
</ul>
#ref(リスト 画像付きのリスト2.jpg)
※jQuery Mobileの現在のバージョン（1.0ベータ）では画像が40×40pxにリサイズされ、表示がずれるため、CSSでサイズを指定する必要がある。
***サイズ修正例：
<ul data-role="listview">
<li>
<a href="#page2">
<img src="thumbnail1.jpg" class="ui-li-icon" style="max-width:16px;max-height:16px;">list
</a>
</li>
<li>
<a href="#page2">
<img src="thumbnail2jpg" class="ui-li-icon" style="max-width:16px;max-height:16px;">list
</a>
</li>
<li>
<a href="#page2">
<img src="thumbnail3.jpg" class="ui-li-icon" style="max-width:16px;max-height:16px;">list
</a>
</li>
</ul>
#ref(リスト 画像付きのリスト2_修正.jpg)
***▼検索フィルタ1
jQuery Mobileのリストには、リスト内の項目を絞り込める検索フィルタ機能が用意されています。ul/ol要素にdata-filter属性「true」を追加すると、リストの上部に検索フォームが配置され、検索キーワードを入力すると一致する項目だけが表示されます。
例：
<ul data-role="listview" data-filter="true">
<li><a href="#page2">list</a></li>
<li><a href="#page2">list</a></li>
<li><a href="#page2">list</a></li>
<li><a href="#page2">list</a></li>
<li><a href="#page2">list</a></li>
</ul>
#ref(リスト 検索フィルタ1.jpg)
***▼検索フィルタ2
検索フォームのプレースホルダー（初期値）には「Filter items...」という値が入っています。この値は、data-filter-placeholder属性で変更できます。
例：
<ul data-role="listview" data-filter="true" data-filter-placeholder="キーワードで絞り込み">
<li><a href="#page2">list</a></li>
<li><a href="#page2">list</a></li>
<li><a href="#page2">list</a></li>
<li><a href="#page2">list</a></li>
<li><a href="#page2">list</a></li>
</ul>
#ref(リスト 検索フィルタ2.jpg)
*●ヘッダーのカスタマイズ
***▼Backボタンの表示1
ページ要素（data-role="page"）にdata-add-back-btn属性「true」を指定すると、他のページから遷移してきたときに自動的に「戻るボタン」を表示します
例：
<div data-role="page" id="page2" data-add-back-btn="true">
#ref(ヘッダ Backボタンの表示1.jpg)
***▼Backボタンの表示2（ラベルの変更）
「戻るボタン」は、デフォルトでは「back」というテキストが表示されます。ボタンのラベルを任意のテキストに変更するには、ページ要素にdata-back-btn-text属性で表示したいテキストを指定します
例：
<div data-role="page" id="about" data-theme="b" data-back-btn-text="戻る">
#ref(ヘッダ Backボタンの表示2（ラベルの変更）.jpg)
***▼任意のボタンを表示1
data-role属性「header」を指定した要素内にa要素を記述すると、ボタンとして表示されます
例：
<div data-role="header">
<a href="#page2">home</a>
<h1>ページ1</h1>
<a href="#page2">save</a>
</div>
#ref(ヘッダ 任意のボタンを表示.jpg)
***▼任意のボタンを表示2（表示位置）
1つ目のa要素がヘッダーのテキストの左側に、2つ目のa要素が右側に表示されます。ボタンを必ず右側に表示したい場合は、class属性「ui-btn-right」を指定します。
例：
<div data-role="header">
<h1>ページ1</h1>
<a href="#page2" class="ui-btn-right">save</a>
</div>
#ref(ヘッダ 任意のボタンを表示2（表示位置）.jpg)
*●フッターのカスタマイズ
***▼任意のボタンを表示
フッター内に配置したa要素も自動的にボタンに変換されます。ただし、初期値では余白などが反映されていないため、フッター要素の内側に新たな要素を作成し、class属性「ui-bar」を指定します。
例：
<div data-role="footer" class="ui-bar">
<div class="ui-bar">
<a href="#page2">Remove</a>
<a href="#page2">Add</a>
<a href="#page2">Up</a>
<a href="#page2">Down</a>
</div>
</div>
#ref(フッタ 任意のボタンを表示.jpg)
*●ヘッダー/フッターのカスタマイズ
***▼ナビゲーションバーの追加
data-role属性「navbar」を利用するとヘッダーやフッターにナビゲーションバーを追加できる。
ナビゲーションバーに表示するボタンは、data-role属性「navbar」を付けた要素の内側にリスト（ul/li要素）で記述。
※ナビゲーションバーはボタンの数（li要素の数）で均等に分割され、数が増えるにつれてボタンは小さくなります、
ボタンの数（li要素の数）が6つ以上になると1行に2列ずつ、複数行に分割して表示
例1ヘッダ：
<div data-role="header">
<h1>ページ1</h1>
<div data-role="navbar">
<ul>
<li><a href="#page2">One</a></li>
<li><a href="#page2">Two</a></li>
</ul>
</div>
</div>
#ref(ヘッダフッタ ナビゲーションバーの追加ヘッダ.jpg)
#ref(ヘッダフッタ ナビゲーションバーの追加フッタ.jpg)
***▼固定配置1
data-position属性「fixed」を追加する
例：
<div data-role="header" data-position="fixed">
<h1>ページ1</h1> </div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#page2">list1</a></li>
<li><a href="#page2">list2</a></li>
<li><a href="#page2">list3</a></li>
(中略)
<li><a href="#page2">list8</a></li>
<li><a href="#page2">list9</a></li>
<li><a href="#page2">list10</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>フッター1</h4>
</div>
#ref(ヘッダフッタ 固定配置.jpg)
***▼固定配置2（共通フッターの使用）
data-position="fixed" でフッターを固定しているときにdata-id属性を設定すると、共通フッターを使用できます。
data-id属性にはID名（フッターID）を指定し、共通フッターを使用したいページには同じフッターIDをフッターに記述します。
※共通フッターとは、サイト内の各ページに共通して表示されるフッターのことで、ページ遷移時にもアニメーションせずに固定され、常にページ下部に表示されます。
例：
<div data-role="footer" data-position="fixed" data-id="フッターID">
<h4>フッター</h4>
</div>
#ref(ヘッダフッタ 固定配置2（共通フッターの使用）.png)
***▼固定配置3（フルスクリーンモード）
ヘッダー／フッターを固定配置した状態（data-position="fixed"）でページ要素にdata-fullscreen属性「true」を指定すると、フルスクリーンモードを利用できます。
※フルスクリーンモードとは、ヘッダー／フッターがコンテンツの上に半透明で重なって表示され、コンテンツ領域をタップすると非表示になります（もう一度タップすると再表示されます）。
例：
<div data-role="page" id="page1" data-fullscreen="true">
<div data-role="header" data-position="fixed">
<h1>ページ1</h1>
</div>
<div data-role="content">
<h2>小見出し</h2>
<p>本文</p>
<h2>小見出し</h2>
<p>本文</p>
</div>
<div data-role="footer" data-position="fixed">
<h4>フッター1</h4>
</div>
</div>
#ref(ヘッダフッタ 固定配置3（フルスクリーンモード）.jpg)
2012-04-25T16:47:04+09:00
1335340024
-
jQuery Mobile1(基礎)
https://w.atwiki.jp/hear_br0wn/pages/77.html
*●jQuery Mobileについて
公式：http://jquerymobile.com/
簡易ジェネレータ：http://codiqa.com/
JavaSqriptのスマートフォン用フレームワーク
【特徴】
・1つのHTMLソースで複数のページを作ることができる。
※ページ内リンクに近いが、ブラウザには表示されず、通常のリンクのように切り替わるためブラウザ上で見ると普通のリンクのよう
に見える。
・HTMLタグに専用のタグを追記するだけで使える。（スクリプトの記述は一切なし）
・CSSがあらかじめ用意されているので自由に変えようと思うと少々めんどい
【条件】
HTML5
※その他のフレームワーク
・jQTouch（http://jqtouch.com/）
・Sencha Touch（http://www.extjs.co.jp/products/touch/）
・iUi（http://code.google.com/p/iui/）
*●jQuery Mobileのスクリプトファイルについて
「[[jQuery]] Mobileのスタイルシート」「jQueryのスクリプトファイル」「jQuery Mobileのスクリプトファイル」の3つのファイルをHTMLの
head要素内で読み込んで利用します
呼び出しは、CDNからの呼び出し（webのURL呼び出し（http～のリンク））でも、ローカルファイル呼び出し（通常のcssファイルなどのよ
うに「.jsファイル」を準備して呼び出してつかう）の2種類がある。
※ファイルとして用意していた場合のメリット
・URL呼び出し先サーバーが落ちても問題ない
・最初に呼び出してしまえばその後ローカル環境でも使える
***▼呼び出しは、CDNからの呼び出し
以下をヘッダに記述。
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
※バージョン別記述方法、
1. jQuery Mobile用のスタイルシート
http://code.jquery.com/mobile/バージョン/jquery.mobile-バージョン.min.css
2. jQueryのスクリプト
http://code.jquery.com/jquery-バージョン.min.js
3. jQuery Mobileのスクリプト
http://code.jquery.com/mobile/バージョン/jquery.mobile-バージョン.min.js
***▼ローカルファイル呼び出し
以下のサイトからDL。
http://jquery.com/
必要なファイル：
jquery.mobile-1.0a4.1.css
jquery.mobile-1.0a4.1.min.css
jquery.mobile-1.0a4.1.js
jquery.mobile-1.0a4.1.min.js
imagesフォルダ
※拡張子の前に「.min」が付いているファイルは、変数名を短くし、コメントや空白、改行を削除してファイルサイズを抑えた圧縮版です
、通常は圧縮版のファイルを使いましょう。imagesフォルダはスタイルシートから参照されるので、CSSファイルと同じフォルダに配置しま
す（CSSが/cssなら/css/images）。
*●HTMLソース記述方法
<html>
<head>
……必要なヘッダーのタグ……
……jQuery Mobile関連のタグ……
</head>
<body>
<div id="home" data-role="page">
……ここに1ページ分の表示内容を用意（ヘッダ・コンテンツ・フッタを記載）……
<div data-role="header">
……ヘッダー部分の表示……
</div>
<div data-role="content">
……ここに用意するコンテンツの内容……
</div>
</div>
</body>
</html>
*★ページの単位、
通常 ：1ページ＝1HTMLファイル。
jQuery Mobile：1ページ＝<div id="index" data-role="page">～</div>
***▼1つのHTMLに複数のページのコンテンツをまとめて記述する、ページの区切りやページ内のレイアウトは、カスタムデータ属性のdata-role属性で定義。（1HTMLファイル内にいくつもページを作れる）
・ページの作成 data-role="page"
<div id="home" data-role="page">
※idはファイル名というイメージ（ページ内リンクのアンカーとして使用）
・ヘッダーの表示 data-role="header"
<div data-role="header">
・コンテンツの表示 data-role="content"（body部分）
<div data-role="content">
・フッターの表示 data-role="footer"
<div data-role="footer">
※data-role="page"を使った場合、一番最初のdivの内容しかページに表示されない。それ以外は別ページとして認識される。
***▼ページ内リンクの方法
各ページへリンクを張るには、a要素のhref属性にページIDを記述
例:
<a href="#page2" data-rel="dialog">ダイアログ</a>
***※別のWebページにジャンプするには？
<a>タグはデフォルトだとページ内リンクしかできない。
別のWebページにジャンプするには、「data-ajax="false"」という属性を追加する。
例：
<a href="next.html" data-role="button" data-ajax="false">go next</a>
***●テーマ（スキン）
data-role="page"にdata-theme="テーマの種類"という属性を追加するとページ全体の色が変わる。
あらかじめ5種類用意してある。
指定なし
#ref(date-theme指定なし.png)
「a」――黒を基調としたテーマです。
#ref(date-theme：a.png)
「b」――青を基調としたテーマです。
#ref(date-theme：b.png)
「c」――グレーを基調としたテーマです。
#ref(date-theme：c.png)
「d」――白を基調としたテーマです。
#ref(date-theme：d.png)
「e」――黄色を基調としたテーマです。
#ref(date-theme：e.png)
例：
<div id="home" data-role="page" data-theme="a">
……表示内容（ヘッダ・コンテンツ・フッタを記載）……
</div>
※jQuery Mobileの正式版リリース時には、テーマを簡単にカスタマイズできる「ThemeRoller」も提供される予定
***●CSS
jQuery MobileのCSSは、「共通CSS」と「テーマCSS」の2つで構成されています。
・共通CSSは、要素のサイズや間隔、余白など、ページの構造やレイアウトに関する設定が記述されており、すべてのテーマで共通して利用されます。
・テーマCSSは、data-theme属性で指定したテーマ（デフォルトでは「a」～「e」までの5種類）のスタイルを記述したCSSで、指定したテーマに対応する設定のみ適用
※jQuery MobileのCSS[http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.css]
2012-04-24T18:06:25+09:00
1335258385
-
メニュー
https://w.atwiki.jp/hear_br0wn/pages/2.html
**メニュー
-[[トップページ]]
-[[プラグイン紹介>プラグイン]]
-[[まとめサイト作成支援ツール]]
-[[メニュー]]
-[[HTML・CSS>http://www38.atwiki.jp/hear_br0wn/pages/49.html]]
-[[PHP>http://www38.atwiki.jp/hear_br0wn/pages/17.html]]
-[[JavaScript>http://www38.atwiki.jp/hear_br0wn/pages/26.html]]
-[[jQuery>http://www38.atwiki.jp/hear_br0wn/pages/76.html]]
-[[データベース（DB）(MySQL)>http://www38.atwiki.jp/hear_br0wn/pages/35.html]]
-[[FLASH（ActionScript)>http://www38.atwiki.jp/hear_br0wn/pages/46.html]]
-[[illustrator>http://www38.atwiki.jp/hear_br0wn/pages/73.html]]
-[[photoshop>http://www38.atwiki.jp/hear_br0wn/pages/73.html]]
----
**リンク
-[[@wiki>>http://atwiki.jp]]
-[[@wikiご利用ガイド>>http://atwiki.jp/guide/]]
**他のサービス
-[[無料ホームページ作成>>http://atpages.jp]]
-[[無料ブログ作成>>http://atword.jp]]
-[[2ch型掲示板レンタル>>http://atchs.jp]]
-[[無料掲示板レンタル>>http://atbbs.jp]]
-[[お絵かきレンタル>>http://atpaint.jp/]]
-[[無料ソーシャルプロフ>>http://sns.atfb.jp/]]
// リンクを張るには "[" 2つで文字列を括ります。
// ">" の左側に文字、右側にURLを記述するとリンクになります
//**更新履歴
//#recent(20)
&link_editmenu(text=ここを編集)
2012-04-16T12:36:11+09:00
1334547371
-
CSS基礎知識
https://w.atwiki.jp/hear_br0wn/pages/75.html
**1.ブロックレベル要素
ブロックレベル要素とは昔風の解説で言うなら、改行を伴う要素です。 上記の例では青いボーダーの要素です。
HTML4.01 Strictでは次の要素がこれにあたります。
p div table dl ul ol form address
blockquote h1 h2 h3 h4 h5 h6 fieldset hr pre
ブロックレベル要素の特徴は、親要素の内容幅全体に広がって配置されます(上記の例では黒い二重のボーダーが親要素のボーダーです)。 つまり、ブロックレベル要素の横に他の要素は(通常フローなら)並べることができません。 このような特徴からボーダーが(見えて)ない時の様子から「改行を伴う」と言われています。
CSS2ではブロックレベル要素は矩形(四角形)で表現されると考えると簡単に理解できるかと思います。
**2.インライン要素
ブロックレベル要素に対し、文中の一部分にだけ意味づけや、 書式設定を行うものをインライン要素と言います。 上記の例では赤いボーダーの要素のことです。
例として以下のものがあります。
a abbr acronym b bdo big cite code
dfn em i kbd label q samp small span
strong sub sup tt var
上記の例にあるように、要素中に改行が混じるとやや複雑な形で表示されます。 これはインライン要素によって生成されるボックスは改行によって複数に分割されることがあるためです。 この分割された面にはborder, margin, paddingはその表示が行われません。
また、インライン要素は(原則として)ブロックレベル要素をその子孫要素として持つことができない、と覚えておいてください。 この件に関しては別の記事で詳しく説明します。
**3.インラインブロック(置換インライン)要素
インライン要素のように改行は伴わないのですが、幅(width)や高さ(height)を持つ、 インラインブロック要素と呼ばれるものもあります。 見た目に関する決まり事はブロックレベル要素、文法上はインライン要素、といったイメージが近いと思います。
具体的には次の要素です。
button img input object select
**4.ブロックレベル要素とインライン要素の比較
||ブロックレベル要素|インライン要素|
|高さ(height)|指定可|指定不可|
|幅(width)|指定可|指定不可|
|左右のマージン(margin)|要素の左右に存在|最初の文字の左側と、最後の文字の右側に存在|
|左右のパディング(padding)|要素の左右に存在|最初の文字の左側と、最後の文字の右側に存在|
|左右のボーダー(border)|要素の左右に存在|最初の文字の左側と、最後の文字の右側に存在|
|上下のマージン(margin)|要素の上下に存在|無視され、レイアウトに影響は無い|
|上下のパディング(padding)|要素の上下に存在|全ての行に存在し、ボーダーの位置に影響が出る|
|上下のボーダー(border)|要素の上下に存在|各行に存在するが、他の行に重なる場合がある|
2012-04-13T15:38:15+09:00
1334299095
-
HTML・CSS
https://w.atwiki.jp/hear_br0wn/pages/49.html
-[[Smartfon_Site>http://www38.atwiki.jp/hear_br0wn/pages/66.html]]
-[[Mobile_Site>http://www38.atwiki.jp/hear_br0wn/pages/71.html]]
-[[特殊文字>http://www38.atwiki.jp/hear_br0wn/pages/72.html]]
参照：[[特殊文字]](e-words)[[http://e-words.jp/p/r-htmlentity.html>http://e-words.jp/p/r-htmlentity.html]]
-[[CSS基礎知識1>http://www38.atwiki.jp/hear_br0wn/pages/75.html]]
-[[CSS基礎知識2>http://www38.atwiki.jp/hear_br0wn/pages/70.html]]
参考リンク：
・HTMLクイックリファレンス
[[http://www.htmq.com/index.htm>http://www.htmq.com/index.htm]]
2012-04-13T15:37:37+09:00
1334299057
-
Mobile_Site
https://w.atwiki.jp/hear_br0wn/pages/71.html
*●キャリア公開ページ
docomo
[[http://www.nttdocomo.co.jp/service/developer/make/content/browser/index.html>http://www.nttdocomo.co.jp/service/developer/make/content/browser/index.html]]
au
[[http://www.au.kddi.com/ezfactory/tec/spec/new_win/ezkishu.html
>http://www.au.kddi.com/ezfactory/tec/spec/new_win/ezkishu.html
]]
*●容量
docomo
基本的にはi-modeの上限(i-mode2.0は除く)である容量100KBを守ればいいのですが、
さすがにその容量まで使い切ると、表示が重くなるのは当然。
因みに、この容量とは表示されるページのソースと画像の合計になります。
仮にソース側が5KBである場合、画像は残りの95KB使えるということです。
個人的には合計して50KB以下に抑えておくのがちょうど良いかと思います
au
ブラウザのバージョンによって、大きく分けて2つの規格に分かれています。
それは、HDML対応機（旧規格)かXHTML（XHTML Basic）対応機かということ。
これらはページ作成時のマークアップが異なります。
ブラウザで言えば「WAP2.0か否か」の違いという認識でもOKでしょう。
ただし、XHTML対応機はHDMLも内包し、HDMLで書かれたページも表示できます。
一方、HDML対応機でXHTMLで書かれたページを見る場合は、au側でHDML変換サーバーを経由して表示されます。
旧規格HDML
モノクロ機は1デッキごと1.2KB以下
カラー機は7.5KB以下
XHTML対応機
HTMLファイルの容量が9KB以下
*⇒100kb以下
*●画像
docomo
を参照すると、GIF画像をメインに対応しているようです。JPEGはiモード独自のHTMLバージョンによって対
応状況が異なりますが、現在の多くの機種ではVer4.0以降なので、事実上JPEGにも対応していることになります
au
「GIF」、「JPEG」、「PNG256色」に対応していますが、メインは「JPEG」と「PNG」です。こちらも事実上3フォーマットに対応していることになります。
|●GIF（静止画）|●GIF（アニメーション）|
|画像自体：25KB以下|画像自体：30KB以下|
|ページ上：9KB以下|ページ上：9KB以下|
softbank
ボーダフォンの機種は「PNG」と「JPEG」に対応していることになります。GIF画像はボーダフォン3G最新機種のみの対応だそうです。
※画像のみを表示する場合などは、機種のキャッシュ容量（一時記憶）
を超えなければ、画像を表示できますが、
機種ごとのキャッシュサイズがauの場合公表されていないので、
具体的に「何KB以下にすると良い」と言えないのが残念なところです
***●サイズ width 最大240px以下
最近の画面サイズで言えば、まぁ240pxで概ねOKなんですが、機種によってまちまち。
例えばブラウザにスクロールバーが表示されてしまうことで画像の幅が圧迫されて画像が荒れ
ることもあります。そういうのがイヤって人は230pxくらいで作成した方がいいかなと。
****●拡張子 .jpg/.gif
容量は出来る限り落とすのが無難。そう言う意味ではGIF形式の方がいいかも。個人的には
JPG形式を多用してますが。PNG形式はi-mode1.0では非対応になってますが2.0では対応
になりました。とは言え対応機種の数も少ないですし、現時点ではまだ上の2形式で用意したほ
うがいいです。
※GIF画像をメインに対応しているらしい。
※3キャリアですべて対応している画像フォーマットは現時点では『JPEG形式』しかない
*⇒gif推奨（jpegでも可）、widthは最大240pxまで
*●マークアップ
docomo
iモードの記述言語は「iモード対応HTML（＝CHTML）」や「iモード対応XHTML」
au
WAP1.0のHDML、WAP2.0以降はHTMLに拡張機能を加えた「XHTML」
SoftBank
２Gの場合「MML」や「HTML」、３Gの場合は「HTML」や「XHTML」
*⇒XHTML
*●CSSの対応について
※キャリアによって差があります。
●i-mode
インラインCSSのみ対応。外部CSSは非対応です。疑似クラスは使えます。
利用可能な疑似クラスはlink/visited/focusの3つ。
●EZweb/Yahoo!ケータイ
こっちは2キャリア共通。外部CSS対応していて、headに纏めて記述も出来ます。
疑似クラスはlink/visitedに対応。
※基本は、インラインCSSと疑似クラスだけ。
*⇒インラインCSSのみが推奨（タグに直接style属性を追加する）
*●文字エンコード
現在の携帯電話に搭載されているブラウザで各社互換性があるのは「Shift-JIS」だけ
*⇒Shift-JIS
*●画面の大きさ
携帯電話向けのサイトを作成する際、画面の横サイズに収める文字数の指標として「基準は横8文字」というものがあります。
古い携帯でも横に1行で並ぶ文字数が最低で「8文字」であれば表示できるということが分かっているので、これが基準値とされています。
古い携帯でも横に1行で並ぶ文字数が最低で「8文字」であれば表示できるということが分かっているので、これが基準値とされています。
※でも、実のところ、現在の主流の携帯はこれ以上の文字数を横に表示できる機種がほとんどです。
古い機種を視野に入れてサービスを展開するのであれば、これは考慮しなければなりませんが、
個人で開設するようなサイトさんは、特に気にしないでも良いモノですね。
*⇒気にしなくておｋ
*●フォントサイズ
3キャリアまとめて設定する場合
***size-2
あまり触れられることの少ないことなのですが、
携帯のコーディングをされている方の多くは、
基本的にすべてのfont sizeを-2に指定していることが多いです。
(px等で指定する場合を除く。)
[[http://d.hatena.ne.jp/moba13/20090421/1240319098>http://d.hatena.ne.jp/moba13/20090421/1240319098]]
***x-smallとmediumの組み合わせ
ベースをx-smallで指定して、大きくしたい箇所にだけmediumを指定すると楽です。
*⇒x-smallとmediumの組み合わせ
*●固体識別情報確認サイト
[[http://testpage.jp/m/tool/uid_utn_ip_host.php?guid=ON >http://testpage.jp/m/tool/uid_utn_ip_host.php?guid=ON ]]
*●background-imageについて
「body」にしかつけられない、また1ページに1つしか使えない。
2012-04-02T21:20:06+09:00
1333369206