45 Examples Of Websites Designed With HTML5 | Free and Useful Online Resources for Designers and Developers これは必見のWEBデザインの近未来。HTML5で構築されたサイト45 CSS3なんかも取り入れてデザインは去ることながら、動きもいい感じに実装されています。 WEB業界に身を置く方ならばデザイナーならずとも、出来ることを知っておくという意味で必見のサイトが多数。 多くのプロフェッショナルなサイトにおいてこうした物が近い未来当たり前になっていきそうな予感。 今後、より多くの知識と動かし方に関する引き出しを身に付けた上でクリエイティブな仕事が求められそうで大変な反面、面白いことにもチャレンジできそうな可能性を感じます。 ソニーのタブレットのサイト。超カッコいいです 他にも多数の動き

異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 2011年06月27日- Official Demo page for MyThumbnail jquery plugin 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」。 画像は普通に並べると高さやサイズも一定ではなくかといってサイズしていで縮めちゃったとしても幅は一定になりません。 このプラグインを使えば指定のサイズにまるめてくれるだけでなく、トリミングもして画像が変な方向に伸縮しないようにも調整してくれます 次のような画像を並べただけの状態があったとして。 次のように、指定したサイズに調整した上でトリミングもしてくれます（角丸はCSSで指定してます）。 HTMLは次のようにかなり単純に<a>付きの<img>を並べただけです。 <div

Freebie: Massive Web UI & Button Set | MediaLoot ボタンやインフォボックスなどを集めたＵＩパーツのPSD。 次のようなデザインのＵＩパーツキットがダウンロード可能です。 サイトにあてはめてより分かりやすいデザインにするために活用できそう PSD形式なので色は自由に変えられます 関連エントリ クオリティの高いUIパーツのPSDファイルを日替わりで「365psd」 ボタンやフォーム要素、シールなどWeb2.0っぽいUIパーツ集 Extバリの超クールなUIを提供するJavaScriptライブラリ「Jx Library」

Useful (Offline) Utensils and Toolkits for Designers | Tools オフラインで使えるデザイナー向けツールキットが色々まとまってましたのでご紹介。 ノートパソコンでどこでも作業できるからとはいえ、自由度と使い勝手からアナログが便利な場合も多いですね。 印刷するなどしてどこでも作業できるツールキット集です Paper Browser ブラウザの枠と、グリッドベースの画像を印刷してモックを手書き出来ます Grid Design Graph Paper グリッドと端にノートが表示されているテンプレート。印刷して使えます iPhone APP Wireframe template iPhoneアプリケーション作成時のモック作成用テンプレート iPad IDEA Sheet iPadのアプリ作成時などに使えます 便利なものが他にも色々と紹介されて

Gmail Manager :: Add-ons for Firefox Gmail を Firefox から便利に使うアドオン「GMail Manager」。 インストールするとステータスバーにメール数や、ログイン/ログアウトといった便利機能がつけられるようです。 Firefox使いの方でGMail をよく使うという方にとっては非常に便利そうですね。 エントリ 2chのdat落ちしたスレを右クリックで即座に蘇生させられるFirefoxアドオン「fire2chDat」 複数のHostsファイル管理・切替が簡単に行えるFirefoxアドオン「SwitchHosts」

ブラウザ上でサクッとCSSデザインできちゃう超便利なjQueryプラグイン「Design in the Browser」 2010年01月28日- Use jQuery - Blog - Brosho 'Design in the Browser' jQuery Plugin ブラウザ上でサクッとCSSデザインできちゃう超便利なjQueryプラグイン「Design in the Browser」。 インスタントにCSSでデザインというと、Firefox の EditCSS とか CssMate とか サイトのCSSを見たままリアルタイムに編集するツール色々 で紹介したもの等色々ありますね。 今回紹介するのは jQuery のプラグイン形式でインクルード後、初期化すると、以下のサイクルでサイトデザインが出来ます。 (1) エレメントをクリック (2) CSSを記述 (3) 1,2 の繰り返し

jQueryをよく使う人に使えそうな７つのチートシートがまとまっています。 内容が被ってしまう部分もあると思いますが、７種類の中から自分が使いやすいものを組み合わせて置いておくと便利ですね。 ajaxブームの2005年から4年。すっかりjQueryが地位を確立してしまった感がありますね。 以下のエントリを参照してください。 7 jQuery Cheatsheets For Every Designer & Developer to Have | TutZone 関連エントリ ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」 少ないスペース内でコンテンツをグリグリスクロールさせられるjQueryプラグイン「Flips」 jQuery用のGUIコンポーネントプロジェク

