webデザイナー

様々な有名Web系企業が採用した「ブランドカラー」をコレクションしている・BrandColors

AmazonやYahoo、Vimeo、Google などなど、様々なWeb系の企業 が採用したブランドカラーを コレクションしているWebサイト ・BrandColorsのご紹介。気分 転換に如何でしょう。

汎用的で軽量なツールチップ実装jQueryプラグイン・Tooltipster

使い勝手の良さそうなプラグイン だったので備忘録的にご紹介。 ツールチップを実装するjQuery のプラグインです。マウス追従、 不動タイプの選択が可能、デザ インもCSSのみで作ります。

作成物を手軽に販売できるWebデザイナー向けのマーケットプレイス・Fol.io

ちょっと面白そうだったのでシェア。 Webデザイナー専用のマーケットプレ イス、Fol.ioです。PSDやAI、EPS、 PNGなどのフォーマットを簡単にア ップロード可能で、そのまま販売でき るみたいです。
Ads

単純なパララックス効果を少しのjQueryコードで作る

シンプルなパララックス効果 を少しのjQueryコードで作る というTips。プラグイン化さ れていますのでレイヤーの追加 も簡単です。

ワイヤーフレームやモックアップを作る際に便利そうな、様々な印刷用スケッチシートをPDF等で配布するWebサイト・Sneakpeekit

Webデザイン時のスケッチ用シート をPDF等で配布するWebサイトのご 紹介。とっても使いやすそうでし た。見た目も綺麗なのでスケッチを する方にとってはなかなか便利 かもしれません。

Sublime Text 2に登録できるCSSのスニペット集が配布されてます

テキストエディタはSublime Text 2 が最高に自分に馴染むので去年、正式 に乗り換えたんですが、Sublime Text 2に登録出来るスニペットのCSSのが 沢山配布されていたのでご紹介。

CSS専門のスニペット共有サイト・CSSPop

コードスニペットを共有できる Webサービスは沢山ありますが、 CSSPopはCSSを専門としたコード 共有サイトです。なかなか珍しい し、結構便利な小技も見かけま した。

HTML5で使える要素を時間以内に入力するシンプルなオンラインクイズ・HTML5 Elements Quiz

ちょっとネタ的な話題。HTML5 で使える要素を時間内に入力 していく、というシンプルな クイズサイト。暇つぶしや腕試 しに如何でしょうか。意外と 出てこないもんですね。

ブラウザ上でJavaScript開発が出来るJsbinがバージョンアップして外部サイトに実装デモを貼り付けられるようになったよ

jsfiddle同様に、Javascriptを ブラウザ上で開発、実行テスト 出来るjsbinがバージョンアップ したみたいで、今まで出来なか った外部サイトへの貼り付け等が 可能になりました。

keyframesを使ったアニメーションを実装するCSS3コードをオンラインで生成出来る・Stylie

CSS3のkeyframesアニメーション を生成するWebサービスのご紹介。 同じようなツールは他にも有りま すけど、結構シンプルで良さそう だったのでシェア。実際に動作を 確認しながら作れます。

直感でモバイルサイトのモックアップを作成出来るオンラインツール・Fluid UI

結構良かったのでご紹介。スマフォ やタブレットなどのモックアップを 直感で作成出来るWebサービスです。 かなり簡単に作れるので選択肢の 一つとして覚えておくといいかもし れません。

ミニマルで綺麗目なデザインのパターン素材を配布する・Minimal Patterns

ミニマル且つ綺麗目なデザインの パターン素材を配布するリソース サイト・Minimal Patternsのご紹介。 使いやすそうで重宝しそうです。 スマフォのアプリの背景にもいい かも知れません。

jQueryを使用している良デザインなWebサイトを集めたWebデザインギャラリー・Best jQuery

jQueryをうまく取り入れた良デザインなWebサイトを収集しているデザインギャラリー・Best jQueryのご紹介。jQueryを使用するWeb制作者さんには、インスピレーション向上だけでなく、コードやUIも参考になるかもですね。

ベーシックなコンテンツスライダーを実装するjQueryプラグイン・EVO SLIDER

お休みですので軽い話題。もう いいだろってくらい出回ってい るコンテンツスライダーですが、 汎用性が高そうだったのでご 紹介。アコーディオンにも出来 るプラグインです。

画面サイズに応じて任意のCSSファイルをロードするJavaScriptライブラリ・sizeit.js

画面のサイズを指定して、その サイズに応じて任意のCSSファイル をロードするスクリプトのご紹介。 Media Queries等によってCSSが 肥大化してしまった場合は使って あげると軽量化できるかもですね。

グローバルメニューとかでマウスホバーしているリンク以外にCSSだけでブラー効果を与える

JavaScriptでよく見かける、ホバー 状態のアイテム以外にエフェクトを かける、みたいなのをCSSで実装する という内容です。目新しい手法では 無いです。

スマフォ向けサイトを構築する為のシンプルなJSフレームワーク・Sidetap

ちょっと良さそうだったのでメモ。 スマフォ用サイト向けのシンプル なフレームワーク・Sidetapです。 jQueryのライブラリですので、動作 にはjQueryが必要ですが、ライブ ラリ自体はそこそこ軽量みたい。

チェックボックスやinput要素などのフォーム周りのユーザビリティを少しだけ向上できる地味に便利なjQueryコードいくつか

フォームで利用するjQueryのスニペット コードをいくつか。どれも既出だと思う のでおさらいという事で。とはいえ、所詮 はスニペットですので実際に導入する際 は動作をしっかりと検証する事を強く 推奨します。

ol要素で利用出来るHTML5のreversed属性をjQueryでクロスブラウザ対応にする

HTML5でol要素でリストに振る番号 を逆にするreversed属性が追加され ました。と言ってもまだChromeしか サポートしていません。便利っちゃ 便利なのでjQueryで他ブラウザに 対応します。

ChromeのデベロッパーツールでCSSの未使用セレクタを調べる方法

Google Chromeのデベロッパーツール で現在閲覧中のページでロードされて いるCSSファイルから未使用のセレクタ を調べる、という方法です。こんなの Web制作者にとって常識だろ、みたい な内容だったらごめんなさい。

Dribbbleの投稿をjQueryで自分のサイトに表示させる

ちょっと調べ物をしたので備忘録です。 デザイナー専門のコミュニティサイト、 Dribbbleの投稿を自分のサイトに表示 させる方法。APIとjQueryを使って表示 させて見ます。日本ではDribbbleの利 用者は少なそうですけ...

JavaScriptも使わず元画像も変更せずに画像をグレースケール表示させる

ちょっと調べ物をしたのでメモ。 画像1枚だけで、グレースケール、 マウスホバーでカラー画像に、 みたいなのを実装したい、出来れ ばJavaScriptも使用せず、みたい な内容です。
Ads