• かちびと.net

    Web制作の話題を中心に、便利なWebサービスやリソースなどを紹介

  • About This

    Web制作者向けのTips、チュートリアル、リソース等を自分用のメモとしてほぼ毎日配信しています。たまにWordPressやjQuery、CSSのスニペットのメモも取ります。詳細はAbout me またはhumans.txtに書いてます。

    Powered by: WordPress/nginx/css3/html5/jQuery/GA/

  • Links

地味に使えるCSS小技のメモ&サンプル集

cssの小技的なテクニックが便利なので好きなん
ですが、cssそのものが嫌いで覚えられないので
カンペ的な記事を作ることにしました。便利な小技
は沢山あるんですが、特に自分が良く使いそうな
Tipsをメモします。既に出回っている情報ばかりで
特に目新しい手法はありませんので何も期待でき
ないです。

Read More »

キーワードを入力するだけで自動で該当する候補をキーボードで操作可能なテーブル内に表示するjQueryプラグイン・jQuery ComboGrid

オートコンプリート機能でキーボードで操作できる
コンボボックスを出してくれる、というjQueryの
プラグイン・jQuery ComboGridのご紹介です。
なかなか高機能なプラグインですね・・・文字を
入力するだけで自動で候補をテーブルとして
出してくれます。ページの切り替えはキーボード
で操作可能です。

Read More »

jQuery Mobileにシンプルなページネーションを簡単に実装出来るプラグイン・jQuery Mobile Pagination Plugin

どこかで使うかもと思ったので備忘録。JQM
にシンプルなページ送りを実装出来る、という
jQueryプラグイン。実装もとても簡単なので
覚えておいて損は無さそうです。ちょっと問題
になっていたXSSの問題も一応は解決したの
でそろそろ実践に向けてスキルを磨きたいとこ
ろですね。

Read More »

HTML5やcss3を使う際に見てるリファレンス的なサイトとか、使い勝手の良いツールとか

あまりに情報量が多くて混乱してきたので
自分用にまとめ。リファレンスとか、ちゃんと
実践で使えるツールを自分なりに厳選して
まとめておきます。どうも、あっちこっちで
あれが便利とかこれが便利だとか言われる
と訳が分からなくなるのでそろそろ絞らない
とですね。

Read More »

モダンなデザインのプレゼンテーションコンテンツをHTMLで実装出来るようにするjsライブラリ・deck.js

なかなか良かったのでご紹介。最近よく
見かけるHTML製のプレゼンテーション
を実装出来るライブラリ。素敵なデザイン
で実装できてエフェクトなんかも選択
出来るみたいですね。タッチデバイスに
も最初から対応できてるといろいろと
ありがたいんですけど・・

Read More »

Youtubeでもz-indexが効くようにする「?wmode=transparent」パラメーターをjQueryで自動挿入する

Youtubeは通常z-indexが効かず、Lightboxや
ナビゲーションをposition:fixed;させるときは
z-indexが効くように?wmode=transparentと
いうパラメーターを加えてあげなければなり
ません。しかしいちいち加えるのはストレス
なので、動画をよく貼るサイトにはjsで自動
的に挿入できるようにします。

Read More »

リンク先のPDFファイルを、Google Docs Viewerでその場で閲覧できる様にするjQueryプラグイン・gDocsViewer

使い方次第ではなかなか便利かも、と思った
のと諸事情でメモがてら記事にします。よく
あるPDFファイルへのリンクを、その場で
Google Docs Viewerで閲覧出来るように
するjQueryプラグイン・gDocsViewerです。
このままだとアレですが、工夫すれば結構
便利になりそう。

Read More »

240pxから最大2560pxの画面サイズまで対応出来るレスポンシブWebデザイン構築用のグリッドシステム・Golden Grid System

iPhoneなどのモバイルや、超ワイドなモニターサイズ
までサポートしているレスポンシブWebデザイン構築用
のフレームワーク・Golden Grid Systemなるものが
登場した模様です。最大で2560pxまで対応できる
らしいですよ。テレビでネットを見れるようにもなって
いるのでそういった事情からですかね・・どんどん
進化していきますねー。

Read More »

アイコンやシルエット、矢印など、シンボルタイプのフリーフォントまとめ

