[CSS]スクリプト無しで、ナビゲーションの背景全体を変更するスタイルシートナビゲーションのホバーはその箇所のみ背景が変更になるものが多いですが、ナビゲーションの背景全体が変更になるスタイルシートをCSSplayから紹介します。 Total background hover demo このスタイルシートは「unusual series（普通ではないシリーズ）」としてリリースされており、ちょっと記憶にはないタイプのナビゲーションです。 ラベルの各コンテンツごとにテーマカラーがあるサイトなど、ぴったりはまりそうです。
いろいろな色の名前が分かるサイト色々
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
PhotoshopやGIMP用のブラシを試してからダウンロードできる -BlendFu
PhotoshopやGIMP用のブラシをダウンロードする前に、ブラウザ上でブラシの効果を試してからダウンロードできるサイト「BlendFu」を紹介します。 BlendFu キャプチャは、More Swirls BlendFuは、以前「マニアックなものまで揃っているPhotoshopのブラシ -BlendFu」で紹介しましたが、作者より「インターフェイスがパワーアップした」とメールを頂いたので、再紹介です。 ブラシの試用は、サイズやカラーの変更だけでなく、不透明度、角度を変更でき、ランダム効果、フィルタ効果を適用することもできます。 また、自サイトにiframeで埋め込むことも可能です。 ※サイトの幅が狭いため表示が切れてしまってますが。 iframe解除版
パンくず詳解 | コリス
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
サイトマップをフッタに配置する際のポイントとその効果
サイトマップを独立したページとしてではなく、フッタに配置する際のポイントとその効果をWeb Designer Wallから紹介します。 Modern Sitemap and Footer 下記は、その意訳です。 昔はほとんどすべてのウェブサイトで、コンテンツをリストアップしたサイトマップを独立したページとして設置していました。 サイトマップの重要な目的は、ユーザーや検索エンジン（スパイダー）がサイト内の情報を探し出すのに役立つことです。 現在は、多くのモダンなウェブサイトでサイトマップページを設置していません。代わりに、サイトマップをフッタに配置しています。 サイトマップをフッタに設置する効果 クリック数やページビューの増加 ユーザーはページを隅々までじっくり見るわけでなく、スクロールしながらざっと見ることがほとんどです。 そして、多くのユーザーがスクロールして最後に見る場所は、フッタです
WordPressをパワーアップする.htaccessの設定集 | コリス
1. RSS FeedをFeedBurnerで配信 WordPressのRSS FeedsをFeedBurnerにリダイレクトさせます。 ※FeedBurnerの利用には、登録が必要です。 ルートの「.htaccess」に下記を記述します。 <textarea name="code" class="html" cols="60" rows="5"> <ifModule mod_rewrite.c> RewriteEngine on RewriteCond %{HTTP_USER_AGENT} !FeedBurner [NC] RewriteCond %{HTTP_USER_AGENT} !FeedValidator [NC] RewriteRule ^feed/?([_0-9a-z-]+)?/?$ http:///feeds.feedburner.jp/example [R=302,NC,
アブストラクトな美しい光を描く、25のPhotoshopのブラシ
アブストラクトな美しい光を描くPhotoshopのブラシをYou the Designerから紹介します。
再販以外はOKの、高品質なフリーフォント -The Crud Factory
シンプルで使い勝手がよさそうな高品質なフリーのフォントをThe Crud Factoryから紹介します。
[CSS]検索フォームを素敵なデザインするスタイルシート集
検索フォームを素敵なデザインにスタイリングする、クロスブラウザ対応のスタイルシートをCss Finestから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <form id=”searchform1″ method=”get” action=”" > <input class=”isearch1″ type=”text” name=”keywords” id=”keywords” /> <input class=”ibutton1″ type=”submit” value=”" /> </form> </textarea>
IE6/7/8, Fx, Op, Safari, Chromeを同時に起動できる -Xenocode Browser
Internet Explorer 6/7/8rc1, Firefox, Opera, Safari, Chromeなど主要なブラウザをWindows上で同時に起動できるXenocode Browserを紹介します。 Run IE876, Firefox, Safari, Chrome, and Opera from the web Fx, Op, Safari, Chromeはそのままで同時に起動できますが、IE 6/7/8rc1の異なるバージョンをOSに依存せずにインストール・起動できるのはブラウザ検証の大きな武器になります。 IE 6/7/8rc1でAcid 2のテストを表示してみたところ、レンダリングはそれぞれのバージョンのものになっていました。
ウェブサイトでやってしまいがちなユーザビリティのミス
ウェブサイトでやってしまいがちなユーザビリティの9つのミスをSmashing Magazineから紹介します。 9 Common Usability Mistakes In Web Design 下記は、その意訳です。 1. クリックできるエリアが小さい リンクのクリックできるエリアが小さいと、ユーザーはクリックするのが非常に困難です。 解決方法 リンク箇所にpaddingなどを設けて、クリックできるエリアを大きくします。 2. 間違った目的のためのページネーション ページネーションは、内容を複数のページに分ける時に使用します。 しかし、最近ページビューを増やす目的でページネーションを設置しているサイトがあります。これには問題点が2つあります。 一つ目は、1つのコンテンツを読むのにページをロードしなくてはならないこと。二つ目は、SEOと関係があります。ページのインデックス付けを行う際、ペー
WordPressをちょちょいと使いやすくする15のスニペット | コリス
WordPressの各エントリーに編集ボタンを付けたり、シングルクォートの自動置換を無効化するなど、使いやすくするための15のスニペットをForTheLoseから紹介します。 15 Useful WordPress Tricks to Make Your Theme Even Better 古いエントリーのコメント入力をクローズ 古いエントリーにはスパムコメントがつくので、コメント入力をクローズにします。 function.phpに下記を記述します（例：1ヵ月以上前）。 <textarea name="code" class="html" cols="60" rows="5"> <?php function close_comments( $posts ) { if ( !is_single() ) { return $posts; } if ( time() - strtotime( $
GIMPでPhotoshopのブラシ・プラグイン、レイヤースタイル、CMYKを使用できるようにする方法
GIMPでPhotoshopのブラシ・プラグイン、レイヤースタイル、CMYKを使用できるようにする方法 GIMPでPhotoshpのブラシやプラグインを使用できるようにしたり、レイヤースタイルやCMYKを使用できるようにする方法をLaptop Logic.comから紹介します。 Configuring GIMP 2.6 to Replace Adobe Photoshop Photoshopのブラシ、プラグインのインストール Photoshopのブラシを使えるように Photoshopのプラグインを使えるように レイヤースタイルを使えるように CMYKを使えるように GIMPの設定方法は、GIMP 2.6 for Windows XPです。 GIMPのダウンロード Photoshopのブラシ、プラグインのインストール Photoshop用のブラシ、プラグインなどをGIMPにインストールする
ウェブデザインにおける効果的なコミュニケーションの取り方
ウェブデザインにおける明確で効果的なコミュニケーションの取り方をSmashing Magazineから紹介します。 Clear And Effective Communication In Web Design 下記は、簡潔に意訳したものです。 1. コミュニケーションのアプローチ方法 ウェブサイトの来訪者とコミュニケーションを取るためのアプローチ方法をいくつか紹介します。 テキスト 見出しやコンテンツ内にかかわらず、来訪者はテキストをメッセージとして受け取ります。コミュニケーションにおいて、極めて重要な要素です。 画像 画像は、テキストよりもすばやくメッセージを伝えるときがあります。画像を作成する際は、メッセージを魅力的に伝えられるようにします。 タイトルとヘッダ タイトルとヘッダは、来訪者に主要なポイントと考えを伝える重要で効果的なものです。 アイコン アイコンはウェブデザインの特徴的
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブデザインのクオリティをアップする7つのポイント | コリス
[CSS]上級者向け、スタイルシートのテクニック集
テキストをかっこよく魅せるPhotoshopのチュートリアル集：Part 11
[JS]一覧表示のレイアウトを切り替えるスクリプト -Easy Display Switch
光を効果的に使用したPhotoshopのチュートリアル集：Part 11
セオリーに基づいたカラースキームが設計できるオンラインサービス