高槻の工務店土屋様のリニューアルの依頼を受けました。
前からやってみたいと研究をちょろちょろしていたjQuery。これまでサンプルをそのまま貼り付けることしかやっておりませんでしたが、組み合わせてアコーディオン（←西畑さんの連載でオススメです）の中に、画像をフェードインアウトする表示を実現してみました。今回いろいろ勉強になったので記録しておきます。 参考にしたのはやっぱりこの本です。
作ったサンプルはこちらです。
今までフラッシュでないとできないようなことがjqueryでできるというのがうれしいですね。
アコーディオンって記事はよく見ますが実際やってるの見たことがあまりなく、メニューくらいにしか実装できにくそうな感じなんですよ。 前コレ作ってみて、結局ボツになったので、さらに改良して作りましたが、これもボツになった～。誰かこれのカッコよさわかって欲しい…
アコーディオン表示は、こういう感じだと＜dd＞＜/dd＞の中に当然画像は欲しくなる。ところが画像を入れるとironではちゃんと表示されますが、ie7で見ると画像が右側に飛び出して見えてしまうんですよね。
で、これを解消するために私は初めて自分でjqueryを書いてみました。何のことはないです。
$(document).ready( //読み込まれた時に、としたら初期値で表示されなくなる。 で、後はクリックしたら表示しろと言うのを単純に書きこんでいきました。
function(){
$('#photo1').css("width","0px"); // id #photo1 のcssのwidthを0にしろ。
$('#photo2').css("width","0px"); // id #photo2 のcssのwidthを0にしろ。
});
$(function(){以下略。
$('#step2').click(function(){ //step2をクリックしたら
$('#photo1').css("width","550px"); //photo1 をwidth 550にしろ。
$("#photo2").css("width","0px"); //photo2をwidth 0にしろ
});
});
CSSでwidthの調整だけだと、fadeアニメがIE7で残って表示されてしまいうまくいかず、よく考えたら
$('#photo1').css("display","none");
$('#photo2').css("display","block");
displayで切り替えたらいいということに半日かけて気がつきました！ もう！バカ！
でも、お陰でムチャオプションがある優秀なCycle Pluginというのをみつけたからよしとしよう！
ムッチャ長々とダサイ書き方してしまいましたが、もしかしたら西畑さんの本をもっと丁寧に勉強したら、オシャレに書けるようになるのかな？
こういうjQueryの書き方についてのフォーラムってどっかないですかね？ 私がやろうかしら…なんちゃって。
聞いてばかりの私ではムリだと思うので誰か賢い人やってほしです。 PHP proで質問するのもへんだし…。 でも、本当にこれで書き方いいのだろうかというのを教えてもらえる人がいないというのは非常に不便ですなぁ。最近bloggerの海外で買った（といっても3ドルとかですが…）デザインの表示がおかしいので自分で書きなおしてみたのですが、近畿宮崎のブログの下の方にある次の記事への表示が最初の３ページだけ表示が少ないの。５ページになってから5個だけになって安定するという…のがど～してもキレいにならないの。 初期値のままだとなんか知らんけど表示されないページがあるのですよ。
誰かに教えて欲しいんだけどなぁ。
↑後日先生が見つかる…感激 →参考記事
先日、高槻のパソコン教室学ぶ屋本舗の恋ちゃんとリナックス研究会を開催しまして、3時間ほど超ロースペックパソコンに入るLinuxを研究しました。 DSLっていうのがあると知りました。私なんか全然基礎を知らないので1バイトとかメガバイトとかの意味とか…感覚でやってきましたので、古くからのパソコンの歴史を知っている恋田さんの知識はとてもありがたく…。充実した時間であった。恋田さんと言うていたのですが、高槻でパソコンをいじりながらお酒やお茶が飲めるカフェを経営したらおもしろいじゃないかと…。部品売ったりとか。お茶代でちょっとしたパソコンの疑問を教えてもらえたら嬉しいと思うけどな誰か出資してくれんやろか？な～んて暇ないんだけど。
聞いてばかりの私ではムリだと思うので誰か賢い人やってほしです。 PHP proで質問するのもへんだし…。 でも、本当にこれで書き方いいのだろうかというのを教えてもらえる人がいないというのは非常に不便ですなぁ。最近bloggerの海外で買った（といっても3ドルとかですが…）デザインの表示がおかしいので自分で書きなおしてみたのですが、近畿宮崎のブログの下の方にある次の記事への表示が最初の３ページだけ表示が少ないの。５ページになってから5個だけになって安定するという…のがど～してもキレいにならないの。 初期値のままだとなんか知らんけど表示されないページがあるのですよ。
誰かに教えて欲しいんだけどなぁ。
↑後日先生が見つかる…感激 →参考記事
先日、高槻のパソコン教室学ぶ屋本舗の恋ちゃんとリナックス研究会を開催しまして、3時間ほど超ロースペックパソコンに入るLinuxを研究しました。 DSLっていうのがあると知りました。私なんか全然基礎を知らないので1バイトとかメガバイトとかの意味とか…感覚でやってきましたので、古くからのパソコンの歴史を知っている恋田さんの知識はとてもありがたく…。充実した時間であった。恋田さんと言うていたのですが、高槻でパソコンをいじりながらお酒やお茶が飲めるカフェを経営したらおもしろいじゃないかと…。部品売ったりとか。お茶代でちょっとしたパソコンの疑問を教えてもらえたら嬉しいと思うけどな誰か出資してくれんやろか？な～んて暇ないんだけど。
私が作りました今回のアコーディオンは、背景画像を設置しております。その上にメニューをpngで作っているので、ページがめくられているというより、文章だけが変化するような感じでおもしろいと思うのです。 これを書いたCSSですが、下の方がmarginだとブラウザによってうまく表示されないのね。
これも勉強しましたわ。
で、今回発見したのですが、ironのIE tabはサイトの変更にすぐに対応しない。どうもキャッシュが残るらしい。 やはり細かい検証をするのはいつものIEテスターが便利ですね。IEtesterでチェックしたらironのIEtabにも反映されるという…。ちょっと悩みましたわ。
話元にもどりましてjQueryですが、書き方はもっさいけど、これなら私にも分かる感じのプログラムだと思いました。もっと勉強したいです。例えば、クリックしたら背景画像が変更されるとか（読み込み時間もあるから下の方だけでも…）いろいろできたらおもしろいよね。画像重ねていく感じで条件で例えば吹出し入れて会話しているみたいにするとか…。というわけで、やってみました。これも単純にバックの#mainにデフォルトでは#main2 #main3のバック画像にpng画像を準備しておいて、初期値ではそれぞれのバック画像をnoneにして、クリックで指定するという方法をとりました。
これでいいのでしょうか？ 偉い人にスッキリした書き方を教えて欲しいです。
もうFlashいらないじゃないかと思いましたなぁ。これができるとですね。条件で右下にボタンを一つだけ出して、確実にお客さんが求めるページに導くとかいうこともできますなぁ。 これはホンマに便利だなと。 jQuery ホンマに楽しい！これはスゴイと。 実感いたしました。
最後に、フェードイン・フェードアウトする写真の周囲にIEだと線が出て、それに超悩んでしまったのですが、何のことはないリンクがあるので
img{border: none;}
を入れないといけないことをすっかり忘れていました。 ironだとキレイに表示されるものですから…。
ほんまに私ってコツコツなんだなと。作ってもすぐ忘れるのでこのブログに記録しているのだった。
一生懸命に作ったのですが、なんか横がいいとか言われて、作ってみることにしました。
id tab というのも便利そうですね。 なんでもありますね。 だいたいもうフラッシュいりませんな。
mootoolで見つけたこれがよさそうです。 ←画像で作るとなると結構大変だったができた…。詳しい作り方はまた解説します。 でも、上の方がいいと思うけどなぁ…。 画期的なんだけどなぁ。
これがhtml5なのね～みたいな。html5便利そうだけど。実際使う日はいつなんですかね。
html5の本の見本のサイト
もうスマートフォンだよねぇ。あせっちゃうよ。
当面こういうのでごまかす
html5 で作られた刺激的サイト その前にjquery もろくにできないのに…
先生がhtml5でＣＭＳテンプレートを…尊敬＝
ゆっくり読みたいhtml5とPHPについて英文
html5の本の見本のサイト
もうスマートフォンだよねぇ。あせっちゃうよ。
当面こういうのでごまかす
html5 で作られた刺激的サイト その前にjquery もろくにできないのに…
先生がhtml5でＣＭＳテンプレートを…尊敬＝
ゆっくり読みたいhtml5とPHPについて英文
とりあえず、これくらいならわかりそうだから、こんなんしてみたい。リレイで落としてきたらいいんやんなぁ。 cdくるくるもなんとなくわかる気がする～。
チューリップ可愛い＝、音楽ももらえるオススメです。
でも恐れながら申し上げますが…デザインがデザインがと言う人多いですけどね、どうせ私はセンスないですけどね。
見やすくて、さっと目的に到達できて、さっと理解できて…わかりやすいのが重要ですよ。
凝りすぎると伝わらないというのはあるんですな。
こういう目的をしぼったのが好き←デザインを雨の音で考えませう… 愛用してます。
デザイン。デザイン言う人の仕事はできない…私には。 精一杯はやりますが。
0 コメント :
コメントを投稿
コメントありがとうございます。