アーカイブ2012年9月2012年8月2012年5月2012年4月2012年3月2012年2月2012年1月2011年12月2011年10月2011年8月2011年7月2011年6月2011年5月2011年4月2011年3月2011年2月2011年1月2010年12月2010年10月2010年9月スマートフォンに。コメントはまだありませんデザイナーの植村です。Queriesがあります。簡単に言えば、ウィンドウサイズによってレイアウトを変更し、マルチデバイス対応とする技術です。別々にサイトを用意する必要がないのが最大のメリットです。Queriesですが、スマートフォンなど画面の小さなデバイスで閲覧することを考慮しながらデザインする必要があるため、あまり凝ったデザインには向いてません。既存のjQuery(イメージスライダー等)が使いにくかったりちょっとデザインに制約が出てくるんですね。そこで今回紹介するのは、iPhoneやiPadのような小さいウィンドウサイズでも大きさを自動で調整してくれるjQueryのイメージスライダーです。Queriesとうまく併用すれば、どのデバイスからも問題なく閲覧できるイメージスライダーとして、デザインに貢献してくれると思います。1.Slideshttps://github.com/nathansearles/Slides見た目がすっきりしていますし、スタイリングが容易に可能。容量も4KB程度しかないので、スマホでももっさりせず、快適に閲覧できます。2.flickslidehttp://blog.kaleido-jp.net/web/フリックスライド/国産です。Androidでの動作をかなり意識されて作られています。解説も日本語なので、取っ付きやすいと思います。緻密に計算されたインターフェースが秀逸!3.FLEXSLIDERhttp://flex.madebymufffin.com/ソースがシンプルなので気軽に実装できますね。動きも滑らか!おすすめです。Sliderhttp://www.kara-full.com/hibi/etc/110606_touchswipeslider.htmlこちらも国産です。制作者の方に感謝!旧ブラウザ対応版とCSS3版が用意されています。5.Rotohttps://github.com/rdallasgray/roto上の三つとは若干違うタイプですが、一応。縦横にスライドさせられる、カルーセルタイプのプラグインです。Queriesと併用する場面が多くなると思います。Queriesは「スマートフォン最適化」と呼べるほど合理的なテクニックではないということ。無駄に大きな画像を使用(環境に応じて縮小表示)したり、CSSが膨れ上がったりするデメリットも抱えています。単純にPCサイトのイメージスライダーとしても使えるので、覚えておいて損はないと思います!今後もレスポンシブWebデザインの動向には目が離せませんね。台湾現地からオンリーワンのアジア情報メルマガを配信予定(2012年1月スタート)登録はこちらに空メールを。article﻿コメントを残す返信をキャンセルする。