スムーズなアニメーションでタブを切り替え、各タブコンテンツの#リンクにも対応した、タブの機能性のみを追求したjQueryのプラグインを紹介します。 JQuery EasyTabs Plugin デモページ：同じページに複数のタブを設置 [ad#ad-2] EasyTabsの主な特徴 タブの切り替え時にはスムーズなアニメーションが可能 外観はCSSで簡単にカスタマイズ可能 ブラウザのバックボタンとフォワードボタンに対応 各タブは#リンクが有効でブックマークが可能（SEOにフレンドリー） タブは指定された時間で自動切り替え可能 グローバル変数の使用はしていません ページ内に複数のタブコンテンツを設置可能 valid HTML Markup 超軽量（5KB） オープンソース（MIT and GPL licenses） タブのスタイリングはCSSでもJavaScriptでも可能 AJAXコンテンツ

いつもの同じようなデザインから離れて、新鮮でユニークなウェブデザインを生みだすために役立つ10のアイデアを紹介します。 10 Ideas for Creating Innovative and Unique Web Designs [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 カンバスはブランクから始める Photoshopで作業をはじめる時は、白ではなくブランクから始めるようにします。 白は白がある状態なので、何も無い真っさらな状態にします。 用意されたレイアウトに頼らない 960 Grid Systemなどのフレームワークを利用するのは確かに簡単で素晴らしいですが、そういった用意されたレイアウトには頼らずに自身で考えて作りだし、それを機能させる方法を見つけだしてください。 CMSは使わない 今日、WordPressを始めとする素晴らしいCMSが数多くリリース

HTML5/Canvasを使用して簡単にオブジェクトの描画したり、アニメーションを加えたり、ゲームなどのインタラクションコンテンツも実装できる、実用的でシンプルなJavaScriptを紹介します。 gury - an html5 canvas utility library デモ [ad#ad-2] guryはHTML5/Canvasでウェブアプリケーションの作成を簡単にできるようにサポートすることを目的に設計されたもので、ページにオブジェクトを加え、リサイズ、スタイル、アニメーションなどを簡単に与えることができます。 サイトでは現在、下記のデモを楽しめます。

見出し、フォーム、リストなどHTMLのさまざまな要素をグラフィカルにしたフリーのアイコンを紹介します。 Chalkwork HTML (Free) ダウンロードできるアイコンのフォーマットはPNG, GIF, TIFF, BMPがあり、Windows用のICO、Mac用のICNS、プレビュー用の画像も揃っています。 アイコンは全部で31種類です。

画像をダイナミックに配置し、それに負けないくらいダイナミックなアニメーションで画像を拡大表示するギャラリーのチュートリアルをCodropsから紹介します。

The Current State of Web Design: Trends 2010 下記は記事の意訳と実例をいくつか抜粋したものです。元記事では他にも多数の実例が紹介されています。 はじめに ウェブデザインとは移り変わりが激しい業界です。他のすべての芸術的な表現とまったく同じように、ウェブデザインは絶え間なく、そして驚くほど早いスピードで進化を遂げてきました。 そして現在、私たちはウェブデザインの黄金時代を経験しているところです。それはこれまでのところ、少なくとも最も良い期間です。主要なブラウザで利用できる新しいツール（CSS3, HTML5, 埋め込みフォントなど）、自由に利用が可能な多くのリソース、デザインコミュニティなど、ウェブのスタンダードの信頼性が高いサポートを持っています。 私たちはより良いインタラクションなデザインや審美的なデザインを見ています。そして同様に個人的で魅力

当サイトでもCSS3で実装する面白いトリックをたくさん紹介してきましたが、Rather SplendidからCSS3で実装したごく普通のアイコンを紹介します。 Pure CSS Icons デモページ アイコンはRSS、iPhone、ハートをはじめ、円や三角なども画像を使用せずに実装されています。 CSSで実装されているため、ブラウザのフォントサイズを変更すると、アイコンのサイズも拡大縮小します。 各アイコンは、マウスのホバー時に一回り大きくなります。

スタイルシートは、複数の人間が携わる場合は当然のことながら、自分一人の場合でも長期にわたり携わることがあるので、分かりやすくクリーンなものにしておきたいものです。 スタイルシートを適切に使用し、そして管理しやすくする5つのポイントをSoh Tanakaから紹介します。 CSS Beginners Do's and Dont's Part 2 下記は各ポイントを意訳したものです。 1. classとidは適切に使用する ビギナーは新しいclassをどんどん作成してしまう傾向があります。冗長なものや不必要なclassやidはCSS本来の目的からはずれるものです。 CSSの美しさはデザインをマークアップから切り離すことにあり、それを許すということです。またclassやidを最小限にすることで負荷を減らすことにも繋がります。 Bad p要素それぞれに全て個別のclassを使用しています。 <tex

角丸、ドロップシャドウ、グラデーションなど多彩で面白いスタイルをCSS3では簡単な記述で実装できます。 CSS3でいったい何ができるのか、どのように記述するのかなど、ベーシックなものから実践的なテクニックまでサンプルやコードなど実装例が掲載されているサイトを紹介します。

当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る

IE8のCSS、HTML、DOM、JavaScript関連のバグ情報がまとまったリストをJames Hopkinsから紹介します。 IE8 Bugs 掲載されているバグの数は現在、CSS：63、HTML：4、DOM：2、JavaScript：1となっており、ほとんどのものはTest Caseとしてデモページを参照することができます。

オリジナルの高品質で無料のPhotoshopのブラシがダウンロードできるPhotoshop Free Brushesを紹介します。 Photoshop Free Brushes ダウンロードできるPhotoshopのブラシはどれもユニークなもので、Photoshop Free Brushesのチームで作成されたものとのことです。 登録されているブラシのサイズは2500pxと高解像度のものが多く、他のサイトでは見られない種類のものも多数登録されています。 ブラシはカテゴリ分けされており、下記にいくつか紹介します。

Photoshopでの作業を今までより早く、そしてより簡単にする20のTipsをSpoonGraphicsから紹介します。 20 Handy Photoshop Tips For a Faster Workflow デザイナーの人には常識的なものだと思いますが、実用的で多用するものが多く紹介されています。 ※コマンドはWin XP+Photoshop CS4のものです。 Macの場合は、下記置き換えてください。 Ctrl = Cmd Alt = Opt 作業ファイル上で、[space] 使用してるツールを手のひらツールに変更し、画像を移動させることができます。 [編集]-[環境設定]-[テキスト]の「フォントプレビューのサイズ」 サイズを「特大」にすると、フォント選びが楽になります。 「文字パレット」のサイズにフォーカスをあてて[矢印] 上下の矢印キーでフォントサイズを増減することができま

スタイルシートの初心者にも分かりやすく、各要素に的確なマークアップを行い、ワイヤーフレームをビジュアル化するチュートリアルをSoh Tanakaから紹介します。 Styling Post Headings That Stick Out demo 下記のチュートリアルでは、見出し、日付、カテゴリ、タグを含むブログのヘッダをステップに分けて実装していきます。 Step 1. Wireframe – HTML ワイヤーフレームに基づいて、「ヘッダ」と「コンテンツ」をdiv要素で配置します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="post"> <div class="postheader"> <!--ヘッダ--> </div> <!--コンテンツ--> </div> </textarea>

昔流行ったけど、これはもう使用しない方がいいものや人気がすたれているウェブデザインのトレンドをWeb Design Ledgerから紹介します。 Most Used and Abused Web Design Trends of All Time 以下、その意訳です。 過激な表現も一部あるので、留意ください。 はじめに 鏡面反射 アクア フラリッシュ コーヒーカップ 地球 コミックフォント ストックフォト ペーパー ポラロイド 特大のRSSアイコン 音の自動再生 カウンター マーキー ブラックの背景 スプラッシュページ スキップの無いイントロ ブラックの背景 はじめに トレンドは、ウェブデザインにおける良くないキーワードではありません。実際に、下記のリストのものはその時々でウェブデザイナーを鼓舞させました。これらのアイデアは影響が非常に大きくかったので、大量のクローンが作りだされました。

divで実装したパネルの四隅を1px欠けにして、角をすっきりみせるスタイルシートをonderhond.comから紹介します。

Eコマースサイトの設計・制作時の間違いで、顧客を逃してしまう15のポイントと解決方法をSmashing Magazineから紹介します。 15 Common Mistakes in E-Commerce Design 下記は、そのポイントと解決方法を簡潔にしたものです。 原文ではキャプチャ入りで詳細に解説されています。 商品の詳細な紹介ページが無い。 商品の外観・材質・重量・寸法など詳細な情報を提供します。 連絡する手段が分かりにくい（提供されていない）。 ウェブサイトの全ページの見つけやすい場所に連絡に関する情報を掲載します。 購入のフローが長すぎる（分かりにくい）。 シンプルなレイアウトにし、入力→確認→完了のようにフローを簡潔にします。 購入時にサイトへの登録を必須にしている。 登録無しでも購入できるようにします。登録を入れる際は最後にオプションでいれます。 サイトの検索機能が役に立

ユーザーにあなたのウェブページを容易で、そして楽しくアクセスできるようにする実用的なユーザビリティの10のポイント（ガイドライン編）をSmashing Magazineから紹介します。 Tumblr 多くのフォームは2カラムのレイアウトを採用し、ラベルはフィールドの左に配置されています。一見よさそうに思えますが、これは採用すべきではありません。 なぜなら、フォームは一般に垂直に方向付けがされているためです。ユーザーが左→右→左下と視線を動かすことより、上→下と移動する方が容易です。 また、ラベルを左に配置することはもう一つの問題があります。 あなたはラベルを右揃えと左揃えのどちらで配置しますか？　左揃えはラベルを読みやすくしますが、どのフィールドのラベルか判断するのが難しい場合があります。 右揃えはその逆です。フィールドのラベルを判断するのは容易ですが、ラベルを俯瞰するのが困難です。 2.

テキストをかっこよく魅せるPhotoshopのチュートリアルの紹介です。 3D Typography Add Fantastic Color to 3D Text – Part I Add Fanta

エレガントで使い勝手がよさそうなOpenTypeのフリーフォント「Juvelo」をThe Crud Factoryから紹介します。 Juvelo フォントのライセンスはpublic domainで、個人・商用に限らず無料で利用することができます。 下記は以前紹介しましたが、同サイトでは他にもフリーのフォントをダウンロードすることができます。