レストランやカフェ、レシピサイトから素敵なデザインのUIエレメントのまとめおいしそうな料理の写真に目が奪われてしまいそうですが、細部までしっかり作りこまれたレストランやカフェやレシピサイト用デザインをDribbbleから紹介します。
ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
実際のウェブサイトを例に、ずっと廃れないであろうページレイアウトの10のパターンとその特徴を紹介します。 10 Evergreen Website Layouts (that will never go out of style) [ad#ad-2] 下記は各ポイントを意訳したものです。 2カラム、広いヘッダ 3カラム、広いヘッダ フォーボックス 不確定なグリッド 大きいスクリーンショット シングルカラム 打ち出し画像 固定サイドバー グリッドベースのギャラリー マガジンスタイル [ad#ad-2] 2カラム、広いヘッダ これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。 慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイ
[JS]タイル状に配置した画像やテキストをランダムな順番でふわりと表示するスクリプト -champagne.js
グリッドに沿ってタイル状に配置した画像やテキストなどのエレメントをランダムな順番でふわりと表示するjQueryのプラグインを紹介します。 champagne.jsを実際に使用しているサイト「Perkstreet」 [ad#ad-2] champagne.jsの使い方 champagne.jsは、3ステップで簡単に実装できます。 画像やテキストをタイル状にCSSで実装。 jQueryと当スクリプトをインクルード。 親エレメントをjQueryのセレクタで指定し、スクリプトを実行。 下記に、デモページを例に実装方法を紹介します。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery
CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css
Normalize.cssって何？ CSSリセットとは違うの？ どうやって使うの？ といった疑問を解決するNormalize.cssの制作者自らの解説を紹介します。 About normalize.css [ad#ad-2] 下記は各ポイントを意訳したものです。 Normalize.cssとは Normalize.cssの特徴 ノーマライズ vs リセット Normalize.cssの使い方 終わりに Normalize.cssとは Normalize.cssとは、クロスブラウザにHTMLのエレメントのデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるものです。 normalize.cssの関連サイト Normalize.cssの本サイト Normalize.cssのソース Normalize.cssのドキュメント Normal
[CSS]パネル切替時の普通のエフェクトに飽きた人用、立体的にくるっと回転させるスタイルシート
ホバー時：回転完了 実装 HTML パネルは、通常時の一枚画像、ホバー時のインフォメーションをdiv要素で内包します。 <div class="wrapper"> <div class="item"> <img src="images/contact.png"> <span class="information"> <strong>Contact Form</strong> The easiest way to add a contact form to your shop. </span> </div> </div> 実装のイメージは下記のようになります。 通常時は「front side」の画像が表示され、ホバー時に「bottom side」のインフォメーションが表示されます。 CSS まずは、ラッパーのスタイルです。 perspectiveを使用して3Dの奥行きを与え、transfor
[JS]スライダーや通知パネルなど、CoffeeScriptで作成したjQueryのプラグイン集 -MiniJS
ウェブページでよく使用される、スライダー、通知パネル、ツールチップなどをCoffeeScriptで作成したjQueryのプラグインを紹介します。 MiniJs MiniJs -GitHub [ad#ad-2] MiniJsはフリーのオープンソースで、現在5種類（+1開発中）のプラグインがあります。 各デモと実装方法を簡単に紹介します。 ※コードは最もシンプルな例で、各スクリプトで多数のオプションを備えています。 Count ワードやセンテンスをカウントしたり、マックス文字数の残りを表示し制限します。 HTML <section id="example-1"> <textarea autofocus="autofocus"></textarea> </section> JavaScript $(function() { $('#example-1 textarea').miniCount()
[JS]テキストでも画像でもリストでもテーブルでも、長いコンテンツにスクロールバーを加えるスクリプト -Scrolite
デモページ：p要素 Scroliteの使い方 外部ファイル スクリプトとスクロールバー用のスタイルシートを外部ファイルとして記述します。 <script src="lib/jquery.min.js" type="text/javascript"></script> <script src="lib/jquery.scrolite.min.js" type="text/javascript"></script> <script src="lib/jquery.mousewheel.js" type="text/javascript"></script> <link rel="stylesheet" href="styles/jquery.scrolite.css"></link> HTML HTMLは基本的にはそのままです。 jQueryのセレクタで指定するために、classを加えると便利
複数の画像のレイアウトを自動化できるPhotoshopのエクステンション -Tych Panel
あらかじめ設定したサイズにフィットするように複数の画像を配置するPhotoshopのエクステンションを紹介します。 Tych Panel [ad#ad-2] Tych Panelとは Tych Panelのインストール Tych Panelとは Tych Panelは写真などの画像のレイアウトを自動化するPhotoshopのエクステンションで、レイアウトの設定は事実上無限です。 下記のようなレイアウトも1クリックで簡単にできます。 Tych Panel -ギャラリー 背景色や角丸にも対応。 [ad#ad-2] Tych Panelの主な特徴 横・縦に画像を配置 高さ・幅のリサイズが可 スマートオブジェクト・レイヤーマスク対応 Adobe Bridge対応 背景色、ボーダー、角丸の設定可 Tych Panelのインストール インストールはちょっと面倒かもしれません。 ダウンロードしたファイル
[CSS]タブコンテンツにCSS3アニメーションを少しだけ加えてかっこよくするチュートリアル
JavaScriptを使用しないで、スタイルシートでタブコンテンツを実装するポイントから、コンテンツの切り替えやタブのフォーカス時にちょっとしたCSS3アニメーションを加えるチュートリアルを紹介します。 Demo 4: 垂直型タブ 実装 HTML タブの各コンテンツはdiv要素で、タブはinput要素で実装します。input要素のチェックでタブを切り替えます。 <section class="tabs"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1">About us</label> <input id="tab-2" type="radio" name="radio-set"
[JS]シンプルからかっこいいエフェクト付きまで、ページネーションなら何でも任せろのスクリプト -jPages
Table テーブルのコンテンツをページネーションにすることもできます。 jPagesの使い方 外部ファイル スタイルシートとスクリプトを外部ファイルとして記述します。 <link rel="stylesheet" href="css/jPages.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/jPages.js"></script> アニメーションのエフェクトを使用する場合は、「animate.css」も記述します。 <link rel="stylesheet" href="css/animate.css"> HTML デフォルトのHTMLの例です。 ページネーション用のdiv要素と各アイテムをリスト要素で実装します。 ※各ア
[JS]大量の画像コンテンツに便利！ サムネイルを自動生成するスクリプト -NailThumb
大きいサイズの画像から、クロップやリサイズなどして小さいサイズのサムネイルを自動生成するjQueryのプラグインを紹介します。 サムネイルはテキスト配置やさまざまなエフェクトにも対応しています。 jQuery NailThumb [ad#ad-2] NailThumbのデモ NailThumbの使い方 NailThumbのデモ NailThumbは元画像のアスペクト比を維持したまま、クロップやリサイズをしてサムネイルをスクリプトで生成します。 サムネイルはさまざまなフォーマットが用意されています。 キャプション テキストをオーバーレイで表示することもできます。 NailThumbの使い方 NailThumbの基本的な使い方は、サムネイル用のコンテナとサムネイルのサイズ設定です。 外部ファイル スクリプトとスタイルシートを外部ファイルとして記述します。 <script type="text/
[JS]デスクトップはそのまま、新しいiPad, iPhone4には高解像度の画像を配置するスクリプト -jQuery Retina
Retinaディスプレイを採用している新しいiPad, iPhone4用にimg要素で配置した画像を高解像度のものに変更するjQueryのプラグインを紹介します。 jQuery Retina Plugin jQuery Retina -GitHub [ad#ad-2] jQuery Retinaのデモ jQuery Retinaの使い方 jQuery Retinaのデモ jQuery Retinaを使って画像を配置する方法は大きく分けて、3つあります。 imgタグに「data-retina」属性を加える。 画像のファイル名に「-2x」を加える。 コールバック関数を使ってファイル名を指定する。 表示はどの方法を使っても一緒ですが、下記にそれぞれの方法で実装したデモがあります。 デモページ [ad#ad-2] jQuery Retinaの使い方 jQuery Retinaの使い方は簡単です。
効果的なナビゲーションを設計する5つの大切なポイント
How To Design Effective Navigation Menus [ad#ad-2] 下記は各ポイントを意訳したものです。 Positon -ポジション Simplicity -シンプル Wording -ワーディング Color -カラー Icons -アイコン [ad#ad-2] Positon -ポジション ナビゲーションをページのどこに配置するかは、非常に重要です。 ユーザーがページを見る際にある特定のパターンがあります。ユーザビリティの大家ニールセンによるFパターンが有名です（F-Shaped Pattern）。これは、ユーザーがページを走査する際、上部と左部に（Fの文字のように）フォーカスを合わせるというものです。 こういったパターンを理解し、それがどのように機能するかを学び、何を期待するべきかのアイデアを得るために使います。数多くのサイトを見て、ユーザーに配慮
[JS]文字にアニメーションを使った面白いエフェクトを与えるスクリプト -Text Effects
Scrambled Writer 文字をごちゃまぜにし、アニメーションで元通りにします。 Text Effectsの使い方 Text Effectsの使い方は簡単で、「jquery.js」と当スクリプトを外部ファイルとして記述し、スクリプトを実行するだけです。 「Typewriter」を例にすると、下記のようになります。 HTML <div id="my-container"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip e
[JS]jQueryのプラグイン33+1選 -2012年2・3月
Camera 表示サイズに合わせて最適なレイアウトを提供するResponsive Design対応のスライドショー。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Appleの最近のプロダクトで使用されているかっこいいテクスチャをさくっと作るチュートリアル
CSSベースのかっこいいボタンがぱっと簡単に作成できるオンラインサービス -Twitter Bootstrap Button Generator
2012年のロゴデザインのトレンド -2012 Logo Trend Report
レトロ・ヴィンテージなデザインにはまる、ざらっとしたテクスチャ素材 -TEX2RES
ダウンロードしておきたい、新iPad, iPhone4対応のアイコンのテンプレート素材 -iOS App Icon Template