Google Chromeのブックマークをインスタンス検索やタグ分けできるエクステンション・Stashmarks
Google Chromeのブックマークバーに 登録しているブックマーク群をタグで 分けたり、インスタンス検索できる Chromeのエクステンションのご紹介。 整理してるけどブクマしすぎて使い にくくなった、みたいな方に最適か も。 Chromeのブックマークバーを利用したエクステンションっていう発想はなんだか新鮮かも。あんまり聞かない気がしますね・・・ こんな感じでブックマークバーに登録してるサイトが羅列され、フォルダ分けしていればその名でタグ付けしてくれます。 それだけならこのエクステンションは不要かもですが、検索が便利。キーワードを入れるだけでフィルタリングして表示してくれます。デザインも好み。 キーワードを入れるだけですぐにフィルタリングされます。タグも見えなくなりますよ。大量にブクマしてる方にとっては便利なんじゃないでしょうか。 ただ、ユーザー登録が必要です。必要性は分かりません
著作権放棄のレスポンシブWebデザイン対応CSSフレームワーク・ingrid
シンプルで良さそうだったのでメモ。 パブリックドメインのCSSフレームワ ークです。レスポンシブWebデザイン にも対応していますし、グリッドレイ アウトにも利用出来るのでなかなか 汎用性があるのでは無いかなと。 ライセンスはCC0(クリエイティブコモンズ版のパブリックドメイン)で、著作権は放棄されていますので、気軽に使えますね。 凄く特殊な性能をもったフレームワークという訳ではありませんが、個人的には余計な物が備わってない方がありがたいのでカスタマイズしやすいです。 グリッドレイアウトにも対応しています。 以下、サンプルです。 Sample css/* UNITS These divider classes are set on .ingrid container --------------------------------------------------------*/ .in
アニメーションしながら少しずつ文字を表示させていくエフェクトを実装するjQueryプラグイン・Lettering Animate - かちびと.net
使いどころもありそうだったので 備忘録。文字をアニメーションし ながら少しずつ表示させていく様 なエフェクトを実装できるjQuery プラグイン・Lettering Animate です。 プロダクトのキャッチコピーなんかもこの方法でユーザーの視点を誘導出来るかもしれないですね。Flashでは昔からよく見かける表現かもしれません。 lettering.jsにアニメーションエフェクトを追加したものになります。8種類のアニメーションエフェクトが用意されていました。 以下動作サンプルです。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" sr
Webサイトにおけるユーザービリティの復習をしたので、よくチェックするポイントをリスト化した - かちびと.net
ユーザービリティに関して少し復習したので メモっておきます。初心忘れるべからずという 事で・・・Webサイトは基本的にユーザビリティ を考慮したレイアウトやコンテンツが理想です。 もちろんケースバイケースではありますが、 これは全共通して言える、という事を忘れない ようにメモ書き。 というわけで、申し訳ないですけど目新しい事は何一つ無い内容です。 そもそもこのブログ自体ユーザビリティを考慮した設計とは言えません（「やっちゃダメなこと」もしています）ので全然説得力ない感じです。 いろいろとテスト&エラーをして行きたいのでご了承下さい。 はじめに 正しいユーザビリティはコンテンツによってケースバイケースだと思いますが基本的には僕はヤコブ・ニールセンの考えに従っています。 全ての項目は「すべてが正しい」ものではありません。100のサイトがあれば100通りのユーザビリティが考えられるはずです。場合
商用利用OK、リンクや著作権表示も不要の女性の写真素材専門サイト「モデル・フォト」 - かちびと.net
Warning: Undefined array key "width" in /home/youhei0828/kachibito.net/public_html/wp-includes/media.php on line 1681 Warning: Undefined array key "height" in /home/youhei0828/kachibito.net/public_html/wp-includes/media.php on line 1682 女性の写真素材専門のモデル・フォトは、 商用利用も可能で、リンクや著作権表示 も不要。完全に無料で使える人物写真 素材サイトです。簡単なアイキャッチ等に 使いやすそうな印象でした。なによりリンク 不要というのは貴重ですね。 以前ご紹介したモデルピースと同じく、人物写真素材専門のサイト。人物写真が商用利用OKでリンクも著作権表
スマフォ向けサイト構築等に便利そうな、指定サイズに応じてclass名を加えてくれる軽量jsライブラリ・Selector Queries - かちびと.net
これはかなり便利そうだったので備忘録。 ディスプレイサイズに応じて指定した要素 にclass名を加え、そのclassを使ってデザ インする事でレスポンシブなWebデザイン を設計出来るようにする為のライブラリ。 かなり便利そうです。 この発想はちょっと素敵でした。指定したサイズに応じて要素にclassを与えるので、Media Queryを使用したPCとスマフォ向けサイトで見た目をまったく別のものにすることも出来そう。 特にjQueryやmootoolsといったスクリプトに依存してないのもいいですね。イメージ的には部分的にMedia Queryを手軽に使える、という感じでした。 わずか5KBほどの非依存型軽量ライブラリです。ディスプレイサイズ等で要素が指定した数値になると、class名を与えてくれるので、環境によってデザインを簡単に変更できるようになります。 上記はMedia Query T
WordPressを使ってWeb制作をする為の手順リスト・【改正版】+α - かちびと.net
以前書いたWordPressでWeb制作する際 の手順リストが少し古い情報込みだったり するので改正版を書きます。先日、WPも 3.2のリリースを迎えましたので、手順リスト もアップデートすることにしました。多少考え が変わっているので内容も少し変更有ります。 以前のリストの改正版です。加えて他の情報も一緒に載せておく事にしました。 【2011・07・11】 WordPressインストール サーバーを用意（PHP5.2.4 以上 / MySQL5.0 以上） DBを作成 WordPressをダウンロードし、解凍 wp-config-sampleをwp-configにリネームし、内容をDBに合わせて変更 プリフィクス（接頭語）を変更する（wp_→foodblog_） FTPソフト等でサーバーにアップロード サイト名やパスワード、IDを決める（adminは避ける） 作成したユーザー名でログイン
商用OK・無料でクレジット表記もリンクも不要！日本人の人物写真素材サイト・モデルピース - かちびと.net
これはかなり重宝するのではないでしょうか。 日本の人物写真素材が無料で商用OK,更に クレジット表記やリンクも不要のサイト・モデル ピース。人物写真は基本的にどれも有料か、 あっても日本人ではなかったりですが、こちら は無料ですし、国産のサービスなのでモデル さんはみんな日本人です。 お友達のまさとさん(@makavelicom)に教えてもらいました。ご紹介するモデルピース以外にもいろいろまとめられてるのでチェックしてみてください [note]激安で日本的な写真素材、レンポジサイト一覧[/note] 無料・商用OK・リンクもクレジット表記も不要で解像度も高いです。こんないいサイトがあったとは知りませんでした。足成とは別の選択肢としてかなり重宝しそうです。 日本人の人物写真を専門に扱っていて、無料ながら商用OK、リンクもクレジットも不要とのこと。ありがたい。 数もかなり豊富 数が少ないかと思
「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね - かちびと.net
Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。 jQuer
スマートフォン向けのJSフレームワーク・Wink Toolkitがバージョンアップしてより素敵になったよ
以前ご紹介した、スマートフォン向けの JavaScriptフレームワーク、Wink Toolkit がバージョンアップしたんだぜ、と開発者 さんからわざわざお問い合わせ頂いたの でご紹介。以前もかなり豊富なUIでとても 有意義なフレームワークだと感じましたが、 今回はUI面が特にパワーアップ。 Wink Toolkitがバージョン1.3になって機能もいくつか追加されました。3ヶ月間、UIの改善にかなり力を入れてくれたようで、スマフォにかなり合わせてくれましたよ。 jQuery Mobileライクなインターフェースになりました。もともとUIエフェクトの評価は高かったWink Toolkitですが、全体的なデザインが見直されてかなり垢抜けた感じです。 尚、以前の機能やUIは過去記事をご参照下さい。 Wink Toolkitが割と良かったので日本語サンプル作った Demo 前回はほぼ全てのデモを
jQuery事始め・コピペに頼らず、基礎知識を理解して実際に動かしてみる - かちびと.net
人気のJavaScriptライブラリ、jQueryもかなり 情報が増えました。僕の様に知識が無くても 簡単に動きのあるWebサイトや、更なるユー ザビリティの向上を可能にしてくれましたが、 いつまでもコピペではいずれ困る事になります。 その前にそろそろ基礎から学んでみませんか。 という訳で、jQuery事始め。さほど知識が無い僕が書くのも微妙なんですが、一緒に学んでいきましょう、という事でご了承下さい。内容は基礎中の基礎です。 いつまでもコピペに頼っていては、何か問題が起こったときに対応できませんし、そもそもコピペするならjQueryである必要はありません。 でもjQueryはすごく便利なので、ちゃんと使いこなしたいところですよね。この記事が、誰かが勉強し始める切欠になれば幸いです。 jQueryを使うには まず、jQueryを利用するには本体を読み込む必要があります。方法は2つあって、本
商用利用もOK！新しい、フリーの日本語ゴシックフォント・「フォントポにほんご」 - かちびと.net
先日御連絡頂きました。商用も OKの貴重な日本語のフリーフ ォントに新たに加わった「フォン トポにほんご」です。カタカナ、 ひらがなも漢字も使えますので ぜひ利用させて頂きましょう。 日本語フォントを作ることがどれだけ大変かを考えると、フリーでしかも商用OKで配布してくれる方を尊敬せずにはいられませんね・・・遠慮なく使わせていただきます！ 柔らかい印象のフォントでかわいいですねー。IPAフォントの漢字もOKですよ。これは即DLですね。 ゴシック系で使いやすい印象です。作成者さんからは 各種ウェブデザインやDTPにもお役に立てるのではないかと思います。 とのお言葉を頂いています。本当に感謝です。ライセンスが明記されたテキストファイルも同梱されていますので詳細はそちらをご確認下さい。 リンク先の下部、「フリーフォント ダウンロード.」でダウンロードできます。 Fontopo
ミニマルやシンプルなデザインの参考になりそうな名刺いろいろ - かちびと.net
ちょっと調べ物をしたついでにメモ。 シンプルなデザインの名刺や、ミニ マルなデザインの名刺の例です。 インスピレーション用として残したい ので記事にします。多数あるのです が、特に気になった名刺デザインを 40ほどご紹介します。 という訳で、シンプルデザイン、ミニマルデザインの名刺デザイン例。使用されているロゴがシンプルだから名刺もシンプルになってるだけのような気もしないでもないですが、それはとりあえず気にしないようにしました。順不同です。 Lappin Properties モノグラムなロゴを背景にも並べています。 Lappin Properties papirus 裏表で反転。 papirus Novia 24pt インパクトと色合いが素敵。 Novia 24pt GS Stirling 好みのデザイン。素材も良さそうですね。 GS Stirling T&T 厚さをやや多めに取って色付
国産のWebデザインギャラリーサイトが一番参考になるのでまとめた - かちびと.net
Webデザインのギャラリーは沢山 ありますが、結局感性の近い国産 のギャラリーが一番参考になるの でまとめました。探してみると結構 いろいろあるんですね。助かります。 やはりギャラリーは国産がいいですね。沢山あるので、ある程度厳選しています。 io3000 最近知りました。すごくいいですね、ここ。見やすいし、使いやすいです。おすすめ。 io3000 straightline bookmark とにかくクールでクオリティの高いサイトをブックマークしているギャラリー。 straightline bookmark Web Design Clip こちらも個人的にオススメのギャラリーサイトです。目的のデザインも直ぐに見つかりますよ。 Web Design Clip Good Design Web こちらは他ではあまり見かけない良デザインのサイトを紹介してる貴重なギャラリーです。 Good Desi
リンク不要で商用サイトにも利用可能なフリーのアイコンセットいろいろ - かちびと.net
商用でも使っていいよと言ってくれて いるアイコンセットのまとめです。商用 でもOKだけど、要リンクタイプのクリエ イティブコモンズライセンスや、リンク シェア等の「リンク必須」な商用可アイ コンと、あまり使う機会の無い、ソーシ ャルメディアのアイコンセット、RSSア イコンのみのセットなどは割愛しています。 個人的に実用できる、リンク不要のアイコンに絞っています。一応商用OKを確認してはいますが、さらっとしか見ていないので間違ってたら教えていただければ幸いです。また、ご利用の際はご自身でライセンスを確認してからご利用下さい。 200+ Exclusive Free Icons: “Reflection” リフレクションを与えたモノクロアイコンのセット。 ※リンクウェアでした・・・大変失礼致しました 200+ Exclusive Free Icons: “Reflection” Simpli
Adobeの有料ソフトを買う前に、代替になる無料ソフトでコツを掴もう・使い方まとめ - かちびと.net
デザイン等に一般的に利用されているPhotoshopやDWなどのAdobe製品は高機能で仕事では必須のツールです。しかしながら高額で、手軽に購入出来るという訳には行きません。無料で手に入る代替ソフトがありますので、まずはコツを掴むのにフリーソフトから使ってみてはいかがでしょうか。 全く同じとは行きませんが、例えばPhotoshopの代替ソフトとして有名なGIMPはPhotoshop専用の拡張子であるPSDファイルも開く事が出来ますし、GIMPで作ったファイルをPSDに変換する事も可能です。勉強からスタートするおつもりなら無料のソフトから、という形もありではないかと思います。 そこで、各Adobe製品の代替ソフトとなるような無料のソフトと、その使用法が書かれたサイトをまとめておきます。 代替ソフトに関しては無料で使えるAdobeCS3の代替ソフトという記事を参考にさせて頂きました。 Phot
デザインとか加工とか出来ないからなんかいいの教えて、と言われて教えたツールいろいろ - かちびと.net
友人がブログを始めたのですが、 Web制作もデザインも全く経験が 無いけど、普通な感じがすごく嫌 らしく、知識が無くても加工出来る、 とか良いサイトとかソフトは無いのか、 と聞かれて教えたWebサービスや ソフトが、同じ境遇の方に役立つかも と思って記事にします。 普通に写真や画像を掲載するのではなく、ちょっと個性的な感じにしたい、出来れば無料がいい、でも自分でデザイン作業は出来ないから良いサイトとか無い？とのことでした。 どうしたいのか良く分からなかったので、あんまり一貫性は無いんですが、教えたのは画像加工ジェネレーターとかそういうのです。いくつか提案した中で、友人が喜んでたサイトだけまとめてみます。 BeFunky 画像を加工するジェネレーター。レトロっぽくしたり油絵っぽくしたり。エフェクトも豊富です。 BeFunky flauntR これも加工ジェネレーター。エフェクト以外にフレーム
個人的に使いそうな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
名刺デザインのインスピレーション向上によさ気なギャラリーいろいろ+α - かちびと.net
名刺を新しくしようと考えていて 少しギャラリーを見て周ったので すが、もう一度見なしそうなので ついでにメモ。ギャラリーや、名刺 のまとめられているサイトと、発注 する時にいいかも、と個人的に 思った名刺屋さんをいくつか。 まずはデザイン名刺のインスピレーション向上用のギャラリーやFlickrのグループなどのまとめから。 Creattica とりあえずデザインといえばここですね。ロゴでもお世話になっているギャラリーサイトです。 Creattica-Business Cards Card Nerd 凄く綺麗にまとまっているギャラリーサイトです。シンプルでとても見やすい。上4つは広告です。 Card Nerd itevenhasawatermark.com 簡素なデザインのサイトですが、色でソートできたりするのでなかなか良さそうです。 itevenhasawatermark.com Cardv
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