select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」がGoogle Codeに公開されています。 jQというだけあって当然ながらjQueryプラグインの形式です。 適用前の普通のSelect ボックスが便利に変化します 都道府県の縦に長かったものが横方向に超分かりやすく表示 日付も次のように超分かりやすいセレクトに。縦に長いのとはもうオサラバできそうです。 更に、コールバック関数によってクリックした後の動作も定義できるっぽいです。 はじめから日本対象という点でも使いやすいですね。 実装も、jQueryプラグインなので超使いやすいです。 次のように初期化するだけのようです。 $(".simpleBox").jQselectable({ set: "fadeIn", setDuration: "fast", opacity: .9 }); 以下のエント

IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになりますが↑にするための解決法が書かれています 2. 横に並べたいリストが階段状になってしまう IEの場合以下のようになってしまいますがこの解決法も記載されています 3. ダブルマージンフロートバグ マージンの指定が期待通りに出ている例 ↓ IEの場合、margin: 30px 0 0 30px;  で定義した値が正しく適用されない例も解決法があります 4. heightの高さ指定が効かないバグ height:2px を指定した場合の想定する表示 IEはなぜか2pxにならないのでこれも解決法が示されて

idTabs わずか2KBで直感的に使えるタブインタフェース実装用jQueryプラグイン「idTabs」 以下のようなHTMLを簡単にタブ化できるみたいです <ul class="idTabs"> <li><a href="#aaa">Tab 1</a></li> <li><a href="#bbb">Tab 2</a></li> </ul> <div id="aaa">This is tab 1</div> <div id="bbb">This is tab 2</div> UL要素の中にリストを定義してあるのがタブ部分で、<div>部分が該当ページ部分です。 1ページ内に全部のデータを収めることも出来るところもいいですね。 関連エントリ タブ機能付きパーソナライズドホームページ『Netvibes』 多数のタブをグループ化して管理できる「TooManyTabs」

どんなギークや、頭の回転が速い人であっても、やる気がないと生産性は高まらず、やる気がある人と仕事のレベルが同等か、それ以下になることも周りを見ていて感じます。 やる気を管理できれば、出来る人はより生産性を大きく上げられ、現時点であまり出来ない人でもやる気さえあればどんどんレベルを上げていけそうです。 というわけで、最近人気の「やる気」を上げる方法の良記事を色々とまとめてみました。 「充実感」を感じやすい人、できない人：日経ビジネスオンライン のめりこみ・没頭の科学。フロー理論について。 ゲームはフロー状態を発生させる効果的な装置。同じように仕組みを作って仕事に適用すれば生産性はあがりそうです。 【1】「脳とやる気」1秒で勉強意欲に火がつく法 | 達人のテクニック 脳科学からみるやる気の管理方法。 まずウォーキングや雑用などで準備運動からはじめて徐々にやる気を上げていく科学的な方法について解

6 Free PSD/(X)HTML-Templates | Freebies | Smashing Magazine PSDとXHTMLがセットになったWebデザイン学習キット色々。 １からWEBデザインを作るとなると、Photoshopでベースを作成→HTML化の作業が必要ですが、Photoshop、HTML、CSSがセットになったものが公開されています。 デザイン自体も次のようなプロが作ったと思われるクオリティのデザインになっています。 Shape Projection Template Artificial Casting Template すべて見る＆ダウンロード 色合い変更や少々のレイアウト配置変更といったカスタマイズで独自ページも容易に作れるかも。 関連エントリ プロによる美麗サイトデザインを構築するPhotoshopチュートリアル集 プロのサイトデザイン方法を作って学べる手

Hidden Pixels - CSS Frameworks CSSフレームワークがまとまっていたので紹介。 CSSフレームワークを使えば、ブラウザ間のCSSの差異吸収や、ブロックレイアウトが簡単になって便利、ですが沢山ありますね。 Elements CSS Frameworks YUI Grids CSS YAML CSS Framework Blueprint CSS Schema Web Design Framework CleverCSS Tripoli CSS Framework ESWAT Web Project Framework Boilerplate CSS Framework WYMstyle CSS Framework That Standards Guy CSS Framework 960 Grid System Emastic CSS Framework これだけ

