iPhoneやiPad等にもWebサイトを最適化するレスポンシブWebデザイン構築に役立つフレームワークやTipsいろいろ
iPhoneやiPadなどの人気デバイスに Webサイトのレイアウトを最適化する為 の方法の一つとして、Media Queriesを 使ったレスポンシブWebデザインの構築 が注目されつつあります。当サイトでも 何度か取り上げてい...
Webデザイン
HTML5やCSS3などの大まかな概要を1ページ内に詰め込んだHTML5 Poster
地味に便利かなと思ったのでシェア。 HTML5やCSS3の概要、このタグで 何が出来るのか、等の情報を1ページ に詰め込んであり、mozillaのドキュメント ページにサクッと飛べるようにしてあり ますので、大雑把ですけどチートシ...
グリッドレイアウトを意識したレスポンシブWebデザインをSass/Compassを使って構築する為のサンプル
なかなか珍しかったので備忘録。個人的 にも注目しているMedia Queryを使った レスポンシブWebデザインの構築を、 Sassをサポートしたcssフレームワーク、 Compassを使って行える、というサンプル。
商用利用OK、リンクや著作権表示も不要の女性の写真素材専門サイト「モデル・フォト」
女性の写真素材専門のモデル・フォトは、 商用利用も可能で、リンクや著作権表示 も不要。完全に無料で使える人物写真 素材サイトです。簡単なアイキャッチ等に 使いやすそうな印象でした。なによりリンク 不要というのは貴重ですね。
jQuery Mobileを使う際に知っておくと役立ちそうなTipsや情報のまとめ
jQuery Mobileに関して少し整理したいので まとめました。JQMを使うときに知っておくと 便利そうなTipsとか情報とか。いくつか自分 の記事も含まれているのが若干アレなんです が、ご了承ください。内容はコードのみ、では ...
Media Queryを使用したレスポンシブWebデザインの構築時にはResponsivepxっていうツールが超オススメです
たまたま見つけたツールが泣きそうなくらい 便利だったのでシェア。Media Queryを使用 したレスポンシブなWebデザインの構築時 にとっても役に立ってくれるツールです。URL を指定するだけで、あとは幅を調整しながら レイア...
横に飛び出すメガメニューを実装するjQueryプラグイン・JQUERY VERTICAL MEGA MENU
最近かなり見かけるようになった印象の、 大量のコンテンツを格納するメガメニュー の横に飛び出すタイプ。jQueryで実装して います。メガメニューはECサイトやポータル サイトなどなど、階層の深いWebサイトにて ユーザビリティ向...
スマフォとかミニマルデザインに特化した、これからお世話になりそうなWebデザインギャラリー
自分の中で課題があって、その為に 必要なインスピレーションを得るため のギャラリーサイトをまとめます。いち いちブックマークから探すのが面倒に なってきたのでちょっと整理がてら記事 にします。
Googleアナリティクスの統計をjQuery Mobileでも閲覧できるようにするサンプル
需要があるかどうか分かりませんが、 1%の方にでも参考になればと思い 記事にしてみます。アナリティクスの 統計をスマフォで確認出来るように する為のサンプル。jQueryMobileを 使います。
スマフォ向けサイト構築等に便利そうな、指定サイズに応じてclass名を加えてくれる軽量jsライブラリ・Selector Queries
これはかなり便利そうだったので備忘録。 ディスプレイサイズに応じて指定した要素 にclass名を加え、そのclassを使ってデザ インする事でレスポンシブなWebデザイン を設計出来るようにする為のライブラリ。 かなり便利そうです...
フォームのselect要素内をインスタンス検索出来るようにし、美しいデザインにも変更できるjQueryプラグイン・Chosen
結構便利そうだったのでご紹介。フォームの select要素内に羅列されたoptionから、入力 するだけで結果を表示するインスタンス検索 を可能にするスクリプト・Chosenです。表題 にはjQueryプラグインと書きましたが、この...
タイル状に並べられたイメージギャラリーごとドラッグ可能にするmootoolsプラグイン・The Wall
3連休をいかがお過ごしでしょうか。僕は 全く関係ないので普通に記事を書いて まいります。タイル状に並べられた画像 ギャラリーをそのままドラッグで動かせる というmootoolsのプラグイン・The Wall が結構クールで素敵でし...
無料フォントのみを使用してタイポグラフィを1日に1デザイン作成、100日間続ける学生のプロジェクト・100 Days of Typography
ちょっと面白いプロジェクトだったので ご紹介です。スペイン（かな？）の学生 さんたちが1日１つのポスターデザインを 配布されている無料フォントのみを使って 100日間作り続ける、というもの。無料の フォントのみでここまで出来る、と...
タブやアコーディオンなど、様々なUI構築用のjQueryプラグイン30個以上をセットにしたフレームワーク・ jQuery EasyUI
普段からよく見かけるjQueryによる タブやアコーディオンなどのUIの構築 を簡略化するためのフレームワーク・ jQuery EasyUIのご紹介です。プラグ インは30個以上あり、どれもシンプル なものになっています。
ベーシックで汎用性のありそうなjQueryイメージスライダー・The Lof JSiderNews
クロスブラウザに対応したベーシック で汎用性のありそうなスライダーを 実装出来るjQueryプラグインのご紹介。 The Lof JSiderNewsは派手な装飾も 無く、シンプルで欲しい機能は揃え てくれている印象です。
jQueryでWebサイト内を無限にスクロール出来るようにする
ちょっと語弊があるかもですけど、無限に スクロール出来るように見せる、みたいな 方法です。これが何の役に立つんですか とか言われると困っちゃうんですけど・・・ こういうのがあってもいいかなと思ったの でちょっと作ってみました。実装...
CSS3のtext-shadowを使ったテキスト装飾のサンプル集
たまに使うので自分用にメモします。 css3のtext-shadow等を使用した テキスト装飾のサンプルコードの 備忘録です。工夫すればいろいろ と作れるんでしょうけど、とりあえず よく使うものをピックアップします。
スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ
最近ちょくちょく見かけるようになったので調べた事をメモ。スクロールすると、複数要素が、それぞれアニメーションするようなWebデザイン。視差効果を生み出すようなパララックス効果を取り入れたものや、ユニークにアニメーションするものなどなど。
スマフォにも対応・ディスプレイサイズに自動で幅調整するレスポンシブなjQueryイメージスライダー・Blueberry
どのようなディスプレイサイズでも自動で レイアウトを調整してくれるレスポンシブな イメージスライダーを実装出来るjQueryプ ラグイン・Blueberryのご紹介です。イメージ スライダーを取り入れているサイトは多い のでこうい...
制作中のWebサイトにシンプルなグリッドを表示させる制作補助系jQueryプラグイン・Simple Grid
昨日TwitterでもPostしたんですけどやっぱり たまに使いそうなのでメモ。数値を設定する だけで簡単にシンプルなグリッドを重ねる事 が出来るWeb屋さん向けのjQueryプラグイン・ Simple Gridです。いちいち拡張や...
HTML5で実装する動画コンテンツに字幕を付けるライブラリ・Cuepoint JS
なかなかユニークだったのでメモがてら。 HTML5で実装する動画コンテンツに字幕 を加える、というjsライブラリです。思いつき ませんでしたけど、こう言うことも出来てし まうんですね・・・HTML5ってやっぱり凄い かも・・（今さ...
並べられたアコーディオンパネルを開くと幅が可変して可読性を高める・Jquery Animated Grid
横に並べられたアコーディオンパネル を開くと、幅がアニメーションで広がり つつ、隣のアコーディオンが狭くなる ので、全体のレイアウトを維持できる というプラグイン。幅を気にしなくて いいのは場合によっては助かるかも。