要素にフローティング効果を手軽に与えられるjQueryプラグイン・jqFloat.js
画像とかをフワフワ動かすやつです。 指定した要素を、指定どおりに継続 的にサイト内で動かします。CPUの 問題とかもあると思うので多用は 出来ないと思いますが、よく見かけ るといえば見かけるので一応メモ。
webデザイナー
著作権放棄のレスポンシブWebデザイン対応CSSフレームワーク・ingrid
シンプルで良さそうだったのでメモ。 パブリックドメインのCSSフレームワ ークです。レスポンシブWebデザイン にも対応していますし、グリッドレイ アウトにも利用出来るのでなかなか 汎用性があるのでは無いかなと。
CSS3やHTML5などのコードを書く様子を再現し、徐々に 出来上がっていく様を見ながら学べる チュートリアルサイト・TheCodePlayer
一つの形として面白かったのでシェア。 実際にコードを書いていきながら徐々に 出来上がっていくさまを見ながら学べる チュートリアルサイト。動画のチュート リアルより見やすく頭に入りやすい気も しないでもないです。
アニメーションしながら少しずつ文字を表示させていくエフェクトを実装するjQueryプラグイン・Lettering Animate
使いどころもありそうだったので 備忘録。文字をアニメーションし ながら少しずつ表示させていく様 なエフェクトを実装できるjQuery プラグイン・Lettering Animate です。
画像にマウスホバーするとズームする拡大鏡っぽいやつを簡単に実装できる2KBの軽量jQueryプラグイン・loupe
結構良かったのでご紹介。ECサイトとか で見かける、マウス乗せると画像が拡大 するやつです。拡大鏡とか言えばいいん でしょうか？ニーズはそこそこありそう ですし、かなり軽量で導入も簡単なので 覚えておくと工数減らせるかもですね。 ...
Pinterestっぽいレイアウトを作ってみる
以前、レンガ風に要素を配列するレイ アウトを凄くよく見かけるようになり、 それから一種のブームのように様々な リソースが出回りました。最近はあま り見かけなかったのですが、Pinterest の登場で、また似たようなレイアウト ...
ベジエ曲線のラインに沿ってテキストを折り返すことができるjQueryプラグイン・Bacon!
ちょっと面白いプラグインだったので 備忘録。曲線に沿ってテキストを折り 返せるようにするjQueryプラグインで す。新聞のようなレイアウトも組めそ うです。用途はあまり無さそうですけ ど、珍しいので覚えておきたい。
Web上で「飛び出す絵本」の動きを表現したBeercamp 2012がちょっと凄かった
凄いなーとおもったのでシェア。Webサイト で飛び出す絵本のような動きを表現した Beercamp 2012がちょっと凄かった。案の定 CSS3とHTML5とJSで作ってるみたいですが、 実際に触ってみると少し感動しますね。 実用...
CSSスプライトをドラッグ&ドロップで作成、保存もできるWebサービス・SpritePad
CSSスプライトの作成、保存、共有が 可能なWebサービス・SpritePadのご 紹介です。少し大きめのプロジェクト 向けのサービスですかね。ドラッグ とドロップで作れるのはちょっと 良かったです。
背景いっぱいに画像を表示、スライドショー化にも対応した軽量なjQueryプラグイン・BACKSTRETCH
同じようなの沢山あるのですが、 軽量って言葉に弱い。背景一杯 に画像を表示、スライドショー 化も可能なjQueryプラグインで す。圧縮版なら2KBほどですの で導入しやすいですね。
jQueryでグローバルメニュー内のリストから「現在のページ」のURLを持ったリストにclassを加える
グローバルメニュー内のリストの中で 現在のページの部分にclassを与える事 で今いるページだけをスタイリングする 事が出来ます。静的なサイトなら手作業 で済みますが、CMSとかASPになると、その 中のルールに依存するので少し厄...
Media QueriesとjQueryを使って、スマートフォンでアクセスした時だけナビゲーションメニューを上に隠す
シンプルで良かったので一応メモ。レスポ ンシブWebデザインのTipsです。Media Queries とjQueryを使用して、スマフォでアクセス した時だけ、邪魔になりがちなナビゲー ションメニューを上に隠す、みたいな手段。 ...
jQuery UIのデザインをオリジナルに変更したサンプル
分かりやすいタイトルが思い浮かばない ので適当な感じになりましたが。jQuery UIのデザインをちょっと今風に変更した サンプルが配布されていたので備忘録。 jQuery UI、凄く機能的で良いんですが、 用意されているデザイン...
ノンデザイナー向けのスライド・「Webデザインのセオリーを学ぼう」
既出なんですが良かったので。空いた時間に、気になっていたスライドがあったので拝見しましたが、内容が素敵だったのでご紹介します。ノンデザイナーさん向けのデザインセオリーのスライドです。
iPadやiPhoneなどのスワイプ操作にも対応の、シンプルなHTML製プレゼンテーションを作成する為のフレームワーク・slides
シンプルなHTMLプレゼンテーションを作成 する為のフレームワークのご紹介です。最近 は変わった動きのするプレゼンツールをよく 見かけますが、シンプルなタイプはあまり 見かけませんので選択肢の一つとして。 スマフォのスワイプ操作に...
JavaScript無しで作るレスポンシブなコンテンツスライダー・CSS3 Responsive Slider
使えそうだったので参考にしました。 JavaScriptを使わず、CSSのみで動作 させるレスポンシブWebデザイン対応 のコンテンツスライダーのサンプル です。軽量化にも繋がりそうですね。
レシポンシブWebデザイン対応のツールチップを実装するjQueryコード
日曜日ですね。まだまだ寒い日が続き ますが如何お過ごしでしょうか。今日 もレスポンシブWebデザイン関連。いい 加減飽きられそうですね。今日はツール チップですのでさほど需要は無いもの と思われます。ただ、簡単に実装出来る ので...
要素をレンガ風に配列するスクリプト・jQuery Masonryで、配列させる要素を下揃えにする
要素をレンガ風に配列するjQueryプラグイン のMasonryで、要素を下揃えに配置出来るよ うにしたい、という内容です。オプション 項目を追加してオンオフを出来るようにカス タマイズします。下揃えにする機会があるか どうかは置...
モリサワのWebフォントが無料キャンペーンやってたので試してみたよ
モリサワのフォントをWebフォント として使えるようになりました。 現在キャンペーン中で、期間限定 で無料で利用する事が出来ます。 いつもお世話になっているフォント なので普及活動などしてみようか と思います。
Twitter Bootstrapのデザインを簡単に変更出来るWebサービス・StyleBootstrap
今日もTwitter Bootstrapの話。やっと 出たって印象でしょうか・・デザイン を変更できるWebサービスです。こうした 人気のフレームワークでこのように デザインを変更できるのはありがたい ですねー。
その場でサクッとiPhoneやiPad等の幅でWebサイトの表示確認が出来るレスポンシブWebデザインの補助用ブックマークレット・Resizer
ここ何日かずっとレスポンシブWebデザイン のネタが続きますが・・便利なブックマーク レットです。閲覧中のWEBサイトをiPhoneや iPadの幅で見たときの表示状態で確認出来る ブックマークレットです。というか単純に リサイズ...
簡単なjQueryコードで動く、レスポンシブWebデザイン対応のカルーセルを実装する為の雛形っぽいやつを作成してみる
レスポンシブWebデザインに対応できる コンテンツスライダーのようなものの 雛形のようなものが欲しかったので、 自分で作成しました。テンプレなので 他の配布スクリプトのように親切な 設計じゃないですけど・・