任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリ・「CSS Code Quality」 - かちびと.net
CSS Code Qualityは任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリです。JavaScriptで書かれています。 解析したいCSSを利用しているWebサイトのURLを入力すると自動で解析し、メンテナンス性、複雑さ、パフォーマンスの3項目をそれぞれスコアリングし、その内訳レポートを提出してくれます。 大きくスコアを下げる要因は赤、出来るだけ改善すべき要因はオレンジのラインが引かれます。レポートはその場に表示されますがJSONでも提供してくれます。直接CSSコードを貼り付けてチェックする事も可能です。 CSSの最適化や改善作業などを手助けしてくれそうですね。ライセンスはMIT。 CSS Code Quality
クリックで開閉するスライドパネル - かちびと.net
Result jQuery $(document).ready(function(){ //クリックイベント $('.head').click(function(){ //class="row"をスライドで表示/非表示する $(this).next('.row').stop(true, true).slideToggle(); }); }); html <div class="head">Panel 1 </div> <div class="row"> <div>Panel 1 sample</div> <div>Panel 1 sample</div> <div>Panel 1 sample</div> </div> <div class="head"> Panel 2</div> <div class="row"> <div>Panel 2 sample</div> <div>Pane
高機能で非依存のlightboxスクリプト・「lightgallery.js」
lightgallery.jsは高機能で非依存型のlightbox実装のためのスクリプトです。レスポンシブWebデザイン対応、タッチデバイス対応、自モジュール型、YoutubeやVimeo、HTML5 Video等のサポート、iframeやGoogle Mapのサポート、20種から選べるCSS3 transitionsによるアニメーションエフェクト、各SNSへのシェアボタン、ハッシュプラグイン対応、フルスクリーン化対応などなど、よくあるlightboxの機能を詰め込んだようなもので且つ、jQuery等のライブラリに依存せず単体で動作してくれるのが特徴です。モジュールはオートプレイ、動画、フルスクリーン化等がデフォルトでビルトインされているみたいです。ファイルサイズは非圧縮の状態で42KB、圧縮版で24KBほどです。なかなか良いのでは。ライセンスはApache 2.0。 lightgalle
軽量、レスポンシブでエレガントなモーダルウィンドウを実装出来るjQueryプラグイン・「iziModal」
iziModalはRWD対応で軽量、エレガントなモーダルウィンドウの為のjQueryプラグインです。任意のコンテンツは勿論、iframeや通知などにも対応可能で、タイトルや空＾設定など、細かい設定項目が用意されています。ファイルサイズは圧縮版で10kbほど。サイズ自体は軽くは無いかもしれませんが、この機能にしては軽量、という事でしょうか。完成された形なので使い所は限られますが、手軽に導入出来る点は魅力ですね。ライセンスはApache2.0とのこと。 iziModal
WordPressのオリジナルテーマ作成フロー・基本マニュアル
初めてWordPressオリジナルテーマの作成にトライしたい、という方向けの基本のマニュアルです。マニュアルというほど大袈裟なものではありませんけど、ある程度敷居が低くなると嬉しいなぁという思いを込めて記事にします。 この記事の内容はあくまで基本中の基本で、初心者・ノンプログラマー向けとなっていますので応用的な情報は殆どありません。また、説明の仕方も分かりやすさ重視で、厳密的にはちょっと違う点もあります。 初心者さん向けに、もう少し情報があってもいいかなと思って、書いてみることにしました。僕もまだまだ初級レベルなので一緒に学んでいきましょう。初級者レベルでこんな記事書くなって話ですけども。 目次 目次です。各セクションで必要と思う場所から見るようにしてください。 はじめに 作成するWebサイトの目的と構造 テーマ作成前に用意するものと環境 テーマの構造を（触り程度だけでも）理解する HTM
ユーザーが簡単にフィードバック出来るようにするTwitter投稿ボタンをjQueryで作る
Twitterの利用法の一つとしてユニーク なモノがあったので備忘録的にご紹介。 Twitterを簡易的なフィードバックツール にしてしまおう、という内容。今まで通り Twitterに投稿するボタンに、感想を加え るようにします。 普段、TwitterではURLとともに感想が書いてあることが多く、フィードバックのツールとしてTwitterを利用しているWebサイトも少なく有りません。このフィードバックをもっと簡易的にしてみよう、というのが今日の内容です。 サンプルは記事の下のほうにあります。 jQueryを使います。僕は基本的にWordPressを使う人なのでWPにあわせたコードです。便宜変更してください。 $(function(){ var url = "<?php the_permalink() ?>"; var post_title = "<?php the_title(); ?>"
Tumblrのオリジナルテーマ作成用フレームワーク・tumblr-framework
Tumblrでオリジナルのテーマを自作 するためのフレームワーク・tumblr -frameworkのご紹介です。日本でも 企業が公式ブログ等にTumblrを使い 始めていますのでこういったフレー ムワークも確保しておくと良さそう。 女優の水野美紀さんや楽天、NISSANのキャンペーンサイトなどなど企業や著名人でも徐々に利用し始められてきたTumblrですが、テンプレートは独自の記法を用いて作成する必要が有ります。 この独自記法が予め書かれているフレームワークがtumblr-frameworkです。 Tumblrのオリジナルテーマを作成するためのフレームワーク。 以下のような、よく使われるタグや条件分岐タグなどが一通り備わっています。 <h1 title="{Title}"><a href="/">{Title}</a></h1> {block:Description} <p class=
Sublime Text 2のショートカットキーで便利なやつ何個か（Windows版） - かちびと.net
Sublime Text 2で個人的によく 使うショートカットキーをご 紹介します。別件でメールして た時に聞かれたので書いてみる 事にしました。Windows版のショ ートカットになります。 個人的に便利だと感じたSublime Text 2のショートカットキーを紹介してみます。僕はまだ使い始めて半年くらいしか経って無いですし、機能を十分に使いこなせる訳では無いので参考程度という事で・・ 一括置換 文字列の一括置換です。便利なので、これがないエディタはもう使えません。 Ctrl+D（同じ文字を複数選択→一括編集） ↑ 任意のテキストの上にカーソルを合わせてからCtrl+Dで、その文字と同じ文字に標準をあわせられます。 Ctrlを押したまま、複数選択したいところにカーソルを再度持っていってDを押せばその場所も選択可能です。 ↑ 選択したテキストは一括編集できます。 ただし、同じ文字列「全て
Sublime Text 2に登録できるCSSのスニペット集が配布されてます
テキストエディタはSublime Text 2 が最高に自分に馴染むので去年、正式 に乗り換えたんですが、Sublime Text 2に登録出来るスニペットのCSSのが 沢山配布されていたのでご紹介。 テキストエディタの個人の好みはOSと同じくらい布教活動が盛んな、宗教染みた部分が垣間見えるので、正直言って心底ウザい言葉にするだけで不快に感じる方もいるかもと思ってからTwitterで言ったり記事にしたりとかにはしないようにしてるんですけど・・・（宗教が悪いと言ってるわけじゃないですよ。押し付け感や比較対象を貶す行為が嫌なだけです。） 折角なのでスニペットの紹介ついでに簡単にご紹介します。あ、もちろんWindows版もMac版もあります。僕はWindowsユーザーなのでその目線で書いていきますね。 エディタは1に起動スピード、2に使いやすさ、カスタマイズ性もあると嬉しい、といった視点で選ぶの
JavaScriptのライブラリを沢山集めてカタログ化しているWebサイト・Jster - かちびと.net
JSライブラリのまとめサイトの ご紹介。既知の方も多いかもし れませんが、探すのに便利なの で改めてご紹介します。カテゴ リ分けもしてくれているので探 しやすいです。 様々なJSライブラリがまとめられています。探し物がある際は覗いてみるといいかも。 UIやメディア、グラフィック、ユーティリティなどのカテゴリに分けられています。現在は900ほどのライブラリがまとめられています。 シンプルで探しやすいのではないかと思います。ライブラリはそれぞれ簡単な説明もしてくれています。 パッと見たところ、評価の高い印象のライブラリに絞ってくれている・・・気がしました。（気がするだけかも 困ったら覗いてみようと思います。 Jster
アイコンやシルエット、矢印など、シンボルタイプのフリーフォントまとめ - かちびと.net
アイコンやシンボルなどの形をしたフリーフォント のまとめ。なかなか使い勝手が良いものがいつ のまにか増えていたので色々とまとめてダウン ロードしましたのでその過程で良さそうに感じた ものをシェアしてみます。まだお盆明けだったり お休み中な感じなので軽めの話題で・・ というわけでシンボルタイプのフリーフォントのまとめ。サクッとアクセント加えたい時にアイコン作ったり、というのも面倒なのでフォントで済むならそのほうが早いですし、いくつか覚えておくと便利なんじゃないかなと。 順不同です。ライセンスは各々でご確認ください。 SYMBOL SIGNS ピクトグラムとか標識でよく見かけるシンボルのフォント SYMBOL SIGNS NOTICE こちらも標識で見かけるタイプの角丸フォント NOTICE DINGBESTS 鉛筆や消しゴム、電話機など使い勝手の良いデザインフォント DINGBESTS GL
画面サイズに応じて任意のCSSファイルをロードするJavaScriptライブラリ・sizeit.js - かちびと.net
画面のサイズを指定して、その サイズに応じて任意のCSSファイル をロードするスクリプトのご紹介。 Media Queries等によってCSSが 肥大化してしまった場合は使って あげると軽量化できるかもですね。 指定したブレークポイントに合わせて、ロードするCSSファイルを指定出来る、というスクリプト。非依存型なので単体で利用可能、サイズも圧縮版で1.7kbほどと軽量です。 Sample Media Queriesの場合、不要なCSSもロードしますが、sizeit.jsはブレークポイントに応じたCSSファイルのみを読み込むのでうまく使えば軽量化が可能です。 さて、サンプルですが、JQMを利用し、ブレークポイントを以下のように設定しました。 幅が600px以下ならJQMのCSSをロード 幅が1024px以下なら何も読み込まない それ以外はJQMのCSSをロード こう設定すれば、601px～1
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 コンテンツをタブで切
WordPressの管理画面のデザインをFacebookっぽく変更するプラグイン・Blue Adminで思いのほか見やすくなった
思いのほか見やすくなったので 備忘録も兼ねてシェアします。 WordPressの管理画面のデザイン をFacebookライクにしてくれる プラグインです。これは結構 いいかもしれない。 失礼な話ですけどテストするまでさほど期待していませんでした。実際に試したら結構見やすかったので管理画面のデザインの参考にもなりましたよ。プラグイン自体はFacebookを意識したとは書いていないんですけどかなり似ています。 プラグインを使用した際のWordPressの管理画面です。実際に見たほうがピンと来るかもですけど、かなり見やすい気がしました。このまま納品物に使う事はありませんけど、テキストや余白具合がいい感じなので上手く利用すれば結構工数減らせそうです。 ↑ 比較です。ウィンドウサイズとキャプチャしたページは統一してあります。 ↑ デフォルトの管理画面はサイドメニューとメインエリア、アイコンのカラース
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プラグイン224個まとめ - かちびと.net
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語 English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 Lightbox Lightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リアルタイムにグラフを描けるチャートライブラリ・「Epoch」
responsivepx for Japanese
UIコンポーネントに特化したCSSフレームワーク・「modulr.css」
Media Queryを使用したレスポンシブWebデザインの構築時にはResponsivepxっていうツールが超オススメです - かちびと.net
