hear_br0wn @ ウィキ
http://w.atwiki.jp/hear_br0wn/
hear_br0wn @ ウィキ
ja
2012-04-25T17:41:14+09:00
1335343274
-
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
2012-04-25T17:41:14+09:00
1335343274
-
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 c
2012-04-25T17:02:41+09:00
1335340961
-
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-
2012-04-25T17:40:30+09:00
1335343230
-
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-r
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
2012-04-24T18:06:25+09:00
1335258385
-
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
-
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 ob
2012-04-13T15:38:15+09:00
1334299095
-
photoshop
https://w.atwiki.jp/hear_br0wn/pages/74.html
[[gifアニメ>http://d.hatena.ne.jp/JohnMcClane/20080330/p1]]
2012-03-30T12:15:59+09:00
1333077359
-
illustrator
https://w.atwiki.jp/hear_br0wn/pages/73.html
[[gifアニメ>http://www.adobe.com/jp/web/tips/ill10animlyrs/index.html]]
2012-03-30T11:58:15+09:00
1333076295
-
特殊文字
https://w.atwiki.jp/hear_br0wn/pages/72.html
#ref(特殊文字.jpg)
[[参照>http://e-words.jp/p/r-htmlentity.html]]
2012-03-28T11:19:40+09:00
1332901180