More Related Content
Similar to ⑯jQueryをおぼえよう！その２ (20)
More from Nishida Kansuke (20)
⑯jQueryをおぼえよう！その２
- 3. 注意事項
• この資料の中には、2012/05時点での事実が書いてあるつもりです
が、時代とともに移り変わる情報もあるので最新情報のチェックも
忘れずに！
• 主観に基づく事柄もあります。そんな場合は、この色でコメントす
るようにしています！信じるか信じないかはあなた次第！
• ざっくり説明するために、簡単に説明しています。厳密にいうと
ちょっと違う部分もあるかと思います。でもまあ、だいたいあって
る（はず）。
• 過去の環境（IE6とかIE7とか、PHP4とか）には採用されていない
話もあるので、その辺をターゲットにする場合は注意（無視してい
いと思うけど）
• リンクは日本語訳がある場合はそっちにリンクしています。公式情
報ではないので、仕事で使う場合は原文を確認しましょう。
- 7. かいせつ
<style>
div{ ←divタグの
↓背景を#063(みどり）にする
background-color:#063;
}
</style>
- 9. ちょうしにのってみよう
border:2px solid #fff;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
- 13. idとclass
• タグには、識別子としてidとclassを付けら
れます。
• idは、htmlのなかに１個だけ！
• classは、複数あってもいい。
• classは、複数付けられる。
• <div id= xxx class= yyy zzz ></div>
– divタグ
– idは、xxx
– classは、yyy と zzz
- 15. やってみる①
.daiji {
font-weight:bold;
}
.yabai {
background-color:#C03;
}
• ※div{}の下に追加
- 19. セレクタ②
• xxx
– xxxタグが対象
• ＃xxx
– idがxxx のが対象
• .xxx
– classがxxxのが対象
- 20. セレクタ③
<div>
<p>
あああ
</p>
</div>
<p>
いいい
</p>
階層構造の場合は、スペースで区切るとxxxの中のyyyみたいなのを指
定できます。
例えば、
div p{
：
}
とすれば、あああは対象だけど、いいいは対象じゃないみたいな指定
ができます。
- 26. じゅんび
<body>
<div id="n1">テスト１</div>
<div id="n2"class="daiji">テスト２</div>
<div id="n3"class="yabai daiji">テスト３</
div>
</body>
各タグにidをつけて、区別できるようにしてみた。
- 27. jQueryのよみこみ
• 自分でサーバにおいてもいいけど、
googleにおいてあるやつに、直リンクす
ると、みんながキャッシュを使うので地
球にやさしい
• https://developers.google.com/
speed/libraries/devguide?
hl=ja#jquery
• 上記に、最新のURLとかが書いてある。
- 34. かいせつ
$(function(){
$("#n2").hide();
});
• セレクタが#n2なので、idが n2 のが対象
になる。
• hide()は、消す命令なので、きえる！
- 35. やってみよう
<script>
$(function(){
$("div").hide();
});
</script>
$( div )とか$( .daiji )にかえてやってみよ
う！
- 36. その他の関数
• jQuery API 日本語リファレンス
– http://alphasis.info/jquery-api/
• 日本語で詳しく書いてあるのでおすすめ！
• 実際に試せるサンプルもある！
- 39. やってみよう①
<style>
.tweet{
color:#fff;
background-color:#063;
padding:30px;
margin:10px;
border:2px solid #fff;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
.user_name{
font-size:140%;
}
</style>
- 41. やってみよう③
success:function(json){
$.each(json.results, function(){
console.log(this);
var tw = $("<div class='tweet' />");
tw.append($("<img class='profile_img' /
>").attr("src",this.profile_image_url));
tw.append($("<span class='user_name' /
>").text(this.from_user_name));
tw.append($("<br />"));
tw.append($("<div class='text' />").text(this.text));
if(this.entities && this.entities.media){
tw.append($("<img class='media_img' /
>").attr("src",this.entities.media[0].media_url));
}
$("body").append(tw);
});
}
});
});
</script>
- 47. くわしく
• Using the Twitter Search API
https://dev.twitter.com/docs/using-search
- 50. 参考
• {less}
– http://lesscss.org/
– http://less-ja.studiomohawk.com/
• {less}.app
– http://incident57.com/less/
• win less
– http://winless.org/
• crunch (AIR)
– http://crunchapp.net/
• Win lessとcrunchは使ったことないけど＞＜
- 58. まとめ
• コンパイルできるので、案件に関係なく、
開発時に導入が可能なので素敵。
• コンパイルして使う分には、デメリットも
特にない。
• ソースの二重管理にならないよう、リリー
ス後の修正方法等のフローは事前検討が
必要（それか、開発時だけつかって、リ
リース後はコンパイル結果をメンテナンス
するのもありだと思う。）
