タッチデバイス対応、HTML5で構築したWebサイト向けのUI用フレームワーク・Kendo UI HTML5製のWebサイト向けUI専用の フレームワーク・Kendo UIのご紹介。 iPhoneなどのスマートフォンや、iPad などタブレットデバイスにも対応したWeb サイトのUI設計用に作られたようです。 使いやすいかどう...2011.08.05 | 17時11分10秒cssやプログラミングWebデザイン
Facebookページをアピール出来るソーシャルプラグイン・Likebox(いいね!ボックス)をオリジナルデザインに変更する方法 Facebookページもかなり普及したようで、 様々なサイトやブログでソーシャルプラグ インの定番のLikeboxを見かけるように なりました。最近知ったのですが、この Likeboxはデザインを変更する事が出来る ようなので、今...2011.08.04 | 11時18分48秒cssやプログラミングWebデザイン
iPhoneやiPad等にもWebサイトを最適化するレスポンシブWebデザイン構築に役立つフレームワークやTipsいろいろ iPhoneやiPadなどの人気デバイスに Webサイトのレイアウトを最適化する為 の方法の一つとして、Media Queriesを 使ったレスポンシブWebデザインの構築 が注目されつつあります。当サイトでも 何度か取り上げてい...2011.08.02 | 11時03分31秒cssやプログラミングiPhone / iPadWebデザイン
HTML5やCSS3などの大まかな概要を1ページ内に詰め込んだHTML5 Poster 地味に便利かなと思ったのでシェア。 HTML5やCSS3の概要、このタグで 何が出来るのか、等の情報を1ページ に詰め込んであり、mozillaのドキュメント ページにサクッと飛べるようにしてあり ますので、大雑把ですけどチートシ...2011.08.01 | 10時21分04秒cssやプログラミングWebデザイン
グリッドレイアウトを意識したレスポンシブWebデザインをSass/Compassを使って構築する為のサンプル なかなか珍しかったので備忘録。個人的 にも注目しているMedia Queryを使った レスポンシブWebデザインの構築を、 Sassをサポートしたcssフレームワーク、 Compassを使って行える、というサンプル。2011.07.30 | 12時20分35秒cssやプログラミングiPhone / iPadWebデザイン
jQuery Mobileを使う際に知っておくと役立ちそうなTipsや情報のまとめ jQuery Mobileに関して少し整理したいので まとめました。JQMを使うときに知っておくと 便利そうなTipsとか情報とか。いくつか自分 の記事も含まれているのが若干アレなんです が、ご了承ください。内容はコードのみ、では ...2011.07.28 | 10時19分01秒cssやプログラミングiPhone / iPadjQueryWebデザイン
Media Queryを使用したレスポンシブWebデザインの構築時にはResponsivepxっていうツールが超オススメです たまたま見つけたツールが泣きそうなくらい 便利だったのでシェア。Media Queryを使用 したレスポンシブなWebデザインの構築時 にとっても役に立ってくれるツールです。URL を指定するだけで、あとは幅を調整しながら レイア...2011.07.27 | 11時03分18秒cssやプログラミングiPhone / iPadWebサービスWebツールWebデザイン
横に飛び出すメガメニューを実装するjQueryプラグイン・JQUERY VERTICAL MEGA MENU 最近かなり見かけるようになった印象の、 大量のコンテンツを格納するメガメニュー の横に飛び出すタイプ。jQueryで実装して います。メガメニューはECサイトやポータル サイトなどなど、階層の深いWebサイトにて ユーザビリティ向...2011.07.26 | 10時19分20秒cssやプログラミングjQueryWebデザイン
Googleアナリティクスの統計をjQuery Mobileでも閲覧できるようにするサンプル 需要があるかどうか分かりませんが、 1%の方にでも参考になればと思い 記事にしてみます。アナリティクスの 統計をスマフォで確認出来るように する為のサンプル。jQueryMobileを 使います。2011.07.21 | 10時28分42秒cssやプログラミングiPhone / iPadjQuery
スマフォ向けサイト構築等に便利そうな、指定サイズに応じてclass名を加えてくれる軽量jsライブラリ・Selector Queries これはかなり便利そうだったので備忘録。 ディスプレイサイズに応じて指定した要素 にclass名を加え、そのclassを使ってデザ インする事でレスポンシブなWebデザイン を設計出来るようにする為のライブラリ。 かなり便利そうです...2011.07.20 | 11時09分44秒cssやプログラミングiPhone / iPadWebデザイン
フォームのselect要素内をインスタンス検索出来るようにし、美しいデザインにも変更できるjQueryプラグイン・Chosen 結構便利そうだったのでご紹介。フォームの select要素内に羅列されたoptionから、入力 するだけで結果を表示するインスタンス検索 を可能にするスクリプト・Chosenです。表題 にはjQueryプラグインと書きましたが、この...2011.07.19 | 11時08分26秒cssやプログラミングjQueryWebデザイン
タイル状に並べられたイメージギャラリーごとドラッグ可能にするmootoolsプラグイン・The Wall 3連休をいかがお過ごしでしょうか。僕は 全く関係ないので普通に記事を書いて まいります。タイル状に並べられた画像 ギャラリーをそのままドラッグで動かせる というmootoolsのプラグイン・The Wall が結構クールで素敵でし...2011.07.18 | 11時25分00秒cssやプログラミングWebデザイン
タブやアコーディオンなど、様々なUI構築用のjQueryプラグイン30個以上をセットにしたフレームワーク・ jQuery EasyUI 普段からよく見かけるjQueryによる タブやアコーディオンなどのUIの構築 を簡略化するためのフレームワーク・ jQuery EasyUIのご紹介です。プラグ インは30個以上あり、どれもシンプル なものになっています。2011.07.14 | 10時19分56秒cssやプログラミングjQueryWebデザイン
ベーシックで汎用性のありそうなjQueryイメージスライダー・The Lof JSiderNews クロスブラウザに対応したベーシック で汎用性のありそうなスライダーを 実装出来るjQueryプラグインのご紹介。 The Lof JSiderNewsは派手な装飾も 無く、シンプルで欲しい機能は揃え てくれている印象です。2011.07.12 | 11時15分18秒cssやプログラミングjQueryWebデザイン
jQueryでWebサイト内を無限にスクロール出来るようにする ちょっと語弊があるかもですけど、無限に スクロール出来るように見せる、みたいな 方法です。これが何の役に立つんですか とか言われると困っちゃうんですけど・・・ こういうのがあってもいいかなと思ったの でちょっと作ってみました。実装...2011.07.09 | 10時26分15秒cssやプログラミングjQueryWebデザイン
CSS3のtext-shadowを使ったテキスト装飾のサンプル集 たまに使うので自分用にメモします。 css3のtext-shadow等を使用した テキスト装飾のサンプルコードの 備忘録です。工夫すればいろいろ と作れるんでしょうけど、とりあえず よく使うものをピックアップします。2011.07.07 | 10時38分39秒cssやプログラミングWebデザイン
スクロールに応じて要素がアニメーションする、視差効果(パララックス)を取り入れたWebデザイン例とTipsいろいろ 最近ちょくちょく見かけるようになったので調べた事をメモ。スクロールすると、複数要素が、それぞれアニメーションするようなWebデザイン。視差効果を生み出すようなパララックス効果を取り入れたものや、ユニークにアニメーションするものなどなど。2011.07.06 | 11時13分36秒cssやプログラミングjQueryWebデザインインスピレーション
スマフォにも対応・ディスプレイサイズに自動で幅調整するレスポンシブなjQueryイメージスライダー・Blueberry どのようなディスプレイサイズでも自動で レイアウトを調整してくれるレスポンシブな イメージスライダーを実装出来るjQueryプ ラグイン・Blueberryのご紹介です。イメージ スライダーを取り入れているサイトは多い のでこうい...2011.07.05 | 10時31分19秒cssやプログラミングiPhone / iPadjQueryWebデザイン
制作中のWebサイトにシンプルなグリッドを表示させる制作補助系jQueryプラグイン・Simple Grid 昨日TwitterでもPostしたんですけどやっぱり たまに使いそうなのでメモ。数値を設定する だけで簡単にシンプルなグリッドを重ねる事 が出来るWeb屋さん向けのjQueryプラグイン・ Simple Gridです。いちいち拡張や...2011.07.03 | 11時00分08秒cssやプログラミングjQueryWebデザイン
HTML5で実装する動画コンテンツに字幕を付けるライブラリ・Cuepoint JS なかなかユニークだったのでメモがてら。 HTML5で実装する動画コンテンツに字幕 を加える、というjsライブラリです。思いつき ませんでしたけど、こう言うことも出来てし まうんですね・・・HTML5ってやっぱり凄い かも・・(今さ...2011.07.02 | 14時38分54秒cssやプログラミングWebデザイン動画関連
並べられたアコーディオンパネルを開くと幅が可変して可読性を高める・Jquery Animated Grid 横に並べられたアコーディオンパネル を開くと、幅がアニメーションで広がり つつ、隣のアコーディオンが狭くなる ので、全体のレイアウトを維持できる というプラグイン。幅を気にしなくて いいのは場合によっては助かるかも。2011.06.29 | 15時42分15秒cssやプログラミングjQueryWebデザイン
iOS4.2+ / モバイルSafariの「振る動作(シェイクジェスチャー)」をjQueryを使って検知する iPhoneを振る動作(シェイクジェスチャー) によって呼び出されるモーションイベント をjQueryで検知するgShakeのご紹介。 iOS4.2以上 / Safariでは加速度センサー をJavaScript経由で使うことが出来...2011.06.29 | 10時48分39秒cssやプログラミングiPhone / iPadjQueryWebデザイン