50 Minimal Sites 最小限だけど上手くデザインされたサイト集。 シンプルイズベストといいますが、まさにその言葉が当てはまるようなサイトが多数紹介されています。 Vitor Lourenco Arty Papers Made by Sofa HUGE Subtraction 全部見る 派手なデザインもいいですが、シンプルなサイトの方が嫌われないというのもあるかもしれないですね。 関連エントリ 一流のサイトデザインを一から作成する手順集 技術系のサイトデザインに使えそうなPhotoshopブラシ集 プロのサイトデザイン方法を作って学べる手順集

EmChart | Aloe Studios Blog Using a relative unit such as EM is a great way to maintain the vertical rhythm of a web page when a user resizes text in their browser.CSSのem指定のサイズが一発でわかっちゃう「EmChart」 基本のサイズが24ピクセルで、9px にしたい場合、0.375emにすればよい、というのが簡単に分かるようになっています。 これはなかなか便利そうですね。チャートのダウンロードも可能です。 関連エントリ サイト上でCSSによるフォントスタイルを確認できる便利ツール サイトに使用するフォントのCSSを選ぶ際に役立つ「CSSTYPE」

15 Must-Have Bookmarklets For Web Designers And Developers WEBデザイナ/開発者が覚えておくと便利なブックマークレット集。 起動すると、その場で画像などの要素をドラッグ＆ドロップでデザインできたりする便利なブックマークレット集です。 ReCSS - Reloads The CSS 起動すると、サイトのＣＳＳが再読込みされ、リロードすることなく見栄えの更新ができる Edit Any Website - ブックマークレット XRAY - See Details Of Any Web Element 起動するとJavaScript製のＤＯＭインスペクタが起動します。 MRI 起動してエレメントをクリックすると、クリックしたエレメントのセレクタが取得可能。 Design - Grid-Rule-Unit-Crosshair 起動すると、4

HOKYPOKY. | MULTICOL. jQuery Plugin MULTICOL. はHTMLで雑誌のような美しい段組みレイアウトを実現するだけのシンプルなjQueryプラグインです。もちろん、日本製のプラグインなので日本語もきれいに段組みにします。HTMLで雑誌のような美しい段組みレイアウトを軽く実現できるjQueryプラグインの紹介。 次のようにコードを書くと、複数のブロックを簡単に4カラムにすることが可能です。 $("#sample1").multicol({colNum:4, colMargin: 10}); マージンを指定できるところも良いですね。 関連エントリ 複雑なブロックレイアウトもシンプルかつ簡単に実装可能な「malo」 複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」 CSSレイアウトのチート集「CSS Layout Cheats

35 Tutorials for Creating Website Layouts in Photoshop | Vandelay Website Design Photoshop is an excellent tool for creating attract websites. プロのサイトデザイン方法を作って学べる手順集。 次のようなサイトデザインのPhotoshopチュートリアル集です。 Create a Dark Themed Web Design from Scratch Making Your Own Portfolio Web Page Design a Cartoon Grunge Website Layout Hand Drawn Layout Online Photo Portfolio Layout Sound System Studio Website Layo

FirefoxにGUIプロトタイピングの機能を追加するものすごい拡張「The Pencil Project」 2008年07月09日- Home - Pencil Project FirefoxにGUIプロトタイピングの機能を追加するものすごい拡張「The Pencil Project」。 Pencil Projectを使えば、予め用意されているGUI部品をキャンバスにドラッグ＆ドロップしてプロトタイプの画面イメージを作成することができます。 ボタンなんかも、ダブルクリックでキャプションを変えることができたり、VisualBasic、VisualC++などのアプリを使って画面デザインをしているイメージに近い操作感が実現できています。 アプリっぽい画面を作ってみましたが、超簡単です。 GUIのスタンドアロンアプリだけでなく、Webサイトにも使うことが出来ます。 HTMLを使って簡単に画面を作

FireFTP - The Free FTP Client for Mozilla Firefox FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.FireFoxにFTPクライアント機能を実装する拡張「FireFTP」。 インストールすると「ツール」→「FireFTP」にて起動できます。 起動すると次のようにタブでFireFTPが起動。 普通のFTPクライアントソフト同様、便利に使うことが出来ます。 FTPとFireFoxをよく使う人には便利な拡張となってます。