Twitter Bootstrapの有料/無料テンプレートを配布する・「ShapeBootstrap」ShapeBootstrapはBootstrapのテンプレート配布サイトです。有料と無料のものが用意されていますが、無料版も結構な数があるようです。ダウンロード出来るだけでなく、開発者による販売も可能なので開発者の方にも需要はあるかもですね。開発者は売り手及びアップロードのガイドライン、利用者は買い手のガイドラインが用意されているのでご利用の際はご確認下さい。 ShapeBootstrap
HTML、CSS、JavaScriptのコード整形ツール・「Dirty Markup」 - かちびと.net
Dirty Markupは、HTMl、css、JavaScriptのコードをインデントして整形してくれるツールです。高機能ではありませんが、シンプルで使いやすく、動作も軽量です。 Dirty Markup
Sublime Text 2のショートカットキーで便利なやつ何個か（Windows版） - かちびと.net
Sublime Text 2で個人的によく 使うショートカットキーをご 紹介します。別件でメールして た時に聞かれたので書いてみる 事にしました。Windows版のショ ートカットになります。 個人的に便利だと感じたSublime Text 2のショートカットキーを紹介してみます。僕はまだ使い始めて半年くらいしか経って無いですし、機能を十分に使いこなせる訳では無いので参考程度という事で・・ 一括置換 文字列の一括置換です。便利なので、これがないエディタはもう使えません。 Ctrl+D（同じ文字を複数選択→一括編集） ↑ 任意のテキストの上にカーソルを合わせてからCtrl+Dで、その文字と同じ文字に標準をあわせられます。 Ctrlを押したまま、複数選択したいところにカーソルを再度持っていってDを押せばその場所も選択可能です。 ↑ 選択したテキストは一括編集できます。 ただし、同じ文字列「全て
Twitter Bootstrapのリソースを大量にまとめたサイト・The Big Badass List - かちびと.net
人気のフレームワーク、Bootstrapを使う際に役立つリソースを大量に集めているWebサイト・The Big Badass Listのご紹介です。現在でも200近くのリソースがまとめられています。既に利用されている方は覗いてみては。 Twitter Bootstrapのリソースまとめサイトです。人気のフレームワークならではのリソース量ですね。 左の影マッチョが気になりますが、それくらい凄いまとめなのでしょう。現在180以上のリソースがまとめられています。 フォームとかデザインとかモックアップとかRubyやPHPにBootstrapを統合する手段とかなんでも揃ってます。 覚えておいて損は無いのでは。また、新たなリソースの情報提供も受け付けてるみたいです。以下よりご利用下さい。 The Big Badass List
jQueryのフィルタを使った際の実装サンプルと基本的な機能のまとめ - かちびと.net
jQueryのフィルターが便利なんですが、 なかなか全部把握出来ないので自分用 にまとめることにしました。マイチート みたいな記事です。フィルターはかゆい ところに手が届く便利なもので、場合 によってはコードも短く済ませること も出来るかもしれません。 というわけでフィルター一覧です。あんまり把握出来てなかったのでこの機会に全部目を通して触ってみました。機能というか、どんな感じで要素を取得出来るか、みたいな内容になります。 しっかり使いこなしてきた人間の書いてる記事じゃないので、もしかしたら解説が間違ってるかもしれません。一応公式のリファレンス見ながらやってますけどそれでも勘違いしていたらご指摘頂けると嬉しいです。 カテゴリごとにjsfiddleで全サンプルを用意してありますのでフォークしてご自身向けに変更して頂ければと思います。 Basic Filter(基本フィルタ) Sample 基
少しのjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする - かちびと.net
列全体がクリック可能で、Wikipediaに飛びます。セル内にアンカータグが含まれている場合はそちらが優先されます。Webサービスの料金プランなんかに使えそうでは。 jQuery( function($) { $('tbody tr[data-href]').addClass('clickable').click( function() { window.location = $(this).attr('data-href'); }).find('a').hover( function() { $(this).parents('tr').unbind('click'); }, function() { $(this).parents('tr').click( function() { window.location = $(this).attr('data-href'); }); });
グリッドレイアウトでWebサイト構築したい時にはGrid calculator and generatorが手軽で良さそう - かちびと.net
なかなか手軽で自分向きだったのでメモ。 グリッドレイアウトを意識したWebサイトの 構築の際に、希望の幅を入れれば、その 幅に応じたグリッドレイアウト用のcssが 生産されます。ファイルはフレームワークの Blueprint cssが生成されます。 手軽で自分好みだったのでメモがてらご紹介。いわゆるグリッドレイアウト用の計算機です。 幅を入れるだけで、作れるレイアウトを自動で計算してcssも出してくれます。cssはBlueprintベースのようですね。 この設定だけでＯＫ。 例えば、960pxで164～200pxくらいのカラムを10px以内の感覚で開けて並べたいという時の設定値だと3通りのレイアウトがあるようです。 条件の幅を広げれば、作れるグリッドの種類も増えます。 レイアウトが決まったら Preview & Download CSSをクリックすればプレビューとDLが可能です。 コンテン
jQuery MobileでGoogleMap APIを使ったサンプルがMITライセンスで公開されてた - かちびと.net
なかなかいいサンプルだったのでシェア。 jQuery MobileでGoogleMap APIを使った サンプルがオープンソースで公開されて いました。ストリートビューなども表示する ことが可能です。興味の有る方はチェック してみては。 スマフォにGoogleMapを表示させるのに、Google Maps JavaScript API V3が必要みたいですが、これをスマフォ対応を簡略化するjQueryプラグイン、jQuery Mobileで使おう、というもの。 jquery-ui-map GoogleMap APIをjQuery Mobileで使ったサンプルです。jquery-ui-mapというプラグインも使用しています。このサンプルはMITライセンスでソースが公開されていますよ。 以下、デモのキャプチャです。 iPhone iPhoneでの実装状態です。 ランドスケープ時も自動で横幅をあ
テーブルにソート、内容編集、行の削除等の機能を加えるjQueryプラグイン・TableGear - かちびと.net
なかなか多機能なライブラリだったので 備忘録。テーブルにソート、コンテンツの 編集や、Ajaxによる行の削除が可能な jQueryプラグイン・TableGearです。この 手のプラグインはいくつかありますが、 中でもかなり高機能な気がします。 jQueryだけでなくmootoolsも用意されてるみたいです。テーブル内でソートが可能で、セル内は編集できます。もちろん、編集後のソートもOK。行そのものを消す事も可能ですよ。 セル内は編集可能で、普段はこのように通常と変らないインターフェースを維持できます。マウスでクリックするとプルダウンや入力エリアが出現。 編集してもソート機能は維持 ソート機能が付いていますが、セル内に変更を加えても、変更後の内容でソートしてくれます。 行の削除も 行ごと削除する事も出来ます。 デモはPHPとMySQLを使って設計してるようですが、他のシステム上でも動作すると
Webデザイナー&UIデベロッパー向けのHTML5/CSS3/jQuery/PHPフレームワーク・G5 Framework
Webデザイナーやフロントエンドデベロッパー 向けのフレームワークが登場したようですね。 HTML5/CSS3/jQuery/PHPを使って構成さ れており、シンプルで軽量。小規模レベルの プロジェクトのスターターキット等にも利用して 欲しい、とのことです。 話題を集めるHTML5やCSS3、jQueryで構成されているので勉強がてら触ってみるのもいいかもしれません。ライセンスはGPLとMITのデュアルライセンスです。 (X)HTML5, CSS3, PHP & jQuery Front-End Development Frameworkとのこと。PHPファイル1枚にHTML5/css3/jQueryを詰め込んだシンプルな構成です。 簡単に始められますよ。最初からそこそこ作られています。 マルチカラムのデモなんかも。 上記はIETesterを使用したIE7のキャプチャ。CSS-PIEなども
以前作った「jQuery Mobileを使ったWPテーマ」を配布しようと思ったら既出だった・・ - かちびと.net
以前、jQuery Mobileを使ってWPの テーマを作成するチュートリアルを記事 にしました。そのテーマを折角作ったの で配布しようと思ったら既にありました。 というわけで、そちらをご紹介します。 内容は多分同じだと思います。 以前書いた、jQuery Mobileを使ってiPhone用のWordPressテーマを作るTipsという記事を見て頂ければたぶん分かると思いますが、jQuery Mobileプラグインを読み込んで必要箇所にidなんかを振ってあげればOKです。 このテーマも同じようなものじゃないかなと思います。折角無料で配布してくれているのでシェア。 Mobile theme jQuery Mobile pluginを使ってテーマを作ったよ、とのこと。CatsWhoCodeの人が作ってたんですね。僕はiPhone以外確認出来ませんが、BlackberriesやAndroidにも
日本郵政が無料で配布してるAdobeAIR製の「はがきデザインキット2010」でサクッと年賀状をデザイン - かちびと.net
日本郵政のWebサイトで無料で配布している AdobeAir製のハガキデザインキット2010 を今更使ってみました。これは凄く素敵です。 まだ年賀状を書いていない方は試しに 使ってみては如何でしょうか。ダウンロード は無料で出来ます。 日本郵政素晴らしいですねー。UIも見易いし、動作も軽いし、直感で使え、年賀状だけでなく普通のハガキにも対応している。これはお勧めしたいです。 インストールは簡単なので割愛します。（※DLして実行→使用者名を入力するだけ。）ダウンロードは時間がかかるので気長にお待ち下さい。 [note]Adobe® AIR® ランタイム（無料）が必要です。[/note] 簡単に使い方を以下に。 ハガキの種類を選択する ↑ 用途に合わせて3つから選択します。今回は「年賀状」で。 デザインキットのスタイル選択 ↑ お好みのスタイルを選択します。今回はノーマルを選択してダウンロード
不動産サイト構築がとても楽になる国産で無料のWordPressプラグイン見つけた - かちびと.net
ちょっと感動したので脊髄反射で ご紹介。日本の不動産サイト向け に作られたプラグインがかなり良い 感じです。不動産サイトの構築も かなり楽になりそうですよ。こういう ものは有料が多いですが、こちらは 無料で提供してくれています。 いつ有料になっておかしくない気がしますので今のうちにDLしておきました。お礼も兼ねて記事にさせて頂きます。 WordPress 不動産向けプラグイン もう、なんというか感謝です。このプラグイン入れるだけで、かなり楽になりますよ。 ざっと機能をご紹介。 専用の投稿画面 ↑ 通常の投稿画面とは別に、専用の投稿画面が用意されています。 画像を種類別に分けられる 不動産独特の画像の種類で分けられます。例えばキッチンとかトイレ画像とか。 管理用項目や詳細項目 物件番号、掲載日や制約の有無なども決められます。状態では空いてるかどうかの選択も。また、物件の種別、賃貸なのか分譲な
個人的に使いそうなPHP、CSS、HTML等のフレームワーク17個 - かちびと.net
個人的なメモです。今まであまり使って いなかったので少し使っていこうと思い、 いくつか自分でも使えそうなフレーム ワークを探しました。表題の通り、PHP、 CSS、HTMLやJS等しか僕は能力が 無いのでこの辺のフレームワークの まとめになります。 使いやすそう、使いにくそうというのは個人差が出そうだなぁと触ってみて思ったのですが、それぞれ良し悪しな感じもしたのでとりあえず気になったものだけメモしておきます。おそらく有名所ばかりだと思いますが個人的なメモなのでご了承下さい。 順不同です。 Blueprint CSSのフレームワークです。シンプルな設計ながら素敵なレイアウトが組まれている印象でした。 Blueprint Sass まだ触っていませんが、好評っぽいのでメモ。Railsみたいですが、CSSジェネレータ的な使い方もあるとの事でかなり気になる存在。Compassというのを一緒に使うの
Web制作に役立つ、何度お勧めしても足りないくらい素敵なツール10選 - かちびと.net
Web制作時、個人的にかなり助かっ ているWebアプリやソフトウェアなど をご紹介。何度お勧めしても足りない 位、助けられています。低スキルな 自分にとっては無いと困る。そんな ツールをシェアしたいと思います。 もっと沢山あるんですが、特に利用しているものを。制作時には毎回利用しているかもしれません。基本的に無料のものを使っています。順不同。 960 grid system グリッドシステムです。ブックマークレットも含め、色々手軽なのが嬉しい。何よりグリッドレイアウトはお客さん受け良い傾向にある気がします。 960 grid system Firebug Web制作といえばFirebugですが、僕はChrome派なのでChromeエクステンションのLite版を使っています。元々、Chromeにはデベロッパーツールがありますし、FxのFirebugも使いこなせてなかったのでこれで十分。 Fi
ボックス内をスクロールすると自動でコンテンツをロードするjQuery - かちびと.net
IE6でも7でも動いてくれるのと なかなか使い勝手も良さそう なのでメモ。jQueryを使った コンテンツボックス内の自動 読み込みを実装します。 去年くらいの記事ですけど見逃してたのでメモ。 Facebookをやられてる方はピンと来るかも。下までスクロールすると自動で次のコンテンツが読み込まれますが、それをボックス内で実装したものです。基本的にどのブラウザでも動くみたいです。 Scrolling Dynamic Content box このボックス内でスクロールすると自動で次のコンテンツが読み込まれ、アイテムの数も表示されます。というか、見たほうが早いですね。 デモ コード コードです。 $('document').ready(function(){ updatestatus(); scrollalert(); }); function updatestatus(){ //ロードしたアイ
透過PNGや角丸などをIE6や7でも実装出来るJavaScriptのメモ - かちびと.net
IE6のPNG透過や6、7での 角丸、ドロップシャドウを実装 するjsライブラリのまとめです。 同じ用途でもライブラリによっ て良し悪しだと思いますので、 備忘録的にメモ。 もうIEはいいよとも思いますが、現実そうも行かないのはもどかしいですね。万能では無いですけど、作業工数を減らせるならjsに頼ってもいいと思います。そういう訳で、透過の問題や角丸、ドロップシャドウを実装してくれるjsのメモ。 IE7.js IE6以下でもIE7と同じようなXHTML / CSSの解釈をしてくれます。要DOCTYPE 宣言。 IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 DD_belatedPNG.js IE6でも透過PNGを実装できるライブラリ。class名等を指定します。リピートにも対応。 IE6用透過png対応策、DD_belatedPNGの使用法と注意点 合わせて読みたい：DD_be
IE6、7でも動いてくれる&実用性の高そうなjQueryプラグイン30個まとめ - かちびと.net
使いやすそうなjqueryプラグイン をまとめました。最低でもIE6,7でも 動いてくれる事を前提にしています。 他サイトでよく見かけるプラグインで、 個人的に実用性のあるプラグインと 思ったものをまとめます。 IE6、7でも動いてくれて、実用性のあるjQueryいろいろ。確認したブラウザはIE6,7とChromeです。他は大抵動くんじゃないかな（適当）。 デモで画像が透過されていないのもありますが、他のjsライブラリでIE6でも透過可能（DD_belatedPNG.jsとか）なのでそこは抜きにして動作する事を条件に挙げています。主観入ってるので参考程度に・・ Horizontal Subnav マウスオーバーでサブメニューがプルダウンするcssメニューです。サブメニューは横に広がってくれます。 Horizontal Subnav Simple jQuery tabs コンテンツをタブで切
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
データを可視化する為のグラフ描画JavaScriptライブラリをまとめた・「JSGraphs」
クロスブラウザ対応・グリッドレイアウトのCSSフレームワーク・FEM - かちびと.net