Bootstrapの為のカード型UIフレームワーク・「Bootcards」
BootcardsはBootstrapの為のカード型UIフレームワークです。カード型UIとは最近TwitterやGoogle等が提唱し始めたスタイル（？）です（参照：Twitterカード、Google Now カード）。今まで普通に触れていたUIに名前が付いただけのような気もしますが・・ｗ カードUIに関しては Inside Intercomで記事が書かれていたので合わせてご参照下さい。このカードUIにBootstrapで対応出来るようにする、というUIフレームワークになります。モバイルとタブレットファーストな印象で個人的には割と好きでした。ライセンスはMITとの事。 Bootcards動作サンプル
tableをレスポンシブWebデザインに対応させるスクリプト・FooTable - かちびと.net
table要素をレスポンシブに対応させる、というスクリプトです。他にも同じようなスクリプトは存在しますが実用的ではなかったので紹介してなかったですけどこれはアリな気がします。 table要素をレスポンシブに対応させるjQueryプラグインです。他にもMediaTableやzurbのスクリプトもあります。 ウィンドウサイズの幅が狭くなると、表示しきれないカラム部分をタップによる表示式に切り替える、というもの。 上記のようにタップすると非表示部分のカラムの内容が表示されます。ユーザーにとっても分かりやすい気がしました。 公式の動作サンプルです Sample コード <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <scri
コンテナに画像がぴったり収まるように画像のサイズを変更するjQueryプラグイン・imgLiquid
画像を包括したコンテナに その画像がぴったり収まる ようにサイズを調整する、 というjQueryプラグイン。 必要になるか分かりません が、需要はありそう。 コンテナ一杯に画像を表示させる、というもの。 上が使用した状態、下が未使用です。下はコンテナに隙間があるのに対し、上はコンテナに隙間無く画像が収まっています。画像をメインとしたコンテンツでグリッドレイアウトなWebサイトなどにも良さそうです。 コード<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <script src ="imgLiquid-min.js" type="text/javascript"></script>コアとプラグインを読み込みます。 $("
jQuery Mobileでシンプルなイメージギャラリーを実装する為のプラグイン・ImageFlip
JQM向けのイメージギャラリーを 実装する為のjQueryプラグイン です。フリック操作で進める事 が出来ます。特に変わったエフ ェクトも無いのでシンプルで使 いやすい印象でした。 jQuery Mobile向けのシンプルなイメージギャラリーを実装する為のプラグインです。 フリック操作に対応したイメージギャラリーです。スマフォ向けなので凝ったエフェクトもなく、なかなか軽量なライブラリとなっています。JQM自体軽量とは言えないのでこういったスクリプトは軽量であって欲しいトコロです。 JQMに準じたカスタムデータ属性を含むDOM要素を生成したりswipeleftメソッドで送ったり、みたいな感じっぽいです。良く見てませんけど。 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="jquer
ページ遷移不要の、シンプルなWebサイトを作るための軽量jQueryプラグイン・Pagify - かちびと.net
よく見かける、ページ遷移のない Webサイトを作る為のjQueryプラ グイン。ですが、高機能な物では なく、極めてシンプルで、ライブ ラリも軽量です。サクッと作りた い時のテンプレにもいいかも。 僕の語彙の無い説明よりサンプル見た方が早そうですね。 ※漢字も間違ってたので修正しました ページ遷移不要で、内容を書き換えた際もフラグメントURLにしてくれます。以下サンプル。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7'></script> <script src="pagify.js" type="text/javascript"></script> jQuery本体とプラグインを読み込みます。 $(
チェックボックスやinput要素などのフォーム周りのユーザビリティを少しだけ向上できる地味に便利なjQueryコードいくつか - かちびと.net
フォームで利用するjQueryのスニペット コードをいくつか。どれも既出だと思う のでおさらいという事で。とはいえ、所詮 はスニペットですので実際に導入する際 は動作をしっかりと検証する事を強く 推奨します。 フォーム周りのjQueryスニペットです。自分用のメモも兼ねて。 フォーム関係は色々面倒なので参考にならない事もあるかと思います。「ふーん」程度にご覧頂くと丁度いいと思います。 Placeholder属性を、非対応ブラウザでは表示/非表示に 便利なHTML5のPlaceholder属性をオールドブラウザでは表示/非表示として対応します。 if(!$.support.placeholder) { var active = document.activeElement; $(':text').focus(function () { if ($(this).attr('placeholde
Webフォントにも利用可能なフリーの天気アイコンフォント・Climacons Font - かちびと.net
土曜日なので軽い話題。天気 アイコン型のWebフォントです。 スマートフォンのアプリ向け に作られたみたいです。見た目 が可愛いのでアプリ以外にも 何かに利用したいですね。 天気アイコンフォント、というニッチなニーズに応えたフリーフォントです。スマフォのアプリなんかに良さそうな感じ。Webフォントにも利用できますが、PSDやEPSも用意されています。 可愛らしい天気アイコンです。UNIQLO CALENDARにも似たようなテイストのアイコンが使われていましたね。 結構揃ってます。 フォトショやイラレで使えるデータもあります。 商用でも使っていいみたいですけど直に販売したりするのはやめてくれ、との事です。下部に規約あるので目を通してくださいませ。 Climacons Font
jQuery Mobileのリストでデフォルトの高さのリストにサムネイルを高さ一杯に含める - かちびと.net
ちょっと意味不明なタイトルですが。 jQuery Mobileでリストを書くときの Tipsです。昨日ちょっと個人的に話題 に上がったのでメモ的に記事にします。 最近はすっかりJQMの話題が減っていた ので丁度いいですね。 というわけで備忘録的な記事。jQuery Mobileの話です。触ったことがある方向けですかね。普通のリストの高さに合わせてサムネイルを含めます。正しい方法かどうかは知りません。 これが普通のリストです。このマークアップは以下のような感じ。 <ul data-role="listview"> <li><a href="example01.html">foo</a></li> <li><a href="example02.html">bar</a></li> </ul> listviewというルール名をdata属性に与えればリスト化します。 画像付きにしたい・・けど こ
iPhoneやiPadのホーム画面向けアイコン作成用のPSDテンプレート・App Icon Template - かちびと.net
iPhoneやiPadなどのホーム画面に表示 させるアイコンを作るためのPhotoshop 用テンプレート・App Icon Template をご紹介。そんなに多用するものじゃ 無いと思うんですけど、便利っちゃ 便利でした。 iOSのホーム画面向けのアイコン用テンプレ。スマートオブジェクトでフレームの変更・追加も容易に出来ます。 iPadやiPhoneなどのアイコン生成用のテンプレートです。フレームみたいなもんですかね。デザインの変更はスマートオブジェクトを利用します。 使ってみた ↑ 上記赤枠がスマートオブジェクトなので開きます。 ↑ 何種類かある中からフレームを決めてスマートオブジェクトを保存すればメインファイルに反映されます。 ↑ インセットも出来るよ。 ↑ テクスチャ追加してみた。スマートオブジェクト側にテクスチャを増やせばテンプレ量産出来ますね。 枠を作ってくれてるので効率的に
Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime - かちびと.net
結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ
CSSのみで約900パターンものユニークなグリッドレイアウトをドラッグ&ドロップで作成出来るWebサービス・3x4grid - かちびと.net
3連休を如何お過ごしでしょうか。さて、 ちょっと面白いものを見かけたのでシェア します。Masonryのようなレンガ風の レイアウトをCSSのみでサクッと作れる Webサービス。パズルのように組み合わせ るので種類は900パターン近くになる そうですよ。 休日なので軽めの話題でも。 よくあるグリッドレイアウトのCSSジェネレーターと違って汎用性はありませんが、こういうサービスが出てきたのがちょっと面白いなぁと。jsも使わないし、直感で作れるのでお手軽といえばお手軽じゃないですかね。 このようにパズルのようになっていて、右のエレメントをドラッグし、左にドロップしてボックスを配置する、というもの。jsは使われず、CSSのみで作れます。 操作は直感で出来ると思います。 作ったらコードを発行してもらえます。 Example 960pxで作成されますので汎用的ではありませんが、これはこれで面白いかな
jQueryのカルーセル系プラグイン・Caroufredselだけで「こんな事も出来るよ！」をまとめたサイト・Cool Carousels - かちびと.net
Caroufredselという、結構人気なプラグイン があるんですが、このプラグインの開発者が 応用例をサンプルソース付きでまとめてくれ ていましたのでご紹介。1つのプラグインで ここまで出来るってちょっと凄いですね。 もう少し軽量になってくれると嬉しいんです けど・・ カルーセル系プラグインの定番的なライブラリ、Caroufredselの応用例を開発者さん本人がまとめてくれていました。もともと沢山例があったんですが、更に一歩進んだ使い方を紹介してくれています。サンプルはダウンロードできます。
WordPressテーマのcssの末尾にクエリ文字を加えてキャッシュさせないようにする
凄く今更な話題かもしれませんが、知ってると便利なのでちょっと書いてみます。WordPressのテーマのcssに変更を加えたときに、表示をクライアントさん等に確認して貰う際、キャッシュの説明をするのがかなり面倒です。 というわけで、古来から伝わるcssファイルのキャッシュ(cssに限りませんけど)を防ぐ方法をWordPressで、という内容です。 この辺の理屈は、よく拝見させて頂いている小粋空間さんが書かれてますので合わせてご参照下さい。 コードget_bloginfo( ‘stylesheet_url’ )の方の方が多いかもですけど、今回はcssを読み込ませるのにこれ使います↓ href="<?php bloginfo('stylesheet_directory'); ?>/style.css"これで以下のように出力。 href="http://example.com/wp-content
jQueryのフィルタを使った際の実装サンプルと基本的な機能のまとめ
jQueryのフィルターが便利なんですが、 なかなか全部把握出来ないので自分用 にまとめることにしました。マイチート みたいな記事です。フィルターはかゆい ところに手が届く便利なもので、場合 によってはコードも短く済ませること も出来るかもしれません。 というわけでフィルター一覧です。あんまり把握出来てなかったのでこの機会に全部目を通して触ってみました。機能というか、どんな感じで要素を取得出来るか、みたいな内容になります。 しっかり使いこなしてきた人間の書いてる記事じゃないので、もしかしたら解説が間違ってるかもしれません。一応公式のリファレンス見ながらやってますけどそれでも勘違いしていたらご指摘頂けると嬉しいです。 カテゴリごとにjsfiddleで全サンプルを用意してありますのでフォークしてご自身向けに変更して頂ければと思います。 Basic Filter(基本フィルタ)Sample基本フ
WordPressのオリジナルテーマ作成フロー・基本マニュアル
初めてWordPressオリジナルテーマの作成にトライしたい、という方向けの基本のマニュアルです。マニュアルというほど大袈裟なものではありませんけど、ある程度敷居が低くなると嬉しいなぁという思いを込めて記事にします。 この記事の内容はあくまで基本中の基本で、初心者・ノンプログラマー向けとなっていますので応用的な情報は殆どありません。また、説明の仕方も分かりやすさ重視で、厳密的にはちょっと違う点もあります。 初心者さん向けに、もう少し情報があってもいいかなと思って、書いてみることにしました。僕もまだまだ初級レベルなので一緒に学んでいきましょう。初級者レベルでこんな記事書くなって話ですけども。 目次 目次です。各セクションで必要と思う場所から見るようにしてください。 はじめに 作成するWebサイトの目的と構造 テーマ作成前に用意するものと環境 テーマの構造を（触り程度だけでも）理解する HTM
jQueryを使ってテーブルのセルに入力された数字に応じて背景カラーを変える
jQueryを使ってテーブルのセルに入力 された数字のデータをカラーでグルー ピングできるようにする方法です。 プラグインは不要で簡単なコードで実現 できます。大量のデータがあるときは 使ってみては。 個人的にはあまり使う機会ありませんけど。大量の数字が入力されたテーブルほど見にくいものはありませんのでイザという時のためにメモ。 jQueryを使ってテーブルのセルに入力された数字に応じて背景カラーを変える方法。数字のみが入力されたテーブルの可視性を、色の濃度でグルーピングして可視性を高めます。 Sample こんな感じでグルーピング出来ました。濃い色ほど数字が大きいです。普通にマークアップすれば勝手に色が変るので管理が楽じゃないかなと。 コード$(document).ready(function() { // 配列内の最大値を取得する関数 Array.max = function(arra
シンプル、軽量でカスタマイズしやすいフォームバリデーションjQueryプラグイン・validate.js
フォームバリデーション系のプラグインは 既に数多く良質なものが揃っているので、 今更、という気もしますが、自分と相性が 良さそうだったので備忘録。軽量でシンプル で、カスタマイズもしやすかったです。 高機能ではなくていいので、こういうのが 欲しいんですよね・・ もちろん、クロスブラウザで動作してくれます。圧縮すれば2KB以下にまで落とせる軽量ライブラリです。 バリデーション用のライブラリです。軽量でクロスブラウザ対応。コードもシンプルでカスタマイズしやすい印象でした。 サンプルです。エラーメッセージは適当なので気にしないで下さい。 Sample コード<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryスニペット | かちびと.net
jQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 - かちびと. net
今年(2011年)参考になったWeb制作者向けのスライドのまとめ - かちびと. net
