講義の備忘録
とりあえずBootstrapはどんなものか分かりました。 http://felica.boy.jp/bootstrap/index.htmljQuery Mobile並に癖があるフレームワークですね。 デザインも近代的だし、ものにしたら時間を短縮してリッチなコンテンツが作れそうです。 responsiveのcssを読…
全て１から書きました。 すごい難易度高かったです。 HTML5で書いて、firefoxにも対応！ http://felica.boy.jp/responsive/sample2.html HTML <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>PICKUP×STREAM</title> <link rel="stylesheet" href="reset.css"> </link></meta></meta></head></html>
http://felica.boy.jp/responsive/sample sample.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>メディアクエリ</title> <link rel="stylesheet" href="style-l.css"> </link></meta></meta></head></html>
http://felica.boy.jp/api/qrcord.htmlダウンロードフォルダに自動保存されます。 記述ミスとかで30分くらいかかりました・・・ <html> <head> <meta charset="UTF-8"> <title>QRコード</title> </head> <body> <p>QRコードにしたい文字を入力してください。</p> <form action="qrcord.php" method="get"> キーワード：<input type="text" name="keyword" size="40"> </form></body></html>
Google APIをつかって、QRコードを生成http://felica.boy.jp/api/qrcord.html <html> <head> <meta charset="UTF-8"> <title>QRコード</title> </head> <body> <p>QRコードにしたい文字を入力してください。</p> <form action="qrcord.php" method="get"> キーワード：<input type="text" name="keyword" size="40"> </form></body></html>
HeartRails Capture（サムネイル画像／PDF ファイル作成サービス） リンク：http://capture.heartrails.com/Google Developer（QRコード生成） リンク：https://developers.google.com/chart/?hl=ja結果：http://felica.boy.jp/api/heartrails.html
リストのふわふわした表示 @-webkit-keyframes ticker { /* 1行目 */ 0% { opacity: 0; -webkit-transform: translateY(0); transform: translateY(0); } 10% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: …
できました。 ナビゲーションの作り方が勉強になりましたねえ。http://felica.boy.jp/mobilesite/chapter4/
パッキーノさんのお店の実物はみてないけど、自分のイタリアンのサイトのヘッダーイメージってこんな感じなんだよなあ・・・ ちょっと、作ってみました。
フォームをいろいろと実装。 widthを狭くしないと崩れちゃいますねー。 http://felica.boy.jp/jQueryMobile/form
Theme Rollerをつかって、配色のカスタマイズ。 んー、こういう便利なツールがあるんだなー。 ここでKulerが使われているなんて。http://felica.boy.jp/jQueryMobile/theme
data-transitionの効果がおもしろかったので、まとめてみました。 turn flow slidefade の3つは古いバージョンでは動かなかったです。 全てダイアログ表示にしています。http://felica.boy.jp/jQueryMobile/dialog
出来ました。 制作時間：50分 左から1 2 3 4 5番目の画像をhoverしたときに、全てポジションを変えています。 http://felica.boy.jp/popup/
EasySlider http://felica.boy.jp/slider/ mousewheel http://felica.boy.jp/slider/index2 ROTATING IMAGE SLIDER http://felica.boy.jp/slider/index3
このテキストはPHPで記述しています</div>');?>
完成しました。 中々手ごわかったですよ。
コメント部分なかなか手ごわかったです。 固定ページは楽でした。
min版じゃなくてmainをいじりました。http://felica.boy.jp/grid/短冊を中央揃えしたかったけど、CSSでは不可能でした。
http://felica.boy.jp/jquery/index5.html
CSSでアコーディオンの動きを再現する http://felica.boy.jp/cssui/index.html CSSでタブのドロップダウンを再現する http://felica.boy.jp/cssui/index2.html
jQueryでタブを作る。 jQuery UI http://felica.boy.jp/jquerytab/index.html jQuery Tools http://felica.boy.jp/jquerytab/index2.html Yetti http://felica.boy.jp/jquerytab/index3.html タブ切り替えパネル http://felica.boy.jp/jquerytab/index4.html
制作時間：20分 ライトボックスのアンカーに気づくまで結構かかった・・・ http://felica.boy.jp/jquery/index3.html
制作時間：15分 http://felica.boy.jp/jquery/index2.html <html> <head> <meta charset="UTF-8"> <title>jQuery UI Example Page</title> <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.21.custom.css"> <script src="js/jquery-1.7.2.min.js"></script> </link></meta></head></html>
jQueryの練習（1）hide http://felica.boy.jp/jquery/0712.htmljQueryの練習（2）hide & show http://felica.boy.jp/jquery/0712-2.htmljQueryの練習（3）アコーディオン http://felica.boy.jp/jquery/0712-3.html
ちょっとガタガタしちゃいます。 http://felica.boy.jp/dom/dom2.html
なんか難しかった。 もっとリアルにみせたかった・・・
