疑似クラス
例えばリストの最初(最後)だけ罫線を消したい場合に使うのが:first-child(:last-child) とても便利ですよね~最後だけクラスを指定しなくていいので項目が増えた場合でも更新が楽 これらがIEに対応してたらもっとえぇのに・・・と何度思ったことか・笑 その場合は <!--[if lt IE 9]> <script...
View Articleパララックス効果を利用したwebデザイン
最近ミーティングやYammerで、ちょくちょく登場する、パララックス。 ちょっとおもしろそうと思い、プチ勉強してみました。 そもそもパララックス効果って何? みる場所によって景色の見え方が変わる(ずれる)効果のことです。 例えば、電車の窓から見える景色のような 遠くのものほどゆっくり、近くのものほど早く流れるかんじのことです。 これをブラウザで演出することで、サイトに遠近感を出すことができます。...
View Articleループに関する覚書
ループと言えばスクリプトになくてはならない処理体系ですよね。 JSが苦手と思ってたときは配列やらループやらを全然理解できてなかったことが一因でしたが、 それを自分の中で消化できたら途端に面白くなってきました。 それで、ループ(配列を処理する場合)と一言で言っても色々な書き方があるのだなあとわかったの覚書として残しておきます。...
View ArticlejQueryで高速に要素を選択する場合の書き方
TwitterでJSのパフォーマンスを計るサイトを知ったのでテストしてみました。 前回のループの速度チェックではなく、チラッとだけ話題にしたjQueryで要素を選択する際の指定方法についての調査です。 http://jsperf.com/londoner25aaa...
View Article外部リンクに自動でtarget=”_blank”を書き込むスクリプト
標題の件をご所望のようなのでスクリプトを書いてみました。 さくっと作ったのが以下のスクリプト var siteDomain = location.href.split('/')[2]; var $a = $('a', '#main article .article-body'); $a.each(function(){ var $this = $(this); var $href =...
View Articleフリックに対応したスライドショーjCarouselをイジってみる
たまにはマジメな話を。。。 とある案件でレスポンシブルなサイトを制作することになったのですが、 その中でスライドショーを実装する場所が ・出来れば各デバイスごとに見え方を最適化したい ・フリック対応したい とゆー希望が うん、そうだね、みんな好き勝手言うね そこで先生に泣きついて聞いてみると、 「jCarouselがいいんでね?」 との回答をいただきましたのでそれをコチョコチョいじってみることに...
View Articleフリックに対応したスライドショーを作ってみる(前回の続き)
どうも、髪を早く切りに行きたいpearmasterです 案件が立て込んでいる時に限って当番がまわってくるのは最早仕様ではないかと思ってしまうところ・笑 以前フリックに対応したスライドショーjCarouselをイジってみるという記事で非完全ながらもデバイスに応じたスライドショーを作ってみたのですが、 これがまーAndroidでの動きがダメダメすぎるorz...
View Articleレスポンシブなカルーセルを作る。
レスポンシブ対応のスライドショーやカルーセルプラグインはいくつかあるのですが、 今回は、画面サイズによって表示する数も変えるやつを実装してみました。 (といっても自分で一からJSを書いたわけではないです…) Demo 対応ブラウザ Firefox Chrome IE8~ iPhone / iPad(Safari) Android (※機種によっては怪しいかも…) 使ったjS...
View Articleスマホサイトで傾き判定のJSを入れるときの注意。
スマホサイトの案件で、縦横傾けた時の判定の処理をJSで取得していたのですが、 Androidさんでおかしな挙動をしていたのでちょこっと調べてみました。 to-Rさんの記事「続Androidブラウザでviewportのwidth指定」のソースを参考に、viewportのwidth指定をしていたのですが、会社にあるAndroid2.2だと若干挙動が怪しい…...
View Article
More Pages to Explore .....