アイコンやシンボルなどの形をしたフリーフォント
のまとめ。なかなか使い勝手が良いものがいつ
のまにか増えていたので色々とまとめてダウン
ロードしましたのでその過程で良さそうに感じた
ものをシェアしてみます。まだお盆明けだったり
お休み中な感じなので軽めの話題で・・

Read More »

iPadアプリ専門のハイクオリティなUIを収集しているダイナミックなギャラリーサイト・Landing Pad

iPadアプリの素敵なインターフェースを専門に
収集しているギャラリーサイト・Landing Pad
のご紹介。とってもダイナミックな方法で閲覧
出来るので見てるだけでも楽しいです。クオ
リティ重視のようなのでまだ数が多いとは
言えませんが、こういうサイトは覚えておくと
後で困らないですよね。

Read More »

スマートフォンにも対応可能・ウィンドウサイズに応じてレイアウトを自動調整する軽量jQueryイメージスライダー・FLEXSLIDER

スマートフォンやiPadなどのタブレットはもちろん、
様々なウィンドウサイズにも自動でレイアウトを
調整するレスポンシブなjQueryスライダーのご
紹介。FLEXSLIDERは4KBと軽量で、実装も
手軽なので覚えておくと重宝しそうです。マーク
アップも簡単なのでiPhone向けサイトの構築
時に導入を検討したいですね。

Read More »

css3を使って手紙が封筒から出てくる様を表現したコンタクトフォームがなかなか可愛い

とっても可愛らしいコンタクトフォームがありま
したのでメモがてらご紹介します。封筒に入
った手紙を模したフォームのデザインで、
マウスを乗せると、フォーム部分の手紙が
アニメーションしながら出てきます。使いど
ころは今は限られてしまいそうですが・・
将来は普通に使えるといいですねw

Read More »

エフェクトが無駄に凄いイメージスライダーを実装出来るjQueryプラグイン・Chop Slider

実用性は別にして、こういうの嫌いじゃない
ので記事にします。よくあるイメージギャラリー
なんですが、画像が変わる際のエフェクトが
無駄に凝っています(褒め言葉です)。こんな
事もflashを使わないで出来るんだなー、と
素直に関心したので、同じ気持ちで見て
頂けたら嬉しいです。

Read More »

Webサイトにおけるユーザービリティの復習をしたので、よくチェックするポイントをリスト化した

ユーザービリティに関して少し復習したので
メモっておきます。初心忘れるべからずという
事で・・・Webサイトは基本的にユーザビリティ
を考慮したレイアウトやコンテンツが理想です。
もちろんケースバイケースではありますが、
これは全共通して言える、という事を忘れない
ようにメモ書き。

Read More »

わずか4KBと軽量でクロスブラウザ対応の、シンプルなデートピッカー(カレンダー)を実装するjQueryプラグイン・glDatePicker

軽量でカスタマイズしやすいデートピッカー
のjQueryプラグイン・glDatePickerのご紹介。
とてもシンプルで、4KBと超軽量です。汎用
的で使いやすいかなと思ってエントリー。
jQueryUIでもいいっちゃいいんですけど、
デートピッカーだけならUIを入れる必要は
無いですしね・・・

Read More »

Lightbox内にサムネイルも表示出来るイメージギャラリー系jQueryプラグイン・ppGallery

ポップアップしたLightbox内にサムネイルも表示可能
なjQueryプラグイン・ppGalleryのご紹介です。Lightbox
系のjQueryプラグインの大半は1つずつ見ていくか、
一旦ポップアップを閉じてからもう一度開く必要があり
ましたが、ppGalleryは一回開けばあとはサムネイルで
好きな画像に飛べるのでLightboxスクリプトの中でも
イメージギャラリーに向いてそうです。

Read More »

Facebookページをアピール出来るソーシャルプラグイン・Likebox(いいね!ボックス)をオリジナルデザインに変更する方法

Facebookページもかなり普及したようで、
様々なサイトやブログでソーシャルプラグ
インの定番のLikeboxを見かけるように
なりました。最近知ったのですが、この
Likeboxはデザインを変更する事が出来る
ようなので、今日はその方法をご紹介致
します。

Read More »

Ads

Tools & Resources

Snippets

Blog