7 mistakes developers make [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 1. 良いデザインがどのように見えるか 2. カラー選択の理由は好みだからはダメ 3. 真ん中配置の誘惑 4. フォント選びは慎重に 5. 情報の詰め込み過ぎ 6. 質問をもって 7. ディテールは時間の浪費？ はじめに もしあなたがフリーランスのコーダーであるなら、あなたの資産の一つに、ウェブ開発の始めから終わりまで全てのプロセスを把握している、ということがあります。これはデザインも含みます。 プログラマーはコードと素晴らしく構築されたシステムをデザインし、自身がデザイナーであると言えるでしょう。また、個人のプロジェクトなどで、ウェブサイトを作成しなければならないかもしれません。 これはデザインでビジュアルの何かに違和感があっても、あなたがデザインのために良い目を持っ

商用でも無料で利用できる、最近のウェブデザインの背景にもよく見かけるグリッドベースのテクスチャが簡単に作成できるPhotoshopのパターン素材を紹介します。 120 Free Photoshop Grid Patterns [ad#ad-2] ダウンロードできるPhotoshopのパターンは全部で120種類で、細かいグリッド、荒いグリッド、斜めの金網状のグリッド、クロスステッチのようなグリッドなどさまざまなものが揃っています。

CSS3でスタイルした箇所をサポートしていない古いブラウザ、まぁ主にIEなのですが、でどのように見えるのか簡単に確認できるブックマークレットを紹介します。

mediabox.jsは、YouTube・Google VideoやオリジナルのFlashやQuickTimeの動画コンテンツと、外部ページをlightbox風のエフェクトで表示できるスクリプトです。 Mediabox mediabox.jsを利用する際には、mootools.jsとswfobject.jsが必要です。 これらのスクリプトを外部ファイルと参照し、下記のコードを記述するとlightbox風エフェクトでフラッシュの動画や外部ページが表示されます。

Normalize CSS [ad#ad-2] Normalize CSSの主な特徴 Normalize CSSの対応ブラウザ Normalize CSSのデモ Normalize CSSの使い方 Normalize CSSの主な特徴 Normalize CSSは、他のリセット用スタイルシートとは一味違った特徴を備えています。 有用なデフォルトはそのまま 多くのリセット用スタイルシートは異なり、有用なデフォルトのスタイルは維持します。 スタイルの正常化 さまざまな種類のエレメントのスタイルを正常化します。 バグの修正 各ブラウザごとの異なるスタイルやバグを修正します。 ユーザビリティの改善 ほんのわずかな改良でユーザビリティを改善します。 コードの説明 各コードには詳細な説明があります。 Normalize CSSの対応ブラウザ 対応ブラウザは下記の通りです。 Chrome Firefox

ブラウザごとに異なるデフォルトのスタイルを初期化するスタイルシートの歴史を振り返りつつ、2010年の最新のCSS Resetまでのまとめを紹介します。 A Comprehensive Guide to CSS Resets [ad#ad-2] ユニバーサルセレクタから始まったCSS Resetの進化の過程をたどり、最近リリースされたCSS Resetを紹介します。 下記は、各ポイントを意訳したものです。 (X)HTML "Hard" Reset undohtml.css -2010 version Poor Man's Reset Siolon Reset Inman Reset Tripoli Reset Dan Schulz's Reset Thierry Koblentz's base.css Simple Reset CSS Mini Reset Soft Reset Less i

960 Grid Systemは、ページの幅960pxを基準にして、設計するグリッドデザインを紹介しているサイトです。 960 Grid System デモページ 960pxを基準にする理由としては、下記の2つが挙げられています。 最近のモニターは1024x768の解像度をサポートしており、960pxを表示するには十分である。 960という数字は、2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480と多くの数字で区切ることができ、フレキシブルにグリッドの設計を行える。 デモページでは、左右に10pxのマージンを持ち、カラム間のマージンを20pxにし、60pxをベースに12カラムと、40pxをベースに16カラムの2種類のレイアウトを見ることが

HTMLやCSSなどウェブ制作の基本的なことを非ウェブデザイナーでも分かりやすいよう解説した動画を紹介します。 HTML -Hamburger Text Markup Language HTMLを「Hamburger Text Markup Language」にするセンスに脱帽です。 [ad#ad-2] 動画はHTMLやCSS、そしてHamburger Text Markup Languageと、いくつかあり、解説は英語ですが、スライドを見ているだけ割と理解できると思います。

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

1クリックで簡単にレタープレスやジェルやメタルのエフェクトをテキストに与えることができるPhotoshopのレイヤースタイルをPremium Pixelsから紹介します。 [ad#ad-2] 各スタイル素材はPhotoshopのスタイル（.asl）で配付されており、スタイルパネルから1クリックでテキストにレイヤースタイルを適用できます。 レイヤースタイルなので、もちろん日本語にも適用可です。

シンプルなHTMLでどのように角丸のタブを実装するか、分かりやすいイラストを交えたチュートリアルを紹介します。 Tabs with Round Out Borders デモページ [ad#ad-2] HTML HTMLは非常にシンプルで、リスト要素で実装しています。 <ul class="tabs group"> <li class="active"><a href="#one">One</a></li> <li><a href="#two">Two</a></li> <li><a href="#three">Three</a></li> <li><a href="#three">Four</a></li> </ul> classのactiveは、現在のタブを明示するものです。 リスト要素をどのように角丸のタブにするか、イラストでご紹介。

CSS3 Flying Menu デモページ [ad#ad-2] CSS3 Flying Menuのデモ デモでは他にも、ふんわりと浮かびつつ、ハイライトされるものもあります。 デモページ CSS3 Flying Menuの実装 HTML:ふんわりと浮かぶタイプ 各アイテム（アイコンとテキスト）をリスト要素で実装します。 <ul id="fly-menu"> <li><a href="http://www.webstuffshare.com"><img src="images/heart.png" alt="webstuffshare">Webstuffshare Home</a></li> <li><a href="http://feeds.feedburner.com/webstuffsharecom"><img src="images/rss.png" alt="rss"> Subs

Psd Soft Carbon Text Effect [ad#ad-2] エフェクトはレイヤースタイルでセットされており、テキストを変更することで簡単にカーボンのエフェクトを与えることができます。

ピクセル・ラインや幾何学図形をはじめ、紙・木・布・金属のさびなども揃ってる、タイル状のシームレスなテクスチャが作成できるパターン素材を紹介します。 Tileables [ad#ad-2] ダウンロードできるパターン素材は現在6種類で、それぞれPhotoshop用のパターン素材、PSD、PNGが揃っています。 PSDやPNGをそのまますぐに使っても、パターン素材でテクスチャも作成しても、またパターンを編集して新たなパターンを作成することもできます。

テキストリンクやナビゲーションなど、ページ上のあらゆる要素を振るわせるjQueryのプラグインを紹介します。 jRumble デモ 振るわせるアニメーションは、ガタガタをはじめ、ぷるぷる、ちりちり、などにすることができます。 [ad#ad-2] jRumbleの実装 jRumbleの実装は簡単です。 div要素でもリンクでも、あらゆるDOM要素をガタガタさせることができます。 JavaScript 「jquery.js」と「jrumble.1.0.js」を外部ファイルとして指定します。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jrumble.1.0.js"></script> JavaScript ガタガタさせるDOM要素をスクリプト

ブルー、レッド、グリーンに輝くネオンサインを再現したPhotoshopのレイヤースタイルを紹介します。 Psd Neon Text Effect Photoshop [ad#ad-2] ダウンロードできる素材はPhotoshop用のPSDファイルで、ネオンサインのレイヤースタイルはもちろんのこと、各レイヤーも保持されています。

デモ：更なるエフェクト CSSの各プロパティを変更することもできます。 [ad#ad-2] jQuery Vibrateの実装 JavaScript jQuery Vibrateはさまざまなオプションを簡単に設定できます。 $('.vibrate').vibrate({ speed: 50, // Vibration speed in milliseconds trigger: "mouseover", // Triggering event reverse: false, // Reverse behaviour overEffect: "stop", // Over effect, see details below vibrateClass: "", // CSS class applied when vibrating (New in vers. 1.1!) overClass:

紙媒体でよく見かける、見出しの両端に水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。 Centered Heading Overlaying a Horizontal Line with CSS [ad#ad-2] 下記は各ポイントを意訳したものです。 実装のポイント Method 1: 疑似要素 Method 2: 隣接兄弟セレクタ Method 3: 線形グラデーション Method 4: 最後にjQueryを使ったメソッド 全部のデモ 実装のポイント 実装するにあたり、下記の点に留意します。 画像は使用しない。 余分なHTMLは使用しない。 Scalable: フォントのサイズを大きくしても調整される。 Fluid: 可変。 JavaScriptは使用しない。 Method 1: 疑似要素 見出しの疑似要素で水平線を配置し、spanタグを内側に配置し水平線が中央

デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr

IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。