死ぬまでに見ておくべきCSSデザインサイト集まとめ - GIGAZINE
ということで、今まで数限りなくネットのあちこちで紹介されてきたCSSデザイン関連のサイトがリスト化されてまとめられたようです。これだけあれば当分はブログなどのデザインのネタに困ることはなさそう。インスピレーションを得るのに使うもよし、デザインの参考にするのもよし、知っておいて損はないものばかりです。 リストは以下の通り。 CSS Beauty | CSS Design, News, Jobs, Community, Web Standards http://www.cssbeauty.com/ CSS Drive- Categorized CSS gallery and examples. http://www.cssdrive.com/ Stylegala - Web Design Publication http://www.stylegala.com/ CSS Mania http:
ふつうに横三角 - ぼくはまちちゃん！(Hatena)
ＣＳＳで横三角。「半キャラずらし」 (インターネット帳面) 今回はお題の通りインターネット帳面でもやってる「ＣＳＳで横三角をやる方法」。２バイト文字の三角記号は▲や▼しかないので横方向を示すことができませんでした。これをなんとかどーにかできんものかと。 ↑こんな記事があって、ちょっと面白かったので、 参考までに、ふつうの横三角のコードも書いておきますね！ » (») « («) ▷ (▷) ▶ (▶) ◁ (◁) ◀ (◀) そうそう、この中でも » って結構使えるよ！ よくサイドのメニューとかで、CSS を使って <li> の背景左端に、三角っぽい画像を設定したりするよね！ でも » をつかえば、画像がなくてもこんな感じ！ » Diary » Bookmark » Fotolife »
画像を角丸にしたり影を付けたりできる「Corner.js」
画像の角をまるっこくしたり、影を付けたりといったことが簡単にできる「Corner.js」というのが公開されたようです。これらを組み合わせることも可能なのでかなり応用の幅は広いかと。 実際のサンプルは以下の通り。 Corner.js http://www.netzgesta.de/corner/ これはノーマル状態 グラデーションシェードを付ける 影を付ける 角を丸くする へこんだ感じの影にする そしてそれらを全部組み合わせることも自由自在 これぐらいまるくすることも可能 オリジナルのアイディアは「reflection.js」から来ているようですが、それにしてもすごい。
フッターが素晴らしい19サイトを参考に足もとを見直そう | Web担当者Forum
通常、フッターには基本的なナビゲーションを繰り返して用い、著作権情報やプライバシーポリシーなど「細字部分」にあたるものが書き込まれる。また、標準に基づいたデザインの人気が高まり、フッターにXHTMLやCSSへの準拠を示すバッジが置かれるようになった。 新しいクライアントのために、フッターが完全に不足しているサイトを再デザインしながら、僕がデザインをまとめるとフッターがやる気のない付け足しになってしまうのはどういう具合なんだろうと思った。僕のフッターはたいてい内容が乏しく、デザインも大好評とはいかない。これまでに作った最も内容豊かなフッターはおそらく、ミニサイズのサイトマップとコンタクト情報がちょっとばかり入った、Avatar Financialのものだろう。 こうして僕は興味をもった。ほかのウェブデザイナーはフッターを何に使っているんだろうか？ウェブを回って集めた、フッターが目を引く19サ
ポッチンコンバート (Apple開発者向け資料の日本語訳)
諸注意 ポッチンコンバートへようこそ。ここでは、Apple Computer, Inc.の公開している開発者向け資料を訳者（ポッチン 改め かろでん☆みゅーあ）が趣味で日本語訳したものを公開しています。 翻訳の精度、内容の正確さについては期待できません。ニポン語も不自然ですね。 従って予告無く修正を行うことがあります。 ADCの他の公式な日本語訳、Mac OS Xの実際のアプリケーションでの使用例などとは用語の統一を行えていませんので注意しましょう。 いつのまにか公式訳が出ている可能性もありますので、まず上記の公式サイトを確認しましょう。 【 】で囲われた部分は訳の怪しいところ、訳者による補足、メモなどです。無視してください。 全体的なリファレンスの日本語訳がすぐさまいますぐ必要な方は、Cocoa Break!さん（当サイトもリンクして頂いています）のところがいっぱいあってお勧めです。 ア
小粋なデザインパターンが18種類！お役立ち度満点の『Design Patterns』 | P O P * P O P
これは素敵な資料です。 ウェブ上の小粋なインターフェースがFlickr上で集められています。「カレンダー」、「ログイン画面」、「友達を追加」などなど、かなり使える事例が満載です。 「ここのインターフェースはどうしようかな・・・」というときに参考にされてみてはいかがでしょうか。 どういったインターフェースが掲載されているか、以下にいくつか見ていきましょう。 ↑ 「友達を追加」のインターフェース。SNS的要素には必要ですね。 ↑ カレンダーのインターフェースいろいろ。参考になりますね。 ↑ フッターのインターフェース。ユーザーアクションを促すには大事です。 ↑ アップロード系のインターフェース。CGMには必須ですね。 他にも「404ページ」や「タグクラウド」などがありますね。全部で18種類あります。 ご覧になりたい方は以下よりどうそ。 » Collection: Design Patterns
ウノウラボ Unoh Labs: エラスティック・レイアウトのご紹介
yamaokaです。 エラスティック・レイアウトというwebサイトのレイアウト手法をご存知でしょうか？ 「エラスティック（elastic）」とは、ゴムのように弾力性がある状態のことです。 言い換えると「伸び縮みするレイアウト」になるでしょうか。 webサイトの代表的なレイアウト手法として、次の2つが挙げられるかと思います。 固定幅レイアウト リキッド・レイアウト 固定幅レイアウト 固定幅レイアウトでは、 コンテンツを格納するボックスの幅を以下のように絶対値で指定します。 div#container { width: 800px; } 固定幅レイアウトの場合、ウィンドウや文字のサイズが変更されてもレイアウトの枠は変わりません。 したがって、ウィンドウを大きくすると表示されるエリアが小さくなってしまったり、 文字のサイズを変更すると外枠が変わらないので読みづらくなってしまったりします。 リキ
photoshop- 1ピクセルラインで質感を高めるテクニック - WEBデザイン BLOG
下記の画像はこのサイトのトップページの画像です。両者の違いは、1ピクセルのラインが入っているか、いないかの違いです。左の画像はピクセルラインあり、右側はラインなしです。（画像クリックすると原寸表示されます。） ピクセルラインを入れることで、立体感を演出することができ、さらに質感を高めることができます。 さらに拡大した画像も下記の画像をクリックすることでご覧いただけます。
コーディングコンテスト開催決定なのっ！
（4/5に仕様部分修正有り） 以前のエントリーで脳内妄想を炸裂させていた、コーディング大会の件が正式に開催される事が決定となりました。 今回、名称は取りあえずコーディングコンテストで。 何かソコで悩むのに疲れた… 取りあえず、サブタイトル的に勝手につけたのが、 コーディングコンテスト Vol.1 ～Coder's High～ という感じです。（今つけた） と、まぁその辺はどーでもいいっすが今回のコンテストは、CSS Nite LP, Disk 3 "Coder's High"との連動企画として動く事になりました！ 連動だからってLP3に参加しないといけないとか、そういう事はありません。 スイッチの鷹野さん、CYBER@GARDENの益子さん、後デジパの中の人で仕様決めに関するディスカッションをして、ある程度仕様が固まったのでご連絡いたします。 最終的に変更が加わる可能性もありますので、その
GeckoのReflowをアニメーションにする - 最速チュパカブラ研究会
MDCの記事用にGeckoのReflow（レイアウトを組み立てる処理）の過程をアニメーションGIF↑にしましたが、これが思ったより良い画になったので、トゥイーニングをつけてムービーを作ってみました。 まず、みんなの好きなGoogle。あんまり面白くないです 続いてWikipedia。スクロールバーが出て表示域が狭まったために、サイズを再調整している様子が見えます。 最後に、Mozilla.orgのトップ。floatの扱いがよくわかります。ここでもスクロールバーの出現に伴う再配置が発生しています。 作り方は大体以下のような感じです 各frameのrectが変化したところで位置、大きさ、this pointer値および親のthis pointer値をログに書き出すコードをMozillaに仕込む Rubyスクリプトでログを舐めて、frame treeを再構成する もう一度最初からログを舐めて、各
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ
CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。 まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。 それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま
注目！Flashを応用してHTML＆CSSだけでは通常作れない画像効果を得る「swfIR」:phpspot開発日誌
注目！Flashを応用してHTML＆CSSだけでは通常作れない画像効果を得る「swfIR」 2007年02月27日- swfIR: swf Image Replacement When you start to use swfIR, you’ll need the ability to style it, the same way that you can do with regular images. Flashを応用してHTML＆CSSだけでは通常作れない画像効果を得る「swfIR」。 こういった仕組みで、久しぶりに感動させられました。 Ajaxにこだわらず、Flashも応用することでこんなことも出来るんだ、と思わせられたものでした。 なんと、<img src="〜"> な画像タグがあったとして、この画像に、動的に角丸やシャドウ効果、回転効果やボーダーを直接かけることが出来ます。 次の
グリッドレイアウトブックマークレットを作りました : akiyan.com
グリッドレイアウトブックマークレットを作りました 2007-03-08 グリッドレイアウトのためのちょっと便利な背景画像 | S i M P L E * S i M P L Eが便利そうだったので、ブックマークレットを作ってみました。 ブックマークレットをを実行すると、背景画像がWeb Page Layout Grid | Smiley Cat Web Designで使われている画像に切り替わります。 ブックマークレットは以下からどうぞ。 [背景をグリッドレイアウトにする] 背景画像を切り替えてるだけなので、他にも応用がききそうです。 コメント / トラックバック コメント / トラックバック 3 件 *LOVE IS DESIGN* より: 2007-03-10 00:35 実用的！レイアウトで悩んだときに頼れるツール 計算された余白やレイアウト。美しいと感じるものには何か法則があるはず
人力検索はてな - 入力フォームのデザインがすばらしいページを教えてください。 派手さや装飾ではなく、使いやすさ、見やすさなど機能美優先でお願いします。 海外のサイトでも結構で
入力フォームのデザインがすばらしいページを教えてください。 派手さや装飾ではなく、使いやすさ、見やすさなど機能美優先でお願いします。 海外のサイトでも結構です。
mixiをXHTML+CSSで組みなおす - 3ping.org
授業内で、既存サイトをXHTML+CSSで組み直す練習をするのですが、生徒が提出したのが「mixi」を書き直したもので、とてもよく出来てました。 mixiはテーブルレイアウトで組まれていて、基本は3カラムだけど、もとがテーブルなだけあって、ヘッダーのメニューが少し複雑だったり、セクションごとのビジュアル的なデザインや、細かい文字の余白のとり方が難しい。 現在のCSSは「どんな見栄えも出来てしまう」とは言えない。本当は言いたいのだけど、実際にはブラウザーのバグを回避するためにバッドノウハウを駆使したり、CSSの限界から、見栄えとは切り離すべきXHTML部分を調整しなくては再現できない見栄えがある。 けど、生徒の提出したものは、見栄えのためだけのdivも無ければ、ヴァリデーターだけを100点で通過するような機械騙しのXHTMLでもない。(一部、リストとしてマークアップできるところはある) もち
写真レタッチによる人物修正の妙技 | 秋元@サイボウズラボ・プログラマー・ブログ
via del.icio.us/popular 写真のレタッチ技術で、どれほどすごい修正ができるのかを表したビデオ。いろいろな顔の修正前、修正後が見られる。 これもいろんなところで既出だけど、レタッチといえばDoveのCMやレタッチの前後をマウスを載せる動作で確認できるサイトも必見。(via 上記動画にいち早くブックマークしていたnoshukeさんのコメント) こうやってみてると、写真の証拠能力なんてものは、どんどん無くなっていくのかもしれないなあ。そして動画もそれに続くんだろう。 この記事は移転前の古いURLで公開された時のものですブックマークが新旧で分散している場合があります。移転前は現在とは文体が違い「である」調です。(参考)記事の内容が古くて役に立たなくなっている、という場合にはコメントやツイッターでご指摘いただければ幸いです。最新の状況を調べて新しい記事を書くかもしれません
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なつみかん＠はてな - ユーザビリティ関連記事 まとめ
https://lush-life.org/entries/eid92.html
caramel*vanilla
透過PNGをIE6以下のバージョンで綺麗に表示する方法 - DesignWalker