プロユースにも耐えられるクオリティの高いフリーのフォント集Cicle instantShiftでは、Helvetica, Frutiger, Bodoni, Gothamなど有償のプロユースのフォントも紹介しています。 21 Most Used Fonts By Professional Designers
[JS]これ最強かものツールチップスクリプト -BeautyTips
シンプルなツールチップも簡単に実装できるだけなく、デザインのカスタマイズが可能で、対応トリガーも豊富なツールチップのスクリプト「BeautyTips」を紹介します。 BeautyTips demo BeautyTipsは機能が豊富というだけでなく、テキストや画像、AJAXコンテンツの表示、ツールチップの表示位置の自動補正など基本性能もしっかりと抑えられており、フォームエレメントへの表示、ツールチップ元の変更なども可能です。 ツールチップはcanvasで描かれており、画像は必要ありません。 対応ブラウザはIE6.x+, Fx3.x, Op8+, Safari3.xとのことで、canvas非対応ブラウザにはExplorerCanvasが使用されています。また、IE6のz-indexへの対応にbgiframe、ホバー処理にhoverIntentが使用されています。 ※Chrome 1, Fx2で
色々使えそうな、かっこよくアニメーションするスライダー実装JSライブラリ:phpspot開発日誌
Ultra versatile slider for websites 色々使えそうな、かっこよくアニメーションするスライダー実装JSライブラリ。 ウィジェット風に設置できそうなJSライブラリが紹介されています。 デモページ 次のように、divで大きく囲って中身にリストを定義して、リスト内をスライドさせるという、他の多くのライブラリで同じように実装されているようになっていて使いやすい。 <div id="slider-stage"> <ul id="myList"> <li >Box 1</li> <li >Box 2</li> <li >Box 3</li> <li >Box 4</li> <li >Box 5</li> <li >Box 6</li> </ul> </div> 次へ、前へリンクも<a>タグにidをふるだけみたいです。 <div id="slider-buttons">
Photoshopでカラフルで夢のような風景を作る方法 / ウェブデザインライブラリー
投稿日：2009年01月23日 レベル：初心者 ソフトウェア： このチュートリアルでは、Photoshopでカラフルで夢のような風景を作ってみたいと思います。 Step1 ： はじめに Step2 ： 新規レイヤーを作成しブレンドモード等を調整する Step3 ： テクスチャを挿入し加工する Step4 ： テキストブラシを使って画像を飾る Step5 ： 完成
[JS]配置済みのリンクにドロップダウンを簡単に追加できるスクリプト
ページ内に配置したリンクに、リストで作成したドロップダウン型のナビゲーションを簡単に追加できるスクリプトをDynamic Driveから紹介します。 ナビゲーションに追加したデモ 配置できるナビゲーションは、オプションで不透明度、ディレイ時間、表示位置を調整することができます。 スクリプトの設置方法は、「anylinkcssmenu.js」「anylinkcssmenu.css」を外部ファイルで指定し、リンク要素のclassに「anchorclass」を記述します。 配置するナビゲーションは、divで括りclassに「anylinkcss」を記述し、任意のid（例：submenu1）を記述します。そのidと同じものをリンク要素のrelに記述します。 <textarea name="code" class="html" cols="60" rows="5"> <p><a href="http
[CSS]クロスブラウザ、マルチカラム対応のフッタを下部に固定表示するスタイルシート
New CSS Sticky Footer - 2009 demo 主な対応ブラウザは、IE6/7/8, Fx2/3, Op9.6/10, Safari3.2, Crome1となっており、他にも多くのブラウザに対応しています。 対応ブラウザリスト New CSS Sticky Footerは、同じくフッタを下部に固定表示する「CSS Sticky Footer」の空divの使用を排除しHTMLをよりクリーンにし、マルチカラム対応にしたものとのことです。 仕組みはシンプルで、下記が最小の構成になります。 HTML マルチカラムの場合は、「id="main"」のdivに配置します。 <textarea name="code" class="html" cols="60" rows="5"> <div id="wrap"> <div id="main" class="clearfix"> </d
リッチで使いやすいＵＩを作成するためのjQueryライブラリ＆サンプル集:phpspot開発日誌
45 New jQuery Techniques For Good User Experience | Developer's Toolbox | Smashing Magazine リッチで使いやすいＵＩを作成するためのjQueryライブラリ＆サンプル集。 JSフレームワークはもうjQueryの時代だと言わんばかりの豊富かつ有用なサンプルが多数掲載されています。 Build A Login Form With jQuery Spoiler Revealer with jQuery AJAX Upload FCBKcomplete Create Accessible Charts Using Canvas and jQuery Radio Button and Check Box Replacement Submit a Form without a Page Refresh jQuery
ASCII.jp：もう配色には困らない！「Adobe Kuler」
「オリジナルのWebデザインをしたいけど、いまいち配色センスがなくて困る」「いつも好きな（得意な）色の組み合わせばかりでデザインしてしまう」「でも色彩理論を勉強するのは面倒だ」。 そんな人にぜひおすすめしたいのが、アドビ システムズが提供しているオンラインサービス「Adobe Kuler」（クーラー）だ。Kulerは、さまざまな色の組み合わせ（配色パターン、Kulerでは「テーマ」と呼ぶ）をWebブラウザー上で作成し、保存・公開もできる、ちょっと変わったサービス。いわば“みんなの力”で作られたカラーチャート集ともいえるもので、すでに7000種類以上（2009年1月現在）ものテーマが公開されている。利用料は無料だが、保存などの機能を使うにはAdobe IDが必要だ（以降の説明はログインしているものとして進める）。
[CSS]背景画像をページの最下部に固定表示させるスタイルシート
Fixed Footer Backgrounds with CSS demo, demo 2 デモではスクロールバーの有無の２パターンがあり、スクロールをしてもブラウザのサイズを変更しても背景画像がフッタの位置に固定表示されています。 仕組みの概要は、bodyに背景色と背景画像を指定し、背景画像は「fixed bottom」にします。 コンテンツを内包するdiv（headwrap）を設置し、ページ上部に表示される背景画像を指定します。 <textarea name="code" class="html" cols="60" rows="5"> <body> <div class="headwrap"> <div class="container">Content</div> </div> </body> </textarea>
クールな名刺を作る際のチュートリアル集:phpspot開発日誌
11 Tutorials for Business Card Design | Vandelay Design Blog クールな名刺を作る際のチュートリアル集が公開。 かなり奇抜なデザインが多く、デザイナーの方なんかが持っておくとデザインのスキルをアピールを出来るだけでなく、覚えてもらえそうな名刺を作れそう。 Design a Print Ready Business Card for Designers Making a Grungy Business Card Making a Print-Ready Business Card Using Only Photoshop 全部見る 最近は家庭用プリンタでもきちんとした印刷が出来るのでありがたいですね。 関連エントリ 凄くクールな名刺を作成するPhotoShopチュートリアル
クリエイティブなフッターデザイン40選 – creamu
フッターをかっこよくデザインしたい。 そんなときに参考になるのが、『40 Beautiful and Creative Website Footers』。クリエイティブなフッターデザイン40選だ。 以下にいくつかご紹介。 ↑のキャプチャはmissweblash.com。 catydesign-studio.com ispoil.net gomediazine.com sohtanaka.com その他のリストは以下から。 » 40 Beautiful and Creative Website Footers クリエイティブなフッターデザイン、チェックしてぜひデザインの参考にしていただきたい。 いろいろ進めなくては。
2009年、押さえておきたいウェブデザインの10のトレンド
2009年のウェブデザインのトレンドで押さえておきたい10のポイントをSmashing Magazineから紹介します。 Web Design Trends For 2009 1. Letterpress プレスしたようなタイポグラフィ。
[JS]ページ内をスムーズにスクロールできるスクリプト：更新- 3.0.5
ページ内をスムーズにスクロールできるスクリプト：Page Scrollerの最新版「3.0.5」をリリースしました。 簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 主な変更点は、下記の通りです。 3.0.5 jQuery 1.3に対応しました。 変更内容の補足 jQuery 1.3では、[@attr]の記述が変更になり、「@」を削除する仕様になりました。 そのため、Page Scrollerのスクリプト内で使用している[@attr]の記述を全て変更しました。 ver 3.0.4からのアップデート方法 スクリプト自体の仕様の変更はありませんが、jQuery 1.3をご利用ください（jQuery 1.2.6との互換性はありません）。
![[JS]ページ内をスムーズにスクロールできるスクリプト：更新- 3.0.5](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
[JS]ページ内をスムーズにスクロールできるスクリプト：更新- 3.0.4
ページ内をスムーズにスクロールできるスクリプト：Page Scrollerの最新版「3.0.4」をリリースしました。 簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 主な変更点は、下記の通りです。 3.0.4 $jから「$」に変更しました。 ver 3.0.3からのアップデート方法 スクリプトを差し替えるだけで、同様に動作します。 「$」に変更の補足 $jから「$」の変更により、他のjQueryとの共存がそのままの状態で可能になります。 他のサイトで「別のプラグインと競合して実装できない」というのを見かけますが、競合ではなく、$関数と$j関数の違いが原因のものが多いです。 ※$jを使用していたのは、開発当時は「$」といえばPrototypeが主流だったため、Prototypeとの共存をスムーズに行うためでした。 Prototypeの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
背景画像をつくるのに便利なサイト12選 | IDEA*IDEA
http://www.designwalker.com/2009/01/web-layout.html
[CSS]スタイルシートで実装するナビゲーション集 -CSS Menus | コリス