1クリックで画像から便利なカラーパレットを作成でき、共有もできるオンラインサービス -Colorpilgrim
手元やオンラインの画像からカラーパレットを1クリックですぐ簡単に作成でき、共有もできるオンラインサービスを紹介します。 もちろん、他の人が作成したカラーパレットをダウンロードすることもできます。 Colorpilgrim [ad#ad-2] Colorpilgrimでカラーパレットを見る Colorpilgrimでカラーパレットを作る Colorpilgrimでカラーパレットを見る Colorpilgrimでは数多くのカラーパレットがカテゴリごとに登録されています。 これらを見るのに登録は不要です。 ※カラーパレットのダウンロードには、登録が必要です。 下記にいくつかご紹介。
[JS]複数の表示サイズごとに異なるイベントが設定できるResponsive Web Design用のスクリプト -Breakpoints.js
Responsive Web Design用に表示サイズの複数のブレイクポイントを定義し、異なるイベントを設定できるjQueryのプラグインを紹介します。 デモページ：幅640pxで表示 デモページで設定されているブレイクポイントは下記の4つです。 1024px 768px 480px 320px [ad#ad-2] Breakpoints.jsの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="http://xoxco.com/projects/code/b
ディテールの作りこみに役立つ、全75種類のピクセルベースのパターン素材
商用でも無料で利用できる、ピクセルベースのPhotoshop用のパターン素材を紹介します。 パターンはすべてシームレス用に作られています。
2011年のウェブデザインのトレンドを振り返る
2011年のウェブ制作の話題の中心はHTML5とCSS3でしょう。 ここではデザイン面を中心に、2011年に人気が高かったウェブデザインのトレンドを紹介します。 Popular Web Design Trends in 2011: Over 50 Inspiring Examples [ad#ad-2] 下記は各ポイントを意訳したものです。 Responsive Web Design 点線 サークル レトロスタイル リボン マジックナンバー『3』 少しめくれてるペーパー ボーダーレス グリッド 対角線 Responsive Web Design Responsive Web Designとは、ユーザーが利用する環境（スクリーンサイズなど）に合わせて最適なレイアウトを提供する方法です。デスクトップ用のブラウザだけでなく、iPhoneなどのスマートフォン、iPadなど、あらゆるデバイスに最適な
[JS]ドラッグで移動も可能なモーダルウインドウを作成する軽量スクリプト -Simple Modal
アラート、コンファームだけでなく、AJAXコンテンツ、画像、動画など表示するモーダルウインドウを実装するスクリプトを紹介します。 Simple Modal [ad#ad-2] Simple Modalの特徴 Simple Modalのデモ Simple Modalの実装 Simple Modalのダウンロード Simple Modalの特徴 モーダルウインドウを簡単に生成します。 生成したモーダルウインドウは、ドラッグ操作で移動可能です。 コールバック関数を備えています。 画像や動画、AJAXコンテンツにも対応しています。 Simple Modalのデモ デモではSimple Modalのさまざまな実装例があります。
[JS]jQueryのプラグイン33 1選 -2011年10・11月 | コリス
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
拡大縮小自由、80種類のシンプルなデザインのアイコン素材 -MimiGlyphs
サイズを自由に拡大縮小して使用できる、一つひとつ手作りされたシンプルなデザインのアイコン素材を紹介します。 MimiGlyphs [ad#ad-2] ダウンロードできるアイコンのフォーマットは、3種類。 PNG PSD CSH すぐに使いたい人はPNG、素材として利用したい人はPhotoshop用のPSD、サイズを自由に変更して利用したい人はPhotoshop用のカスタムシェイプ(CSH)、が用意されています。 用意されているPNGのサイズは、16x16です。
[JS]多彩なアニメーションが実装できる2.3KBの超軽量スクリプト -jsMorph
Tutorial demos さまざまな基本となるアニメーションのユニット集。 [ad#ad-2] jsMorphの実装 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="js/jsMorph_min.js" type="text/javascript"></script> JavaScript jsMorphの基本書式です。 var myMorph = jsMorph( Object obj, // HTML element, Array of elements or elementCollection that are rendered Object prop, // css properties of end position [Object params], // parameters that influence the motion (dur
[JS]ページ上部にアニメーションでスライド表示するパネルを手軽に実装できるスクリプト -Notification
2秒後に自動で閉じるデモ [ad#ad-2] Notificationの実装 外部ファイル 「jquery.js」と当スクリプト、パネル用のスタイルシートを外部ファイルとして指定します。 <script src="jquery.js"></script> <script src="js/jquery_notification_v.1.js"></script> <link href="css/jquery_notification.css" type="text/css" rel="stylesheet"/> JavaScript showNotification(params); 「params」には「message：表示するメッセージ」「type：パネルのタイプ」を記述します。 showNotification({ message: "This is a sample Success
小さくてもくっきり、ミニサイズのフリーのピクセルフォントのまとめ
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
全653種、商用利用無料、再配布可能な太っ腹のフリーアイコン -Default Icon
全653種、商用利用無料、再配布可能だけでもすごいですが、更にベクターのEPS付きとフリー素材として至れり尽くせりのアイコンを紹介します。 アイコンのデザインもシンプルなので、使い勝手もよさそうです。 Default Icon [ad#ad-2] ダウンロードできるアイコンのフォーマットはEPS, PNG（16x16, 32x32, 48x48, 64x64, 128x128, 256x256）です。 アイコン全653種はウェブサイト・ウェブアプリケーション用にさまざまなものが揃っています。 以前紹介した際はver.1で168種類でしたが、作者様よりver.2にして数も増やしたよ、と連絡を受けました。 [ad#ad-2] アイコンのライセンスはCC 3.0で、個人でも商用でも無料で利用できます。また、再配布も可能、とのことです。
スマートフォンからのアクセスをJavaScript, jQuery, node.js, PHP, ASP, Perlなどで検出する -Detect Mobile Browsers
スマートフォンからのアクセスをJavaScript, jQuery, node.js, PHP, ASP, Perlなどで検出する -Detect Mobile Browsers Detect Mobile Browsers [ad#ad-2] 現在、配布されているのは15種類です。 Apache ASP.NET ColdFusion C# IIS JSP JavaScript jQuery nginx node.js PHP Perl Python Rails いくつかコードもご紹介。 Apache RewriteEngine On RewriteBase / RewriteCond %{HTTP_USER_AGENT} android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobil
[CSS]スマフォから大きいサイズのデスクトップまで考慮したレイアウト -Rubber Layouts
小さいサイズのスマートフォンから大きいサイズのデスクトップまで考慮した、StaticとFluidのいいとこ取りをしたスタイルシートのレイアウトを紹介します。 Rubber Layouts – Combining Static and Fluid Layouts [ad#ad-2] Rubber Layoutsのデモ Rubber Layoutsの特徴 Rubber Layoutsの実装 Rubber Layoutsのデモ デモはメインコンテンツとサイドバーのシンプルな2カラムのレイアウトで、ブラウザのサイズを変更することで、StaticとFluidの固定と可変をどのように取り入れているか確認できます。 デモページ：幅480pxでの表示 ヘッダ・コンテンツ・サイドバーすべてを同じ幅に変更。 Rubber Layoutsの特徴 多くのウェブページで可変であるFluid Layoutが使用されて
見た目はそのままで、JPEG画像のファイルサイズを1/5に軽量化するオンラインサービス -JPEGmini | コリス
JEPG画像の見た目の品質を維持しつつ、ファイルサイズを1/5に軽量化するオンラインサービスを紹介します。 ※1/5は画像によって差があります。 JPEGmini 左：オリジナル（3662KB）、右：JPEGmini（628KB） [ad#ad-2] サイトではデモのJPEG画像が4種類あり、中央のスライダーを操作することで左：オリジナル、右：JPEGmini、見た目の品質を比較することができます。
[JS]幅指定の単位にパーセント(%)が使えるコンテンツスライダーのスクリプト -Dynamic Carousel
コンテンツの幅指定の単位にパーセント(width:100%;)が使える、レスポンシブ レイアウト対応のコンテンツスライダーのjQueryのプラグインを紹介します。 Dynamic Carousel デモページ [ad#ad-2] Dynamic Carouselのデモ デモではページネーションが3タイプ用意されており、それぞれコンテンツのwidthが%で実装されています。 ※ページネーションはHTML+CSSで自由に配置できます。 デモページ：ページネーション左上 Dynamic Carouselの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"><
[JS]一行追加するだけで、IE6/7/8でもHTML5のvideoとaudioを利用できる -html5media
HTML5のvideo要素やaudio要素をサポートしていないメジャーブラウザでもたった一行、ページに追加するだけでこれらを利用できるようにするスクリプトを紹介します。 html5media デモページ [ad#ad-2] html5mediaの実装 html5mediaの利用方法は簡単です。 ページに追加する一行 下記をページのhead内に記述します。 <script src="http://api.html5media.info/1.1.4/html5media.min.js"></script> これだけで、すべてのメジャーブラウザでHTML5のvideoとaudioを利用できるようになります。 video, audioに非対応のIE7でも期待通りに動画が再生されます。 IE6(IE Tester)でのキャプチャ 参考：video, audioのサポート状況 video, audio
最近リリースされた高品質なフリーのデザインフォント -2011年7月
最近リリースされたものを中心に、高品質なフリーのデザインフォントを紹介します。 Collator 個人・商用利用無料。 Fabrica 個人・商用利用無料。 Mimic Roman 個人・商用利用無料
[JS]省スペースに大量のコンテンツをスクロール表示するスクリプト -News Scroller
少ないスペースでも、大量のコンテンツをアニメーションの自動スクロールで表示するjQueryのプラグインを紹介します。 jQuery Tutorial: Building a jQuery Scroller デモページ デモでは、リスト要素で実装されたテキストが自動スクロールで表示され、マウスのカーソルをそのエリアに重ねるとスクロールが停止します。 [ad#ad-2] 実装方法 実装のイメージです。 開始時（図：左）は最初のコンテンツの上の空のスペースをセットし、終了時（図：右）には最後のコンテンツの下にも同様に空のスペースをセットし、ループするようにします。 また、このボックスにはデフォルトのスクロールバーを表示しないようにします。 HTML スクロールで表示するコンテンツはリスト要素を使います。 <div class="newsScroller" id="newsScroll"> <ul
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ステンドグラスやざらっとした紙などのパターン素材とテクスチャ素材 -Diana'sCreations
漢字も揃ってる、日本語のフリーフォントのまとめ -2011年版