• かちびと.net

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

  • About This

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

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

  • Links

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

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

Read More »

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

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

Read More »

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

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

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 »

iPhoneやiPad等にもWebサイトを最適化するレスポンシブWebデザイン構築に役立つフレームワークやTipsいろいろ

iPhoneやiPadなどの人気デバイスに
Webサイトのレイアウトを最適化する為
の方法の一つとして、Media Queriesを
使ったレスポンシブWebデザインの構築
が注目されつつあります。当サイトでも
何度か取り上げていますが、ここで少し
まとめてみたいと思います。

Read More »

スクロールに応じて要素がアニメーションする、視差効果(パララックス)を取り入れたWebデザイン例とTipsいろいろ

最近ちょくちょく見かけるようになったので調べた事をメモ。スクロールすると、複数要素が、それぞれアニメーションするようなWebデザイン。視差効果を生み出すようなパララックス効果を取り入れたものや、ユニークにアニメーションするものなどなど。

Read More »

Ads

Tools & Resources

Snippets

Blog