第8回 3月11日(月曜日)
WEBクリエーターセミナー

日本語が使える便利な開発テスト環境を見つけましたのでご紹介します。
http://jsbin.com/ レジスターしてみてください。

toggle.html  を使って復習してみます。ダウンロードも準備しました。
<!DOCTYPE html>  <!-- ← html5のドキュメント宣言 ゼンコードでhtml:5 ですぐ書ける! -->

 <html lang="ja">  <!-- // html で始まる -->
<head>
 <meta charset="UTF-8">  <!-- // 文字コードを指定 -->
 <title>jQueryの練習</title>  <!-- // タイトル  -->
</head>
 <body>
 <p><b>toggle</b>はクリックを繰り返すこと</p>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>  //←jquery を入れる場所は本文でもOK
<script type="text/javascript">
 $(function(){
    $("div").toggle( //divをトグルします!
             function(){ //最初の命令 
                         $(this).css("background","blue");
                             }
, //命令終わり , でつなぐ。
              
function() {
                          $(this).css('background', 'red');
                               }

                           
); //←toggleの命令の終わり
                     
}
   );
</script>
 <!--下は赤い四角が表示されています -->
 <div style="width:100px;height:100px;background:red"></div>
</body>
</html>
基本を理解して、書きながら、こんなことはできないかなと調べて、書換えてみることで、おもしろい記事も見つけることができ、それをヒントにアイデアを練られるようになると思います。
いきなり色が変わるのではなく、しばらくたってかた変えることはできないか…と考えて調べると
setTimeoutというものがあります。 setTimeout.html
これはjqueryというより、javaScriptのようです。 animate.html 
作ってみたので解説します。
また、jqureyには様々なプラグインがあります。
色をじわっと変わるcolor プラグインを使ってみます。 ネタ元 jqueryは簡単なので、やってる人も多くいくらでも見つかります!

しかし…まったく難しくなく今風にできるUIを使いこなしてみよう!
jQuery UI を使えば CSS設定しなくても簡単にいろんなものが作れます。

アコーディオンを瞬時に作る

jQuery UI Demoを眺めてみます。

さらに無料でたまにもらえるお得なサイトにも登録しておきます。
Codegrape

 こんなメールが来ますのでfree というのをクリックします!
ログイン状態で無料でもらえます!



後、おまけで、http://www.csstemplateheaven.com/ も時間があったらご紹介します。 ←word press と twitter bootstrap で作られています。

#01 Twitter Bootstrapの基礎


と、言うわけで、この頃似たようなツイッターライクなサイトが多いので、やはり基本をキチンと勉強してちょっとしたオリジナリティや便利なものを開発していくようにしましょう。




ċ
animate.html
(2k)
さいきゆみ,
2013/03/10 11:45
ċ
setTimeout.html
(1k)
さいきゆみ,
2013/03/10 11:44
ċ
toggle.html
(1k)
さいきゆみ,
2013/03/10 10:36