地味に使えるCSS小技のメモ&サンプル集
cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報...
Webデザイン
キーワードを入力するだけで自動で該当する候補をキーボードで操作可能なテーブル内に表示するjQueryプラグイン・jQuery ComboGrid
オートコンプリート機能でキーボードで操作できる コンボボックスを出してくれる、というjQueryの プラグイン・jQuery ComboGridのご紹介です。 なかなか高機能なプラグインですね・・・文字を 入力するだけで自動で候補を...
jQuery Mobileにシンプルなページネーションを簡単に実装出来るプラグイン・jQuery Mobile Pagination Plugin
どこかで使うかもと思ったので備忘録。JQM にシンプルなページ送りを実装出来る、という jQueryプラグイン。実装もとても簡単なので 覚えておいて損は無さそうです。ちょっと問題 になっていたXSSの問題も一応は解決したの でそろ...
HTML5やcss3を使う際に見てるリファレンス的なサイトとか、使い勝手の良いツールとか
あまりに情報量が多くて混乱してきたので 自分用にまとめ。リファレンスとか、ちゃんと 実践で使えるツールを自分なりに厳選して まとめておきます。どうも、あっちこっちで あれが便利とかこれが便利だとか言われる と訳が分からなくなるので...
モダンなデザインのプレゼンテーションコンテンツをHTMLで実装出来るようにするjsライブラリ・deck.js
なかなか良かったのでご紹介。最近よく 見かけるHTML製のプレゼンテーション を実装出来るライブラリ。素敵なデザイン で実装できてエフェクトなんかも選択 出来るみたいですね。タッチデバイスに も最初から対応できてるといろいろと ...
Youtubeでもz-indexが効くようにする「?wmode=transparent」パラメーターをjQueryで自動挿入する
Youtubeは通常z-indexが効かず、Lightboxや ナビゲーションをposition:fixed;させるときは z-indexが効くように?wmode=transparentと いうパラメーターを加えてあげなければなり ...
リンク先のPDFファイルを、Google Docs Viewerでその場で閲覧できる様にするjQueryプラグイン・gDocsViewer
使い方次第ではなかなか便利かも、と思った のと諸事情でメモがてら記事にします。よく あるPDFファイルへのリンクを、その場で Google Docs Viewerで閲覧出来るように するjQueryプラグイン・gDocsViewer...
沿革や年表のようなタイムライン的なコンテンツをスライダーで実装するjQueryプラグイン・ jQuery Timelinr
年表とか沿革とか、そういった時間の流れを 可視化したようなコンテンツをスライダーで 実装できる、というjQueryプラグインのご紹介。 jQuery Timelinrは、コンテンツのスライダー で、テキストで書かれた西暦が連動して ...
240pxから最大2560pxの画面サイズまで対応出来るレスポンシブWebデザイン構築用のグリッドシステム・Golden Grid System
iPhoneなどのモバイルや、超ワイドなモニターサイズ までサポートしているレスポンシブWebデザイン構築用 のフレームワーク・Golden Grid Systemなるものが 登場した模様です。最大で2560pxまで対応できる らし...
アイコンやシルエット、矢印など、シンボルタイプのフリーフォントまとめ
アイコンやシンボルなどの形をしたフリーフォント のまとめ。なかなか使い勝手が良いものがいつ のまにか増えていたので色々とまとめてダウン ロードしましたのでその過程で良さそうに感じた ものをシェアしてみます。まだお盆明けだったり お...
iPadアプリ専門のハイクオリティなUIを収集しているダイナミックなギャラリーサイト・Landing Pad
iPadアプリの素敵なインターフェースを専門に 収集しているギャラリーサイト・Landing Pad のご紹介。とってもダイナミックな方法で閲覧 出来るので見てるだけでも楽しいです。クオ リティ重視のようなのでまだ数が多いとは 言...
スマートフォンにも対応可能・ウィンドウサイズに応じてレイアウトを自動調整する軽量jQueryイメージスライダー・FLEXSLIDER
スマートフォンやiPadなどのタブレットはもちろん、 様々なウィンドウサイズにも自動でレイアウトを 調整するレスポンシブなjQueryスライダーのご 紹介。FLEXSLIDERは4KBと軽量で、実装も 手軽なので覚えておくと重宝しそ...
HTML5で作られたDIESELのWebサイトがなかなか素敵ですね・・・
日曜日ですしお盆ですし、ということで軽めの 話題でも。米DIESELのデニム特設サイトが HTML5で作られているんですが、この出来 が凄くよく出来ていたのでシェアしようと思っ てご紹介します。こうして大手の企業が先手 をきって導...
css3を使って手紙が封筒から出てくる様を表現したコンタクトフォームがなかなか可愛い
とっても可愛らしいコンタクトフォームがありま したのでメモがてらご紹介します。封筒に入 った手紙を模したフォームのデザインで、 マウスを乗せると、フォーム部分の手紙が アニメーションしながら出てきます。使いど ころは今は限られてし...
簡単なjQueryコードでリストメニューにフィルタリング機能を加える
縦長になってしまったリストメニューは非常に 見にくく、使いづらいものです。ECサイトなんか でも頻繁に見かける光景ですが、カテゴリで 分けてもそれはそれで探しにくくなってしまった りと、あっちたてればこっち立たずみたいな経験 は無...
エフェクトが無駄に凄いイメージスライダーを実装出来るjQueryプラグイン・Chop Slider
実用性は別にして、こういうの嫌いじゃない ので記事にします。よくあるイメージギャラリー なんですが、画像が変わる際のエフェクトが 無駄に凝っています（褒め言葉です）。こんな 事もflashを使わないで出来るんだなー、と 素直に関心...
Webサイトにおけるユーザービリティの復習をしたので、よくチェックするポイントをリスト化した
ユーザービリティに関して少し復習したので メモっておきます。初心忘れるべからずという 事で・・・Webサイトは基本的にユーザビリティ を考慮したレイアウトやコンテンツが理想です。 もちろんケースバイケースではありますが、 これは全...
わずか4KBと軽量でクロスブラウザ対応の、シンプルなデートピッカー（カレンダー）を実装するjQueryプラグイン・glDatePicker
軽量でカスタマイズしやすいデートピッカー のjQueryプラグイン・glDatePickerのご紹介。 とてもシンプルで、4KBと超軽量です。汎用 的で使いやすいかなと思ってエントリー。 jQueryUIでもいいっちゃいいんですけど...
グラフィティアートを気軽に楽しめるノート・Walls Notebookの発想が参考になった
なんというかアイデアに刺激を受けて 記事にします。グラフィティ(graffiti)、 というものがありまして、まぁ日本では 犯罪にあたる行為なんですが、この グラフィティを気軽に楽しめる、という ノートがありました。
Lightbox内にサムネイルも表示出来るイメージギャラリー系jQueryプラグイン・ppGallery
ポップアップしたLightbox内にサムネイルも表示可能 なjQueryプラグイン・ppGalleryのご紹介です。Lightbox 系のjQueryプラグインの大半は1つずつ見ていくか、 一旦ポップアップを閉じてからもう一度開く必要...
タッチデバイス対応、HTML5で構築したWebサイト向けのUI用フレームワーク・Kendo UI
HTML5製のWebサイト向けUI専用の フレームワーク・Kendo UIのご紹介。 iPhoneなどのスマートフォンや、iPad などタブレットデバイスにも対応したWeb サイトのUI設計用に作られたようです。 使いやすいかどう...
Facebookページをアピール出来るソーシャルプラグイン・Likebox（いいね！ボックス）をオリジナルデザインに変更する方法
Facebookページもかなり普及したようで、 様々なサイトやブログでソーシャルプラグ インの定番のLikeboxを見かけるように なりました。最近知ったのですが、この Likeboxはデザインを変更する事が出来る ようなので、今...