2008年、当サイトでアクセスとブックマークの多かったエントリーBest 20の紹介です。 2009年は、1/5から更新を予定していますので、よろしくお願いいたします。 2008年、アクセスの多かった
2008年、当サイトでアクセスとブックマークの多かったエントリーBest 20の紹介です。 2009年は、1/5から更新を予定していますので、よろしくお願いいたします。 2008年、アクセスの多かった
ベストデザインのサイト、Best of CSS Design、Photoshopなどの画像のチュートリアル、スクリプトやソースなどさまざまなテーマの2008年のベストを選出しているサイトの紹介です。 デザイン関連
Smashing Magazineから、個人・商業サイトでフリーで利用できるハイクオリティな光とスワールな飾りを描くPhotoshopのブラシを紹介します。
Tomasz Goclikから、ウェブサイトでよく使用するサイトマップ、検索、コンタクト、ショッピングカート、アローなどが揃っている、シンプルなピクトグラムのミニアイコンを紹介します。
seekAttention 注目箇所だけハイライトのアニメーションで強調。 スクロール・ドラッグなど操作関連のjQueryのプラグイン
<textarea name="code" class="css" cols="60" rows="5"> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{ margin:0; padding:
Matthew James Taylorのエントリーから、高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介します。 Equal Height Columns with Cross-Browser CSS & No Hacks demo: 2カラム demo: 3カラム 以前、紹介した「高さの異なるカラムを揃えるスタイルシート」では、ページ内アンカーで要素が消失したり、IEで印刷できないなどの不具合がありましたが、今回紹介するものは、その2つの不具合が無いものとなっています(IE7調べ)。 対応ブラウザは、IE5.5, 6, 7, Fx1.5, 2, 3, Op8, 9, Safari, Google Chromeなどほとんどのものに対応しています。 仕組みはカラムごとにdivを用意し、それぞれをずらして配置します。 下記は、そのイメージです。
デザインも秀逸なナビゲーションを実装するスタイルシートとスクリプトのチュートリアルの紹介です。 各サイトではチュートリアルの他、ファイル一式や画像データをダウンロードできるものもあります。
Deziner Folioのエントリーから、ウェブサイトのデザインに使用されている、最近の7つのトレンドとそのチュートリアルを紹介します。 Design Trendz ※チュートリアルのいくつかは当方で追加しています。 Lights n Shadows ライトを当てているように、シャドウ効果を持たせます。
The Usability Postのエントリーから、押さえておきたい、タブ型ナビゲーションの5つのポイントを紹介します。 5 Steps for the Perfect Tabbed Navigation Menu キャプチャ画像は、使いにくいタブ型ナビゲーションのサンプルです。 現在位置は「Site Details」と「Statistics」のどちらに見えますか? タブがより大きく、下のグレーと同じ色だから「Site Details」ですか? タブのすぐ下の白色が同じだから「Statistics」ですか? 下記は、使いやすいタブ型ナビゲーションを実装する5つのポイントです。 アクティブなタブとコンテンツの接点 アクティブなタブと他のタブの色 アクティブなタブのテキストの色 タブのリンクエリアの大きさ タブの来訪時の状態 アクティブなタブとコンテンツの接点 アクティブなタブは、そのコンテ
Photoshop Gardenから、ナビゲーションの画像を作成するPhotoshopのチュートリアルを紹介します。
leigeberのエントリーから、ドロップダウンメニューをスムーズに開閉する、1.8KBの軽量のスクリプトを紹介します。 Sliding JavaScript Dropdown Menu デモページ スクリプトはjQueryやPrototypeなどの他のスクリプトに依存せず、単独で動作するもので、対応ブラウザはIE6, IE7, IE8, Firefox, Opera and Safariとなっています。 ドロップダウンメニューはリスト要素で実装されており、項目はテキストなので日本語で実装することも可能です。
kriesi.atのエントリーから、Apple風にデザインされたアコーディオン型ナビゲーションの画像作成からスタイルシート・スクリプト実装までのチュートリアルを紹介します。 Create an apple style menu and improve it via jQuery デモ 上記ページでは、Apple風にデザインされたナビゲーション画像のPhotoshopでの作成方法から、HTML+CSS、JavaScriptの実装方法まで詳細なチュートリアルが掲載されています。 ナビゲーションは、リスト要素でマークアップされています。 <textarea name="code" class="html" cols="60" rows="5"> <ul class="kwicks"> <li id="kwick1"><a href="#">Home</a></li> <li id="kwick2
Smashing Magazineのエントリーから、画像を使ってユーザーの視線を惹きつけて、印象に残るメッセージを伝えるウェブサイトを紹介します。 Vivid Imagery In Modern Web Design 上記サイトでは、他にも例を掲載しています。 各サイトの解説は、簡単な超意訳です。 Komodomedia ウェブデザインで大切なものの一つに、視覚的に魅力的であることがあげられます。 カラースキーム・タイポグラフィ・ホワイトスペースが絶妙なバランスで使用され、さらに画像が大きな相乗効果を生み出しています。 Mark Jardine ユーザーの注意を惹きつける画像を使用する場合、画像の数を少なくするのは非常に効果的です。このサイトでは1つのイラスト画像しか使用していませんが、ギターの少年はギターがとてもうまく見えて、そのイラストは印象に残ります。
デザインセンスを刺激して、インスピレーションを与えるサイトの10選です。 Pattern Tap ボタンや背景・線などエレメントごとのデザイン集 StyleCrunch クールなデザインでスタンダード
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く