tableで任意の行にマウスホバーしたら他の行をblurさせる
Result マウスホバーしてるところ以外をぼかしてホバー中のコンテナをハイライトする、みたいなの。 この手の手法とコードはほぼ同じです。 csstable {/*table全体*/ background: #f5f5f5; border-collapse: separate; font-size: 12px; line-height: 24px; margin: 30px auto; text-align: left; } th { background: #444; color: #fff; font-weight: bold; padding: 10px 15px; position: relative; } td { border-bottom: 1px solid #e8e8e8; padding: 10px 15px; position: relative; transitio
家系図のような縦表示の階層を描けるスタイルシート・「hierarchi-view」
hierarchi-viewは上図のような家系図でよくある縦表示の階層を描けるCSSです。例では企業等での役職順が表現されています。こういうの作るの割と面倒なので地味に使いみちあるかもですね。 hierarchi-view
tableの行をクリックすると下部に詳細が表示される
Result jQuery//参照元に準拠し、onclick処理はtable内に書いてます function show_hide_row(row) {$("#"+row).toggle();}css#table_detail tr:hover{ background-color:#ddd; cursor:pointer; } #table_detail .hidden_row{ display:none; }html<table border=1 id="table_detail" align=center cellpadding=10> <tr> <th>名前</th> <th>年齢</th> <th>給料</th> <th>仕事</th> </tr> <tr onclick="show_hide_row('hidden_row1');"><td>たける</td><td>25</td><
ページ遷移不要の、シンプルな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本体とプラグインを読み込みます。 $(
Twitter Bootstrap向けのUIキットを複数配布する・PixelKit-Bootstrap-UI-Kits
Twitter Bootstrap向けのUIキットを配布するプロジェクトが素敵だったので備忘録。何種類か用意されており、どれもクオリティの高いものとなっています。 Bootstrap向けのUIキット集です。 Bootstrap用のUIキットです。デザインも複数用意されています。こちらはフラットなデザインのタイプ。 ↑ ちょっと優しい色合いで可愛いです。 ↑ ポップなデザイン。 ↑ スタイリッシュなもの。 ↑ ナチュラルなテイスト。個人的に一番好きです。 ↑ メトロなスタイルなどなど。 こんな感じで現在7種ほど、Githubにて配布されています。参考になりそうですね。 PixelKit-Bootstrap-UI-Kits
Bootstrap用の、ページ内の目次を生成するスクリプト・tocify.js
Twitter Bootstrap用の、目次生成スクリプト・tocify.jsのご紹介です。見出しを探し出して自動で目次を作る、みたいなやつ。実装も楽でユーザーにも優しい実装なのは素敵ですね。 冗長化したページではスクロールは面倒なので目次とページ内リンクを作ろう、というもの。見出しを探して自動生成します。 アニメーションスクロールや入れ子にも対応しています。IEも7から対応との事。 $(function() { $("#foo").tocify(); });セレクタを指定して <div id="foo"></div>空要素を用意すればいいだけみたい。 オプションも豊富に揃っています。詳細は以下よりどうぞ。 tocify.js
Webサイトツアーを可愛い吹き出しで実装するjQueryプラグイン・Crumble
注目させたい箇所に順々に吹き出し を表示させるWebサイトのツアー コンテンツを実装するjQueryのプ ラグイン・Crumbleのご紹介です。 可愛いデザインでこのままでも使え そうです。 ツアーコンテンツを実装するスクリプト。jQueryを使用します。 吹き出しをクリックすると次の吹き出しが表示されます。かわいい。 尚、吹き出しはgrumble.jsが使われていますので同時に読み込む必要があります。 <ol id="foo" style="display:none;"> <li data-target="span">吹き出し その1</li> <li data-target=".foo">吹き出し その2</li> <li data-target="b" data-angle="190" data-options="distance:10">吹き出し その3</li> </ol>表示さ
シンプルな日付ピッカーを実装するjQueryプラグイン・jQuery.minical
デートピッカーを実装するjQuery プラグイン・jQuery.minicalです。 シンプルさと軽量さが特徴です。 jQuery UIを使うほどでもないよう な場合はこういった軽量でシンプル な物が使いやすいですね。 デートピッカー実装ライブラリです。 軽量というのが売りのようで、gzipで4KBほどに圧縮できるそうです。動作もシンプルにカレンダーをポップアップ表示させるだけのもの。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script src='jquery.minical.js' type='text/javascript'></script>ライブラリを読み込んで以下のようにセッティング。 $(
様々なフォーマットにも対応可能な、美しい年表コンテンツを実装できるjQueryプラグイン・Timeline - かちびと.net
珍しいので一応メモ。年表を作れる jQueryプラグインです。見た目も 綺麗なんですが、スプレッドシート や、JSON形式にも対応出来るので どこかで使えるかも、と思いました。 機能も申し分ありません。 多用するようなものでもありませんが、スプレッドシートの情報を読み込むのは面白いですね。 綺麗です。上にコンテンツ、下に年表があって、ツールチップ形式でタイムラインが形成されます。ツールチップをクリックするとスライドが動く、というインターフェース。 年表は伸縮できますので見難い、というストレスも感じさせません。また、広がる時のアニメーションもスムーズで気持ちいいです。 全画面にしたり、GoogleスプレッドシートやJSON形式のデータを読み込んでタイムライン化する事も可能みたいです。この点は結構便利では無いかと。 Sample コード<script type='text/javascript
Selene: jQuery UI Theme
エリア1の中身です。エリア1の中身です。エリア1の中身です。エリア1の中身です。エリア1の中身です。エリア1の中身です。
iPadやiPhoneなどのスワイプ操作にも対応の、シンプルなHTML製プレゼンテーションを作成する為のフレームワーク・slides - かちびと.net
シンプルなHTMLプレゼンテーションを作成 する為のフレームワークのご紹介です。最近 は変わった動きのするプレゼンツールをよく 見かけますが、シンプルなタイプはあまり 見かけませんので選択肢の一つとして。 スマフォのスワイプ操作にも対応しています。 パワポとかKeynote使いたくないから作ったらしいです。iPadやiPhoneのスワイプ操作にも対応しています。 PCでは矢印キーで、タッチデバイスはスワイプで操作出来ます。JavaScriptにDojoが使われています。 以下動作サンプルです。 Sample iPhoneはQRコードでGOです。 実機でテストしました。タッチデバイスで閲覧すると、PCでは「矢印で動かします」みたいなナビゲーションもタッチデバイス用に切り替えられます。 コード Dojoは殆ど触ったことが無いのであまり触れないでおきます。 <script type="text/
jQueryで動作する開閉パネル式をWordPressのショートコートで作れるようにする基本的なチュートリアル
よく見かける、クリックで開閉するパネル をショートコードでサクッと作れるように するためのカスタマイズ法です。jQueryを 使います。どこにでも手軽に追加できる ので覚えておくと結構重宝します。FAQ 以外でも応用できそうですね。 FAQなんかで良く見かける開閉パネルをショートコードで作ろう、という内容です。一応ビギナーさん向けに書いたつもりですけど、分かりにくかったらすみません。 要所要素で開閉式のパネルコンテンツを実装する機会があるならショートコードで管理したほうが楽ですので覚えておくと重宝します。 完成イメージ こんな感じのやつです。クリックでパネルが開いて、回答が出現、みたいなの。これをショートコードでサクサク追加できるようにしてあげましょう的なコード。 Sampleこの動作をする開閉パネルをショートコードで簡単にサクサク追加できる、というのが今日の内容です。 スタイルはやっつけ
複数選択するフォームのselectを見やすく使いやすくするjQueryプラグイン・jQuery UI Multiselect
良さ気だったので備忘録として。フォーム のselectで複数選択可能にする事もある と思いますが、これを見やすく、また、直感 で使いやすくする為のjQueryプラグイン。 IE6や7でも普通に動いてくれますので、 いろいろと使いどころがありそうです。 フォーム周りは覚えておくと便利ですよね。 jQuery UI Multiselectは複数選択するselectを見やすく使いやすくしてくれます。
「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね - かちびと.net
Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。 jQuer
WordPressのオリジナルテーマ作成フロー・基本マニュアル
初めてWordPressオリジナルテーマの作成にトライしたい、という方向けの基本のマニュアルです。マニュアルというほど大袈裟なものではありませんけど、ある程度敷居が低くなると嬉しいなぁという思いを込めて記事にします。 この記事の内容はあくまで基本中の基本で、初心者・ノンプログラマー向けとなっていますので応用的な情報は殆どありません。また、説明の仕方も分かりやすさ重視で、厳密的にはちょっと違う点もあります。 初心者さん向けに、もう少し情報があってもいいかなと思って、書いてみることにしました。僕もまだまだ初級レベルなので一緒に学んでいきましょう。初級者レベルでこんな記事書くなって話ですけども。 目次 目次です。各セクションで必要と思う場所から見るようにしてください。 はじめに 作成するWebサイトの目的と構造 テーマ作成前に用意するものと環境 テーマの構造を（触り程度だけでも）理解する HTM
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
自身の技術スキルをアニメーションする棒グラフで表示できるjQueryスクリプト・「skills」
Markdown記法で書いたドキュメントをePubやPDFに変換し、電子書籍化する・「GitBook」
データを可視化する為のグラフ描画JavaScriptライブラリをまとめた・「JSGraphs」
ベーシックで使いやすそうなBootstrap向け管理画面テンプレート・「Gentallela」
ショートコードで使えるタブやスライダー、Twitterのツイート表示など、30以上の機能を搭載したWordPressプラグイン・Shortcodes Ultimate - かちびと.net
