webデザイナー

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

スマートフォンやiPadなどのタブレットはもちろん、 様々なウィンドウサイズにも自動でレイアウトを 調整するレスポンシブなjQueryスライダーのご 紹介。FLEXSLIDERは4KBと軽量で、実装も 手軽なので覚えておくと重宝しそ...

HTML5で作られたDIESELのWebサイトがなかなか素敵ですね・・・

日曜日ですしお盆ですし、ということで軽めの 話題でも。米DIESELのデニム特設サイトが HTML5で作られているんですが、この出来 が凄くよく出来ていたのでシェアしようと思っ てご紹介します。こうして大手の企業が先手 をきって導...

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

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

簡単なjQueryコードでリストメニューにフィルタリング機能を加える

縦長になってしまったリストメニューは非常に 見にくく、使いづらいものです。ECサイトなんか でも頻繁に見かける光景ですが、カテゴリで 分けてもそれはそれで探しにくくなってしまった りと、あっちたてればこっち立たずみたいな経験 は無...

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

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

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

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

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

ポップアップしたLightbox内にサムネイルも表示可能 なjQueryプラグイン・ppGalleryのご紹介です。Lightbox 系のjQueryプラグインの大半は1つずつ見ていくか、 一旦ポップアップを閉じてからもう一度開く必要...

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

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

HTML5やCSS3などの大まかな概要を1ページ内に詰め込んだHTML5 Poster

地味に便利かなと思ったのでシェア。 HTML5やCSS3の概要、このタグで 何が出来るのか、等の情報を1ページ に詰め込んであり、mozillaのドキュメント ページにサクッと飛べるようにしてあり ますので、大雑把ですけどチートシ...

商用利用OK、リンクや著作権表示も不要の女性の写真素材専門サイト「モデル・フォト」

女性の写真素材専門のモデル・フォトは、 商用利用も可能で、リンクや著作権表示 も不要。完全に無料で使える人物写真 素材サイトです。簡単なアイキャッチ等に 使いやすそうな印象でした。なによりリンク 不要というのは貴重ですね。

横に飛び出すメガメニューを実装するjQueryプラグイン・JQUERY VERTICAL MEGA MENU

最近かなり見かけるようになった印象の、 大量のコンテンツを格納するメガメニュー の横に飛び出すタイプ。jQueryで実装して います。メガメニューはECサイトやポータル サイトなどなど、階層の深いWebサイトにて ユーザビリティ向...

スマフォ向けサイト構築等に便利そうな、指定サイズに応じてclass名を加えてくれる軽量jsライブラリ・Selector Queries

これはかなり便利そうだったので備忘録。 ディスプレイサイズに応じて指定した要素 にclass名を加え、そのclassを使ってデザ インする事でレスポンシブなWebデザイン を設計出来るようにする為のライブラリ。 かなり便利そうです...

タイル状に並べられたイメージギャラリーごとドラッグ可能にするmootoolsプラグイン・The Wall

3連休をいかがお過ごしでしょうか。僕は 全く関係ないので普通に記事を書いて まいります。タイル状に並べられた画像 ギャラリーをそのままドラッグで動かせる というmootoolsのプラグイン・The Wall が結構クールで素敵でし...

タブやアコーディオンなど、様々なUI構築用のjQueryプラグイン30個以上をセットにしたフレームワーク・ jQuery EasyUI

普段からよく見かけるjQueryによる タブやアコーディオンなどのUIの構築 を簡略化するためのフレームワーク・ jQuery EasyUIのご紹介です。プラグ インは30個以上あり、どれもシンプル なものになっています。

ベーシックで汎用性のありそうなjQueryイメージスライダー・The Lof JSiderNews

クロスブラウザに対応したベーシック で汎用性のありそうなスライダーを 実装出来るjQueryプラグインのご紹介。 The Lof JSiderNewsは派手な装飾も 無く、シンプルで欲しい機能は揃え てくれている印象です。

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ってやっぱり凄い かも・・(今さ...

お手軽WordPress Tips:1行のコードで追加できる便利な新機能「投稿フォーマット」を使ってみよう

WordPress3.2のリリースも間近に控え、 より楽しみが増える今日この頃ですが、 3.1から増えた新機能の投稿フォーマット がさほど普及していない印象が否めない ので微力ながら貢献してみようかなと 思います。

iPhone等での表示をPCで確認出来るAir製のシミュレーター・Mobilizerがローカルファイルにも対応出来るし、割と良かった

iPhoneや、BlackBerryなどでのWebサイトの表示をPCで確認出来るシミュレーターです。Air製で無料で使えます。まだ使い始めたばかりなんですが起動も軽く、ユーザーエージェントもそのデバイスごとに設定してくれてるみたいです。
Ads