株式会社skalのスタッフブログです

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQueryを使ってみる!

Webデザイナーにもとっつきやすい、

CSSのセレクターに近い記述方法、

シンプルで軽快、将来有望などなど

評判がとてもいいJavaScriptライブラリjQueryを使ってサンプルを作ってみました!
Flashのこの先がとても心配になってきたので、なので…

今回は初歩的な、春夏秋冬説明アコーディオンパネルを作ってみました。

0626.jpg

矢印のアイコンをクリックするとパネルが出てきて、

$(".up,.down").click(function(){
$("div#menu_list").slideToggle("slow");
$(".up").toggle(); $(".down").toggle();
return false;
});

でてきた春、夏、秋、冬、アイコンにマウスオーバーすると説明を表示させます。

$("#icon1").mouseover(function(){
            $("#skal_blog_content_haru:not(:animated)").fadeIn(); }) ;
$("#icon1").mouseout(function(){
         $("#skal_blog_content_haru").hide("slow"); });

jQuery比較的簡単ということらしいのですが……

もっと勉強してあざやかーーなスクリプトを組めるようになりたいです。

また何か出来たら公開したいと思います。

サンプルページ

参考にさせて頂いているサイト

http://ascii. jp/elem/000/000/438/438206/

http://gihyo.jp/design/serial/01/jquery-site-production

http://semooh.jp/jquery/


skal (スコール)
スポンサーサイト

梅雨入りして…

ジメジメムシムシしてそろそろ例の昆虫の季節だなーなどと思ったので…

web制作者にはおなじみ、アイコンが例の昆虫にしか見えない「Firebug」をご紹介します。

chromeよりFirefoxのFirebugの方が今のところ使いやすいと思います。
https://addons.mozilla. jp/firefox/details/1843

firebug11.jpg

HTML、CSSの要素の調査からリアルタイムで編集、デバック出来る素晴らしーーいアドオンです。

web制作にかかわる方には必須のアドオンではないでしょうか。

僕はこのアドオンにお世話になりっぱなしです。
知らないというweb制作者の方はぜひお試しくださいです。

ちなみにこのアイコン、蛍らしいのですが…
皆さんどうやらやっぱり気になるみたいで試しに

「Firebug アイコン」

で検索してみると、アイコンの変え方がいっぱい出てきましたw


skal (スコール)

普段は捨てますが

先日仕事から帰宅するとポストに、
山盛りのチラシが…
いつものことなので普段通り捨ててしまおうと思ったのですが、
その中に一通、 手作りのかわいいスタンプが押してある封筒を発見。

内容を確認してみると、中身はよくあるマンション分譲のチラシ。
しかし、チラシの仕様が小学校のお便り風になっており
中にもスタンプが使われていてなかなかかわいい。
お便り風ですが、デザインもチープではなくマンションのうりも
「小さいお子さんがいても安心」みたいなことが訴求されていました。

内容とデザインがマッチしており、かわいらしいデザインも
自分の よく見るマンション分譲のチラシと違って意外だったので
思わずまじまじと 観察してしまいました。

自分もいろんなデザインを見てもっとアイディアの引き出しを 増やさなければ…。

skal (スコール)
20100605_1.jpg  20100605_2.jpg
20100610_3.jpg


Iwan Baanという建築写真家が撮ったSelgas Cano Architecture Officeという会社

名前からしてたぶん建築の会社だと思うけど、
きっとシャレオツな建築を生み出しているに違いない!

skal (スコール)


http://www.iwan.com/Selgas_Cano_Office_Madrid.php?plaat=Selgas-Cano-Office-2885. jpg

text-shadow

最近HTML5、CSS3、などなど新しい技術がどんどん公開されていますね。

ブラウザ対応の関係もあり、本格的に使えるということはまだなさそうですが、

積極的に取り入れていきたいと思っています。


…という訳でとりあえず手始めにtext-shadowプロパティを使ってデモページを作ってみ ました。

text-shadow自体は新しい技術という訳ではないですが…


http://www.sk al-design.com/web_sample/shadow/sample.html


text-shadowプロパティが表示されるブラウザ(Firefox、Google Chromeなど)で見てくだ さいね。

これからも色々と試して公開してみたいと思います。

skal (スコール)

 | HOME | 

Calendar

« | 2010-06 | »
S M T W T F S
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 - - -

Recent Comments

Appendix

skalDesign

skalDesign

skal_design
スコールデザインです。

グラフィックデザインやウェブデザインのことなどいろいろと更新していければな…と考えています。

営業時間のご案内
[月~金] 9:30~18:30

電話番号
052-861-1070

住所
〒467-0037
名古屋市瑞穂区弥富町上山157-1 107号

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。