ドットインストール代表のライフハックブログ
![マックOSのドック風のメニューが作れる『MacStyleDock.js』 | IDEA*IDEA](https://cdn-ak-scissors.b.st-hatena.com/image/square/d135c029a1addfc5377fae7a8cb91bf273b2a390/height=288;version=1;width=512/http%3A%2F%2Fwww.ideaxidea.com%2Farchives%2F2008%2F03%2F13%2Fdock.gif)
商用でも無料で使えるアイコンを探している。 そんなあなたにおすすめなのが、『PI Diagona Pack』。商用でも無料で使えるアイコン400選だ。 このエントリーでは、10x10pxと16x16pxのアイコンが200個ずつ、合計400個提供されている。 The icons can be used free for any personal or commercial projects. * The icons are licensed under a Creative Commons Attribution 3.0 license. とあるように、個人利用、商用利用共に無料で利用可能。 ライセンスはCreative Commons Attribution 3.0 license。 ブログやサイトなどに、ぜひ使ってみてはいかがだろうか。 商用でも無料で使えるアイコン、チェックして使ってい
noupeにエントリーされている、AJAXを使った素晴らしいCSSのフォームの47のサンプルの紹介です。
海外の WEB2.0 系サイトのデザインを見ていると、どこかしら似ていると感じることが多いと思います。「カドが丸い」「ロゴが反射している」などなど、これまでも様々な点が指摘されてきましたが、最近のトレンドは「クリーンな水平分割」なんだとか: ■ Analysis of Web 2.0 Design & Layout Trends – Part 1: Clean, Colorful and Horizontally Divided (StyleIgnite.com) 「クリーンな水平分割」とは、StyleIgnite による造語。しかしこの表現がピッタリだということは、例に挙げられているサイトを見れば一目瞭然です: ■ shoeboxed.com 上の画像は、現時点でのキャプチャ。画面全体が大胆に水平分割されていて、余白スペースも大きく開けられていますね。まさしく「クリーンな水平分割」。 念
編集元:ニュース速報板より「webデザイナーの職種、学歴、給料」 1 宇宙飛行士(アラバマ州) :2007/10/19(金) 21:34:51 ID:Nlr5GWpE0 ?PLT(12000) ポイント特典 世界のWebデザイナの実態公開! 学歴、給料は? http://journal.mycom.co.jp/news/2007/10/19/042/index.html A List Apartは16日(米国時間)、"Findings From the Web Design Survey 2007"というレポートを発表した。 これは2007年4月24日に"The Web Design Survey, 2007" の名のもとで開始された調査の報告書。 同調査は、Webデザインに携わっている人々の実態を明らかにしようというもので、Webサイトの開発に10年以上携わってきたWebデザ
Webデザイナとして仕事をする上で、ここ数年、個人的にFireworksが手放せないツールになっています。 twitterで某人に「書いて」と言われたのもあるのですが(笑)、Web画像を作るのによいソフトをさがしている人、これから画像編集のためのソフトを選ぼうとしている人の参考に、ということで、個人的にFireworksの気に入っている点など一通りまとめてみようと思います。 ベクター画像とビットマップ画像が等しく扱えるので作業がスムーズ Fireworksは、ベクター画像とビットマップ画像を同時に扱えます。ベクターでちょっとしたアイコンを作るとか、ビットマップ画像を読み込んで編集するとか、すべてが一つのソフトの中で完結できます。IllustratorとPhotoshopを行き来したりするような手間は不要ですし、また複数のソフトを同時起動しなくていいのでマシンにも優しいです。 ビットマ
画像をクリックすると、背景が暗くなって画面中央に画像がうにょ~んと開く透過レイヤー風効果を加えるのが、かの有名な「Lightbox」ですが、「Videobox」はそのムービー版です。対応しているのはYouTube、Google Video、Metacafe、iFilmなど。自分で作成したFlashも利用できます。 詳細とデモは以下から。 Videobox: Lightbox for videos, Youtube, Metacafe, Google Video, iFilm http://videobox-lb.sourceforge.net/ 上記ページにあるサムネイル画像をクリックすれば実際にどんな感じで表示されるかを確認できます。 YouTubeの場合 MetaCafeの場合 Google Videoの場合 iFilmの場合 オリジナルのFlashの場合 最新版はムービーの縦横幅を指
Free CSS Toolbox - Free CSS Validator, CSS Formatter, CSS Compressor Free CSS Toolbox is a freeware productivity software for web developers who work with CSS code. CSS開発に使える「Free CSS Toolbox」。 次の機能を持つWindowsで動作するアプリケーションです。 色わけされたCSSエディター CSSフォーマッター、Beautifier機能 CSSエラーチェッカー CSS圧縮機能 W3C CSS バリデート機能 CSS開発のIDEとして使えそう。
画像に鏡面効果を与えるreflection.js reulection.jsは画像に鏡面効果を与えるjsライブラリになります。 このライブラリを使用すれば、画像を加工することなく画像の下に鏡に反射したようなエフェクトが追加されます。 設置方法 ダウンロードしたreulection.jsをhead要素などで読み込みます。 <script tyle="text/javascript" src="./reflection.js"><script> エフェクトを追加したい画像のclass名にreflectを設置します。 <img src="[画像]" alt="" class="reflect" /> これだけで鏡面効果が与えられます。 サンプル 初期段階で画像が作るのが困難な場合や、背景が設定されている場合はこのライブラリを使えば効率的に作業ができるでしょう。 rheight20~80のクラス名
テーブルをソートできるようにするjsライブラリ-table sorting table sortingはテーブルをソートできるようにするjsライブラリです。 テーブルの内容でソートしたり、奇数行、偶数行にそれぞれ異なるclassをつけたりが可能です。 設置方法 ダウンロードしたsortable.jsをhead要素内なので読み込みます。 <script type="text/javascript" src="sortable.js"></script> ソートの対象のtable要素のclass属性をsortableに設定して、任意のID名をid属性につけます。 <table class="sortable" id="foo"> ソートの対象にしたくない列がある場合はth要素のclass属性にunsortableを設定します。 <th class="unsortable"> ソートの対象にした
20 Most Popular Website Design & Development Sites | eBizMBA Here are the 20 Largest Design & Development Websites ranked by a combination of Inbound Links, Google Page Rank, Alexa Rank, and U.S. traffic data from Compete and Quantcast. 世界的に影響のあるWebサイトデザイン&構築関連サイトTOP20。 w3.org bravenet.com sitepoint.com internet.com HotScripts.com DynamicDrive.com TemplateMonster.com SmashingMagazine.com AListapar
A Pattern Library for Interaction Design This site contains a lot of best practices in Interaction Design. Over the years I have collected examples and insight on their applicability that I share with you here on this. So there is really no 'original' design to be found here, sorry. It has all been done before... See it as a reference or basic 'toolkit' you can use when design user experiences. It
画面設計書について,前回に引き続き,それを書くツールや手法について考えてみましょう。 画面設計書の基本 まずは,画面設計書の中にあるべき情報から見てみましょう。これらすべてがそろっていなければならない,というわけではありませんが,望ましいのではないかと私自身は考えています。 header ページIDやタイトルなど,一目でそのページがどの画面仕様を記述しているかがわかるような「ヘッダー」部分。細かく書くならば,文字コードや対象ブラウザまで記述する場合もある。また,プロジェクトの名前(プロジェクト・コード)や版番号なども記し,似たようなドキュメントの中からも引き出せるようにしておく。 footer 制作サイドのコピーライトやページ番号などを記す。最終的には,クライアントのコピーライトに置き直して,最終納品とする場合もある。 Page Layout 画面内に配置する「ユーザー・インタフェース(U
Webサイトを構築する場合,通常は「設計書」を作成します。サイト全体の設計書であったり,ページ単体の設計書であったりするわけですが,今回は後者である「画面設計書」について考えてみましょう。 画面設計書を読むのは誰か Webサイトの構築では,対象ユーザーをできる限り具体的に決めてから開発を進めていきます。同様に,画面設計書にも「対象読者」を見定める必要があります。結論から言えば,かなり属性の異なる二種類の読者が存在します。 まず,発注者である「クライアント」です。クライアントは,技術的な難易度ではなく,自分たちのビジネス要件を満たすものが作られるかどうかを確認するために画面設計書を読みます。開発(プロジェクト)のゴールや,プロジェクトのメリット/デメリット,リリース後の顧客満足の予想などを,その設計書から読み取ろうとします。したがって,できる限り具体的なイメージが伝わるものが要求されます。
Have a Slice This is an example of creating a semi-dynamic pie chart without the use of server-side imaging libraries CSSだけで円グラフを表示するサンプル。 次のような円グラフをCSSのみで実現するサンプルが公開されています。 HTMLコードは以下のようにシンプルに表現できます。 <div class="shadow"> <div id="example"> <div class="pie size35"></div> <p class="percent">37%</p> </div> </div> 次のような1個の円グラフを並べた横長画像のbackground-positionをずらして、必要な部分だけ表示することで実現しているようです。 サーバサイドでもクライアントサ
CSSでいつも悩まされるのはクロスブラウザですけど、フォームでは特に面倒くさい要素が山盛りですよね。ボタンの文言を動的に変えたいから画像はなるべく使いたくないけど、だからといってブラウザのデフォルトのボタンとか、味気ないですものね。 今日は、フォームにつきもののボタンについて考えてみます。 私たちがボタンに求めるモノって、何でしょう。 データを送信(submit)する どのブラウザでも同じように見える 使い回しが聞く ボタンについている文言がどんなに長くなっても、水平方向の長さがフレキシブル 上記のようにサイズ的にフレキシブルであっても、見た目の美しさを阻害しない ボタンの大きさ=クリックできるエリアの大きさ 画像がdiableされていても使用可 CSSがdisableされていても使用可 ボタンのように見えて実はただのリンクの時のもある これらの要求を解決してくれる方法が複数出
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く