幅が異なる要素にも対応可能なカルーセルを実装するjQueryプラグイン・Lemmon Slider - かちびと.net
以前やろうと思ったカルーセルを 実装できるプラグインが配布されて いたので備忘録。幅の異なる要素 にも対応できるカルーセルです。 多くのカルーセルやスライダーは サイズ固定ですよね・・・ 多くのカルーセル系スクリプトは、一度に進む幅が一定の値にされているため、回す要素のサイズを統一する必要がありました。Lemmon Sliderは異なるサイズの要素を並べてもそれぞれの幅を判別して送ってくれます。 上記のように幅の異なるアイテムでも幅を解析してスライドさせたときにピッタリ揃えてくれます。また、IE6などのオールドブラウザにも対応しています。 動作サンプルです。 div等のボックス要素も対応可能、画像もサイズを指定する必要は無く、幅を解析して自動でそろえてくれます。 コード <script type='text/javascript' src='http://ajax.googleapis.c
テキストのサイズを自動調整して幅一杯に広げるレスポンシブWebデザイン対応のjQueryプラグイン・SLABTEXT - かちびと.net
テキストの幅にあわせてテキストの サイズを自動調整してくれる、という jQueryプラグイン。Fittextという、 同じようなライブラリがあるんですが、 このライブラリに影響を受けている みたいです。 ボックスの幅一杯に広がり、それに応じてフォントサイズも調整しますので、ダイナミックな表現が可能ですね。レスポンシブWebデザインとも相性の良いライブラリです。 英語だと素敵に見えますね。こんな感じでボックス内の幅一杯にピッタリ合うようにテキストサイズを調整してくれます。なのでレスポンシブWebデザインにも対応できる、という事になります。 少々問題もありますが、日本語でも使えます。というわけで手抜きですけどデモをどうぞ。 Sample iPhoneとかIE iPhoneでもうまく動作してくれます・・けどもっとちゃんと作ればよかったｗ ↓ IEでもOKでした。 ↓ コード <script sr
ベーシックなコンテンツスライダーを実装するjQueryプラグイン・EVO SLIDER - かちびと.net
お休みですので軽い話題。もう いいだろってくらい出回ってい るコンテンツスライダーですが、 汎用性が高そうだったのでご 紹介。アコーディオンにも出来 るプラグインです。 ベーシックで汎用性がありそうです。IE7などのオールドブラウザにも対応できて、マウスホイールにも対応しています。 よく見かけるようなコンテンツスライダーを実装できる、というプラグイン。有料版と無料版があります。 マウスホイールで進めることも出来ます。 有料版と無料版の相違点も表になってますのでご確認下さい。 DLすると、枠のみのものを貰えるのでテキストと写真を入れればすぐに完成します。 コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <scri
APIと少しのjQueryコードでGoogle Mapの地図の色を変更する
Google MapのデザインをjQueryで変更する為のメモ書き。Google Map APIとjQueryでGoogle Mapの色合いを変更し、オリジナルのマーカーを付けてみます。こうする事で、既存デザインに合わせたGoogle Mapが出来ます。 今後必要になりそうだったので調べ物をしたついでにメモ書きです。デザインを変更、というと語弊がありますけど、好みの色に変えてみます。 ゴール↓ こんな感じのをjQueryでやろう、みたいな内容です。特に目新しい情報では無いですが。 なんかシャドウ変になっちゃった・・色やマーカーだけでもWebサイトで使用している色にあわせれば地図だけ浮いてしまうような事も無くなるんじゃないかなと思います。 ジオコーディングリクエスト<script type='text/javascript' src='http://ajax.googleapis.com/a
jQueryやHTML5を使ってiPhoneやiPad向け電子書籍を作成する為のフレームワーク・Laker - かちびと.net
iPadや、iPhoneなどのタッチデバイス の普及で、個人的にも電子書籍への 関心がかなり高まりました。そんな中、 割と良さそうな電子書籍専用のフレーム ワークがあったのでメモがてらご紹介。 こういうの覚えておくと重宝しそうですね。 なかなか動きが良かったです。ただ読むだけの電子書籍ではなく、HTML5やjQueryを使って、より「電子」らしく表現出来ると楽しそうですね。 HTML5で作る電子書籍用のフレームワークです。jQueryやiPadのようなタッチデバイス向けのフレームワークとなっています。 複数フレームワークを併用 Lakerには定番のjQueryや、iPhone、iPadで黄金比を保つcssフレームワークのLess Framework、HTML5+jQuery製動画プレイヤーのjPlayer、スワイプイベントをサポートする為のライブラリ、TouchSwipeなども搭載されてい
スマートフォン向けのJSフレームワーク・Wink Toolkitがバージョンアップしてより素敵になったよ
以前ご紹介した、スマートフォン向けの JavaScriptフレームワーク、Wink Toolkit がバージョンアップしたんだぜ、と開発者 さんからわざわざお問い合わせ頂いたの でご紹介。以前もかなり豊富なUIでとても 有意義なフレームワークだと感じましたが、 今回はUI面が特にパワーアップ。 Wink Toolkitがバージョン1.3になって機能もいくつか追加されました。3ヶ月間、UIの改善にかなり力を入れてくれたようで、スマフォにかなり合わせてくれましたよ。 jQuery Mobileライクなインターフェースになりました。もともとUIエフェクトの評価は高かったWink Toolkitですが、全体的なデザインが見直されてかなり垢抜けた感じです。 尚、以前の機能やUIは過去記事をご参照下さい。 Wink Toolkitが割と良かったので日本語サンプル作った Demo 前回はほぼ全てのデモを
cssの未使用セレクタをその場で複数ページ一括調査するブックマークレット・cssess
中小規模サイトの構築時に役立ちそうな ブックマークレットがあったのでご紹介します。 閲覧しているWebサイトで使用しているcss の未使用セレクタを教えてくれるブックマーク レットです。こういったWebサービスはあります が、その場でサクッと調べられるのは面倒が 無くて良いですね。 使いどころはやや限られますが、複数ページを一括で調査し、それぞれのページの未使用セレクタを知らせてくれますのでなかなか便利だなぁと感じました。 おそらくブックマークレットを使ったページからリンクされている同一ドメインページを読み込んでるっぽいのです。zipや#の付いたURLも含まれているのはそのためでしょうかね。こういうリンクがある場合はチェックをはずしてください。 ページごとに使っていないセレクタを教えてくれます。 ブックマークレットを使うと上記のような半透明のボックスが出ますので調べないページのチェックを外
GoogleMapっぽい地図コンテンツを作成出来るjsライブラリ・Polymaps - かちびと.net
便利そうだったのでメモ。GoogleMap をはじめ、様々な地図サービスのような ドラッグで移動したり、拡大縮小な地図 コンテンツを実装するJavaScriptライブラリ Polymapsのご紹介。地図には画像を使 い、マス目上に置いていくみたいです。 これは結構需要あるんじゃないでしょうか。地図系のJSライブラリです。既存サービスを使いたくない方はご検討になってみてはいかがでしょうか。 GoogleMapなどのようにドラッグで移動したり、縮小、拡大が可能です。地図はSVGデータをタイル状に置いて実装している感じ。オリジナリティある地図コンテンツも手軽に実装できそうですね。 地図は普通に画像が使用されています。フルスクリーンにすることも。 文字の中（といっても画像ですが）にMapを入れることも出来るみたいです。 デモも沢山用意されているのでぜひ触ってみてください。 なかなか便利そうですね。
jQueryプラグインを探す際にだいたい見て回る巡回サイトまとめ - かちびと.net
個人的にjQuery関連のブクマ が分かりにくくなってきたので 整理も兼ねてシェア。プラグ インを探す時にだいたい巡回 しているサイトをまとめます。 かなり情報が多くなってきたjQuery。使いやすいし、知識の無い僕でも簡単に使えるので重宝してます。そんなjQueryですが、多すぎて探すのも大変ですね。以前ご紹介したサイトも兼ねて、ブックマークの整頓がてら、順回しているサイトをご紹介します。 codrops jQueryと言えば個人的にここを思い浮かべます。情報も新しく早い。英語OKならRSS購読推奨です。 codrops css-tricks こちらはWebデザイナー目線で情報を配信しています。有益jQuery情報多数ですが、タグやカテゴリが無い（あるかもだけど、見当たらない）のがおしいところ。/tag/等も404なんですよね・・最新記事はサイドバーに表示されます。 css-tricks
Flickrに関するメモ・ツールやソフトなど - かちびと.net
せっかくデジイチ買ったので来年あたり からFlickrを使おうと思い、Flickr関連の ツールや便利なアドオン、便利そうな ソフトなどをピックアップしてみました。 まだ全然使ってもいないのでその程度の 情報とお考え下さい。単なるメモ書きです。 FlickrはツールやWPのプラグインも多数存在するのでやはり便利そうですね。 文字の羅列だとリンク先に飛ばないと分からないのでリンクにマウスオーバーするとサムネイルが右側に出るようにしてあります。前に見たようなサイトもわざわざリンク先に飛ばずとも多少は分かるかなと思います。逆に見にくかったらごめんなさい。 基本 Flickr / ここからスタート。本家。 Flickrfreak / Flickrの使い方Wiki。日本語なので分かりやすい 日本語ガイダンス / ここも分かりやすいです。 検索 Flickr Related Tag Browser /
フリーの細字フォントいろいろ - かちびと.net
少し前に細字のフォントが 必要だったので色々と探して ましたが、その時に見つけた 素敵なフリーの細字フォントを 備忘録的にまとめてエントリーします。 全てフリーですが、ライセンスは 異なりますのでご確認下さい。 細字フォントはいろいろと使い勝手が良いので重宝しますね。全部で17あります。 Caviar Dreams Caviar Dreams Boulder Boulder Champagne & Limousines Champagne & Limousines LT Oksana LT Oksana 和田研細丸ゴシック 和田研細丸ゴシック Two Turtle Doves Font Two Turtle Doves Font Vloderstone Vloderstone Lelim Pro Lelim Pro Nioubes Nioubes Scriptina Scriptina T
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
