閲覧中のWebページに使われているCSSを解析してくれるChromeエクステンション・「CSS Dig」CSS Digは閲覧しているWebページに使われているCSSを解析してくれるChromeエクステンションです。どのプロパティがどのように扱われているかを分析し、左カラムにリストにして返してくれます。クリックすれば右カラムにそのプロパティを使っているclassやidを出してくれます。べんり。 CSS Dig
フォームでユーザーにヘルプをツールチップで実装するjQueryプラグイン・jQuery FormHelp
割と需要ありそうなので備忘録ついでにご紹介。ツールチップで実装する、テキストのフォームヘルパーです。「こういう具合に入力してね」みたいなのを明示するやつ。 フォームのそれぞれの項目にヘルプを作るスクリプトです。マウスホバーやフォーカスでツールチップを出す、というもの。プラグインで実装するほどのものでも無いかもですけど、これはこれで楽そう。 動作サンプルです。HTMLを普通にマークアップするだけで自由にツールチップ内に実装できるのは楽ですね。 コード 本体とプラグインを読み込みます。 $.formHelp();コールします。 <input id="input-email" type="email"/> <span class="helptext" data-for="#input-email"> <p>ここにツールチップ</p> <hr> HTMLが自由に使えます <ul> <li>One<
日本のWebサイトの404ページデザインいろいろ+α
気になって探したのですが、ググッても 9割は海外のデザインだったので、日本 の素敵な404ページを探してみました。 時間の関係でさほど数を揃える事が出来 ませんでしたが、少しでも参考になれば 幸いです。 404は、誰でも訪れる可能性のあるページです。ある意味、用意したコンテンツよりも見られる可能性がありますのでほんの少しでも手を入れておくといいかも知れませんね。 どこかで「404は古い。無条件でトップページリダイレクトが最適」なんて意見も見かけましたが、個人的にはユーザーを混乱させる要因になるのでリダイレクトは避けたほうがいいと思います。 では、個人的に気になった404ページをご紹介していきます。順不同で、ややサイトの属性がWeb関係に偏っていますがご了承ください。尚、リンクは404ページではなく、TOPページにしてあります。 株式会社サクラクレパス デザインも好評のサクラパレスの404ペ
HTML5やCSS、jQueryなど、Web制作に関する日本語スライドを集約したSlideFinderが便利っぽい
結構便利だったのでシェア。Web制作 に関する日本語スライドを集約している フォロワーさん作のWebサービスです。 話題のHTML5やCSS、iPhoneの事や jQueryからPHPやRubyと幅広くサポート してあります。 人気のスライド共有サイト、SlideShareで日本語のスライドのみを集めています。スライドはその場でLightbox風にポップアップして見れます。英語が苦手な方も探す手間が省けるのでは。 @deeekiさん作のWebサービスです。クックパッドのエンジニア向け「第2回 開発コンテスト24」に応募する予定だったようで、数時間で作成されたみたいで見た目はシンプルですね。 カテゴリもHTML5やjQuery、PHPやiPhone、WordPressなど多岐にわたりサポートされていますので全Web屋さん向けと言えそうです。 日本語のスライドのみを集約 集められたスライドは全
テーブルにソート、内容編集、行の削除等の機能を加えるjQueryプラグイン・TableGear
なかなか多機能なライブラリだったので 備忘録。テーブルにソート、コンテンツの 編集や、Ajaxによる行の削除が可能な jQueryプラグイン・TableGearです。この 手のプラグインはいくつかありますが、 中でもかなり高機能な気がします。 jQueryだけでなくmootoolsも用意されてるみたいです。テーブル内でソートが可能で、セル内は編集できます。もちろん、編集後のソートもOK。行そのものを消す事も可能ですよ。 セル内は編集可能で、普段はこのように通常と変らないインターフェースを維持できます。マウスでクリックするとプルダウンや入力エリアが出現。 編集してもソート機能は維持 ソート機能が付いていますが、セル内に変更を加えても、変更後の内容でソートしてくれます。 行の削除も 行ごと削除する事も出来ます。 デモはPHPとMySQLを使って設計してるようですが、他のシステム上でも動作すると
取り敢えず入れてみたiPad専用の無料アプリ26個 - かちびと.net
iPadを友人から頂いて、その１ヶ月後には 解約しようと思っていたイーモバイルの回線 をポケットWifiに変更できる上に料金も安く なる的なキャンペーンのお知らせがイーモバ から来たので、解約をせずにWifiにした事で iPadのネット環境が整ったので、楽しさが 数倍増しました。 なんとなく影の薄いiPadですが、僕は期待しているデバイスの一つです。 そんなiPadに、iPad専用の無料アプリを取り敢えずいろいろとインストールしてみました。今日は、今更感漂うiPadに関するアプリ記事です。 Twitter for iPad Twitter公式のiPadアプリです。もちろん無料。いくつかアプリはあるのですが、僕は公式が一番相性良かったです。ぬるぬる動きます。 AppStoreに行く Flipboard TwitterやFacebookのタイムラインを雑誌レイアウトに変換してくれるアプリです。
厳選して使用している便利なChromeエクステンション19個
メインブラウザをFirefoxからChrome に変更して暫く経ちます。Chromeも かなりエクステンションが豊富になって きました。いろいろとエクステンションを 試して、微妙に感じて消して、の繰り返 しですが、そんな中、マストに使ってい る拡張をご紹介します。 色々試して、最終的に残ったChromeエクステンションのまとめです。 CSS Tester どのページでもcssの追加テストが出来ます。すぐに反映されるので結構便利。 CSS Tester CSSViewer 先日記事にしましたが、インストールしてから毎日使っています。マウスを乗せるだけでその要素のcssを表示。便利ですねー。 CSSViewer View Selection Source ドラッグした部分のみのソースを表示します。Web制作時によく使っています。使い慣れるとほんと重宝します。 View Selection So
国産のWebデザインギャラリーサイトが一番参考になるのでまとめた - かちびと.net
Webデザインのギャラリーは沢山 ありますが、結局感性の近い国産 のギャラリーが一番参考になるの でまとめました。探してみると結構 いろいろあるんですね。助かります。 やはりギャラリーは国産がいいですね。沢山あるので、ある程度厳選しています。 io3000 最近知りました。すごくいいですね、ここ。見やすいし、使いやすいです。おすすめ。 io3000 straightline bookmark とにかくクールでクオリティの高いサイトをブックマークしているギャラリー。 straightline bookmark Web Design Clip こちらも個人的にオススメのギャラリーサイトです。目的のデザインも直ぐに見つかりますよ。 Web Design Clip Good Design Web こちらは他ではあまり見かけない良デザインのサイトを紹介してる貴重なギャラリーです。 Good Desi
公式Twitterを使いやすくするChromeのエクステンション・Twitter Plus PlusとTwitter Extenderを併用してみる
こちらもなかなか。 併用すると以下の機能が追加されます。 Old Retweet いわゆる非公式RTが可能になります。 その場でDM その場でDM送れます。 短縮URL 短縮URL（goo.gl）が使えます。 動画はその場で、画像はアイコン 動画はその場で表示、再生可能です。画像はカメラのアイコンがつきます。 翻訳 機械翻訳ですが、翻訳出来ます。 雑感2つの拡張なので衝突してるっぽくて、機能しないものもあります。確認できたのは「Twitter Plus PlusのShareが機能しない」が機能しませんが、個人的にに必要性は感じないので問題なしです。因みにオンにする方法わかりません。あと、Twitter Plus Plusを使うと、右サイドバーにアドセンス表示されます。 TwitIQのリプライのネスト化が良かったんですが、我慢するしかないですね。当面併用して使ってみることにします。 Twit
リストに使えそうなフリーの小さいアイコンセットまとめ
リストアイコンをよく探してるので 自分用にまとめ。小さいアイコン だけにしています。結構迷うんで すよね、リストアイコン。そのまま 使えそうなのとか参考になりそう なものとか色々です。 リストアイコンいろいろです。諸事情で時間がなかったのであまりライセンス見ていません。一応フリーみたいですが利用条件等はご自身で判断してください。 Free Website Bullet Icons 使いやすそうです。 Free Website Bullet Icons Liste de puces pour design de sites internet. シンプルでいいですね。 Liste de puces pour design de sites internet. 300imagesfrom1800sites 有名なやつです。 300imagesfrom1800sites Mini Icons 小さ
知っておいて損しない、地味に便利なWordPressのデフォルト機能
WordPress存在は知っているけどあまり 使われていない印象、という WordPressのデフォルト機能 のご紹介。個人的な印象なの でもしかしたら凄くポピュラー な機能かもしれませんが・・ 存在は知っているけどあまり 使われていない印象、という WordPressのデフォルト機能 のご紹介。個人的な印象なの でもしかしたら凄くポピュラー な機能かもしれませんが・・ 殆どは知られていると思いますので期待しないで下さい。1つでも「これ知らなかった！便利！」と思ってくれる方がお一人でもいれば幸甚です。 やや地味な機能なのですが、知っておいて損しない便利な機能です。順不同。 Press This Press Thisというブックマークレットがお使いのWPの管理画面→ツール→ツールからインストール出来ます。これが結構便利で、引用したいと思った他サイト等でブックマークレットを使えばその場で上図の
Youtube動画をクール且つシンプルなプレーヤーで実装するjQuery
cssやプログラミングシンプルな動画プレーヤー Youtubeのインターフェースが 気に入らない、という方向け ですね。Youtube動画をクール でシンプルなプレーヤーで 実装出来るjQueryのご紹介 です。 Youtubeのインターフェースが 気に入らない、という方向け ですね。Youtube動画をクール でシンプルなプレーヤーで 実装出来るjQueryのご紹介 です。 ブラウザはIE6、IE7やSafariでも実装出来ますが、Operaだけ実装出来ませんでした。IE6はやや難ありです。 Custom YouTube Video Player 再生ボタンのみのシンプルなインターフェース。再生ボタンは画像を変えれば変更できますよ。 再生中にマウスオーバーしても上記のように停止ボタンとタイムバーのみのシンプルなプレーヤーです。 再生が終っても関連動画は出ずにリプレイボタンが出るだけです。
WordPressの管理画面のデザインをカスタマイズ出来るプラグイン・Qwerty Admin Panel Theme
WordPressをWeb制作受注の際に 利用されている方にお勧め。WPの ログインページ、管理画面のデザイン をカスタマイズ出来るプラグイン、 Qwerty Admin Panel Themeを ご紹介します。 管理画面内のWPのロゴの変更法を以前記事にしましたが、このQwerty Admin Panel Themeならログイン画面のロゴもまとめて変更する事が可能です。WordPressを使ったWeb制作を受注される方は導入を検討してみては如何でしょう。 変更後の管理画面です。画像はプラグインフォルダ内に同梱されているので変更するだけ。カラーなどは管理画面で行なえます。変更可能箇所は上から ヘッダーとフッターのテキストカラー管理画面メイン部分のテキストカラーサイドメニューのリンクテキストカラーコンテンツのリンクカラーサイドバーのタブ部分のテキストリンクのマウスオーバー時のカラー同等に背景
最近知ったフリーのHTML5テンプレート6個
ちょこちょこ紹介されている HTML5を使ったテンプレート で少しずつ学び始めていま すが、そんな中で最近知った テンプレートを備忘録的に記事 にまとめておきます。 ちょこちょこ紹介されている HTML5を使ったテンプレート で少しずつ学び始めていま すが、そんな中で最近知った テンプレートを備忘録的に記事 にまとめておきます。 いままでに出ているHTML5のテンプレートは以下の記事をご参照下さい。 ・HTML5で構築されたテンプレート・フレームワークいろいろ – DesignWalker ・10+ Free HTML5-CSS3 Website Templates 以下はここに紹介されて無いテンプレートです。実践で学ぶタイプの人間なのでこういったテンプレートはありがたいです。 Music Portfolio Template 音楽関連のサイト向けにデザインされ、コンテンツを作ってあります
スクリーンショットを撮るChromeエクステンションはAwesome Screenshotが一番良かった
やっと捜し求めていたものに出会えた と思ったChromeのキャプチャ系のエク ステンション。いくつかあるんですが、 どれも微妙でした。で、ようやく自分の 求めていた機能を持ったエクステが 出てくれました。 Awesome Screenshotです。もう結構DLされてるんですね。人気のWebpage Screenshotが最近よくクラッシュするし、他のも微妙で困っていました。 ブロガーさんには特にオススメです。個人的に求めていたのは 軽量操作が楽多機能で無くていいからシンプルにページ全体を撮れるクラッシュしないという条件だったのですが、これらは全てクリア、クラッシュはまだ分かりませんし、環境によりけりでしょうけど・・更に編集機能まで付いています。何より、動作が軽いのが決め手でした。 使い方 DLするとアイコンが出ます。キャプチャを撮りたいページでアイコンをクリックすると「見えてる部分」か「全
jQuery+CSSで実装するナビゲーションメニュー総集編
cssやプログラミングcss+jQuery jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Do
jQuery+cssのパネルが滑らかにスライドする、クールなドロップダウンメニュー
cssやプログラミングスライドパネルメニュー なかなか良さそうだったのでメモ。 例によってIE6は上手く実装できて いませんでしたが、cssハックでも 使えばなんとかなるかな・・見た目 もクールで素敵なのでどこかで 使いたいです。 なかなか良さそうだったのでメモ。 例によってIE6は上手く実装できて いませんでしたが、cssハックでも 使えばなんとかなるかな・・見た目 もクールで素敵なのでどこかで 使いたいです。 マウスオーバーすると右側は横へスライドしてパネルがドロップダウンします。アニメーションはjQueryで実装しているみたいなのでIE7,8等でも滑らかに動いてくれます。css3で動かしてるとIE全部だめですからね・・ Large Drop Down Menu 見た目も素敵。ドロップダウンしてくるメニューもデザインされているのでなかなか使う場面もありそうです。IE6では表示が崩れてい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
クリッカブルな日本地図を実装するjQueryプラグイン・「Japan Map」
電車の乗り換えマップを作成できるJavaScriptライブラリ・「transitive.js」
かちびと.net
