Tumblrのオリジナルテーマを作成する為のHTML5製テンプレート・「tumblr boilerplate」tumblr boilerplateはTumblrのオリジナルテーマを作成するためのスターターテンプレートです。HTML5で作られています。装飾は一切なく、よく利用されるタグが概ね用意されていますので1からテーマを作るのに便利そう。CSSのセッティングタグが少し弱いかも。ライセンスはMITとの事。 tumblr boilerplate
アクセスと同時に強制的に一番下までスクロールさせる - かちびと.net
Result 再生ボタンで動作を確認できます。 jQuery function footerStart(selector){ // #itemまでスクロール $('html,body').animate({scrollTop: $(selector).offset().top},'slow'); //スクロールの着地点を生成 }$("#parent").append("<li id='item'>Last!!</li>"); //セレクタ指定 footerStart("#item"); html <ul id='parent'> <li>start!!</li> <li><br/>1<br/>2<br/>3<br/>4<br/>・・・<br/>119</li> </ul> via Scroll a list item such that it becomes visible? – Stac
レスポンシブWebデザインに対応したモーダルウィンドウを実装するjQueryプラグイン・Remodal
RWD対応のモーダルウィンドウを実装するスクリプト、Remodalのご紹介です。jQueryに依存しています。 RWDなWebサイトで使えるモーダルウィンドウ実装スクリプトです。 デバイスのモニタサイズに応じて適切なレイアウトを維持するモーダルウィンドウです。 スマフォの場合は全画面に表示されるのでフィンガーフレンドリーを考慮した設計と言えそうです。 <script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.remodal.min.js"></script>本体とスクリプトを読み込みます。 <div class="remodal" data-remodal-id="modal" data-remodal-options='{ "
jQuery Mobile サンプル
jQuery Mobile 動作サンプル 動作サンプルです。 INDEX リストサンプル ナビゲーションサンプル グリッドレイアウトサンプル ボタンサンプル フォームサンプル テーマサンプル エフェクトサンプル かちびと.net サンプル配布記事
マウスホイールで横スクロール+パララックス効果のあるコンテンツを実装するスクリプト・jInvertScroll
マウスホイールで横スクロール+パララックスなWebサイトを作れる、というスクリプト。なかなか良さそうだったので備忘録です。コンテンツが横移動するだけで、スクロールバーは縦になります。 横スクロールなパララックスサイトを作れる、というスクリプトです。jQueryに依存します。 パララックスは種類の山？のようなもので確認できます。非圧縮で4KB前後と軽量なのも嬉しいですね。 <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.jInvertScroll.js"></script> <script type="text/javascript"> (function($) { $.jInvertScroll(['.foo']); }(jQuer
沿革や年表のようなタイムライン的なコンテンツをスライダーで実装するjQueryプラグイン・ jQuery Timelinr - かちびと.net
年表とか沿革とか、そういった時間の流れを 可視化したようなコンテンツをスライダーで 実装できる、というjQueryプラグインのご紹介。 jQuery Timelinrは、コンテンツのスライダー で、テキストで書かれた西暦が連動して 動きます。 まぁ沿革や年表に使わなきゃいけないわけじゃないんですが、こういうのも面白いかなと思ってタイトルに含めました。あとで自分で検索したいもので。 あ、別件ですが、今更ながらjQueryの記事カテゴリを作りました。RSSでもご購読頂けますので宜しければ。 こんな感じでパッと見はよくあるコンテンツスライダーなんですが、上にある年号が連動してスライドします。年号はナビとしても利用できます。年号はテキストで書かれていて、コンテンツに応じて色とフォントサイズが変わる、という仕組み。 縦もあるよ IE6とか7 IETesterでのIE6でも普通に動作しました。透過処理
高品質なWordPressの有料/無料テーマをひたすらまとめている・Themegraphy - かちびと.net
コメントで教えて頂いたのでご紹介。素敵なWordPressテーマを紹介するサイト。無料と有料がありますので結構な数になっています。見てるだけでもインスピレーションが向上しそうですね。 WordPressのテーマギャラリーとしても素敵です。国産のサイトなので日本語ページもありますよ。 有料/無料のテーマがずらっとまとめられています。2013/7/9現在で500以上あるので探しがいもありそうですね。 販売元別でも探すことが出来ます。 Shotokuもご紹介いただきました！休みが取れたらアップデートしたい、と思いながら既に半年休めてない・・貧乏怖い。 Themegraphyは以下よりどうぞー。 Themegraphy
オープンソースで公開されているPinterestクローンのソフトウェア・Pinry
OSSで公開されている、Pinterestクローンソフトウェア・Pinryのご紹介です。すでに類似サイトも沢山あるので今更感あるかもですけど、アイデア次第で用途の幅も広がると思うのでメモ。 画像や動画、Webページをシェア出来るソフトウェア。PinterestライクなWebサイトを構築したいなら一考しても良さそうですね。Pythonで作られています。 昨年あたりから人気が出た画像共有サイト、PinterestのようなWebサービスを作成出来る、というOSSです。ライセンスはGPLみたい。 公式の動作サンプルです。 動作サンプル ↑ スクショです。見るからにクローンです。 ↑ 投稿用のブックマークレットや投稿画面もそのまま。 作ってみたいけど時間が足りない・・うぐぐ・・詳細は以下よりどうぞ。 Pinry
あのサイトのロゴに使われているフォントいろいろ
有名サイトに使われている フォントを30個紹介している エントリーがBuild Internet! に有ったのでご紹介します。 どれも日本でも有名なサイト でちょっとしたパロディサイト を作るときに利用できそうです。 Twitter Pico Alphabet Digg FFF Forward Vimeo Black Rose Tuts+ Lubalin Graph Technorati Neo Sans Medium Flickr Frutiger Black Youtube Alternate Gothic No. 2 Facebook Klavika Google Catull BQ Skype Helvetica Rounded Bold 面白いｗ残りは以下よりどうぞ～。 Fonts Used In Logos of Popular Websites
ショートコードでiOSやAndroid等にだけコンテンツを表示させられるようにするWordPressプラグイン・Mobile Content - かちびと.net
便利そうなので備忘録。iOSやAndroid、タブレットやPCサイト等にだけ、限定したコンテンツをショートコードで表示可能にする、というWPプラグインです。記事部分は共通になってしまうので、こういった方法をショートコードで出来るのは楽ですね。 ほぼ同等のものを以前の案件で作ったのですが、プラグインが存在してたのでメモ。ショートコードでモバイルデバイスにのみ表示させられるようにするプラグインです。 とはいえ、まだ使った事無いので正常動作するか不明です。その程度の記事という事でご了承ください。 記事部分は共通になってしまうのでショートコードで表示/非表示を分岐しよう、というもの。結構便利だと思います。 [ios]iOSでしか見れないよー[/ios] こんな感じで使うみたい。 用意されたショートコードはPCサイト用、モバイル用、iOS用、Android用、タブレット用、Blackberry用、k
WordPressやJavaScript、CSSなどのスニペットを収集しているサイト・wp-mix - かちびと.net
スニペットコードを収集している Webサイト・wp-mixのご紹介です。 wpとありますが、WordPressに留ま らず、PHPやJavaScript、CSSなど のスニペットも集めているみたい。 まだ増えるそうです。 スニペット紹介サイトです。この手のサービスは何個あっても困らないですね。被るのが難点ではありますが・・
タブやアコーディオン、パララックスなどを実装出来るjQueryベースのUIツールキット・jKit - かちびと.net
jQueryベースのUIツールキット・jKit のご紹介です。タブやアコーディオン などの良く使われるものから、簡易的 なパララックスやバリデーション、ズ ーマーなどなど多機能なUIキットとな っています。 2013年になりました。喪中により新年の御挨拶を控えさせて戴きます。皆様に取って本年が充実した年でありますようお祈りいたします。 さて、今日はUIキットのご紹介。jQueryベースとなっています。 jQuery UIでいいじゃんと思う方も多そうですけど、選択肢があるに越した事はありません。 ずらっと並んでいます。機能は42種とかなりの数です。 使い方は基本的には他のプラグインと変わりありません。コアとjKitを読み込んでセッティングします。 DOM要素にrel属性を与える形で実装します。 <div id="foo" rel="jKit[accordion]"> 例えばアコーディオンなら
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Adobe製のレスポンシブ対応UIライブラリ・「Topcoat」 - かちびと.net
Illustratorのデータをcanvasに変換する・「Ai to Canvas」 - かちびと.net
画像のみ、pタグで囲わないようにする - かちびと.net
jQueryベースの軽量UIライブラリ・w2ui
jQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 - かちびと. net
良質なWebデザインのサイトを厳選して収集したギャラリーサイト・Site Inspire - かちびと.net
レスポンシブWebデザイン対応のグリッドレイアウト向けCSSフレームワーク・PROFOUNDGRID - かちびと.net
シンプルで軽量なCSSフレームワーク・Reuze.me - かちびと.net
