Webデザイン・デザイナーの制作に役立つネタまとめ ～ デザインフィードデータベース

フォームの入力時に、入力欄に配置されたラベルが枠外にアニメーションで移動するスクリプトをCSSKarmaから紹介します。Form Design with Sliding Labelsデモページスライドするアニメ [...]

ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく...

マウスオーバー等で吹き出しが 現れるツールチップのまとめです。 jQueryが殆どになります。 吹き出しは画像やcssを変更 すれば別の形状にする事も可能 なのでうまく活用したいですね。吹き出し以外のツールチップを実装できるjsをお望みでしたら以下の記事が参考になりそうです。15 jQuery P...

Google画像検索のように、ブラウザの表示サイズに合わせてコンテンツの量を自動調整して配置するスクリプトをMarcofolio.netから紹介します。Browser size aware content scali [...]

ず、随分間が空いてしまった・・・何て言う現実。 気付けば冬間近ですね。久々の更新が、特別目新しくもなんともないんですが、自分なりのページ送りサンプルを作ってみました。 ホントは最初のだけ有れば事足りてるんですけど、ボリューム感を出す為に4種類+1にしてみました。サンプルサイトを見るサンプルをダウン...

最近、国産のWebサービスも かなり勢いがあるなぁと思ったので ちょっとまとめてみました。よく 紹介されるのは海外製ですが、 それに劣らないMade in Japanの Web制作者が知っておくと便利そうな フリーのWebサービスをご紹介します。順不同です。日本語が完全に通じる海外Webサービスも...

Yahoo!とGoogleの上位表示でアクセスアップ！！SEO対策について初心者の方にも分かりやすく解説します。効果があると言われていたSEOのうち既に過去のものになっている対策方法や、気にするほどでもないくらい与える影響が小さくなっている手法を取り上げて見ます。検索エンジンは多くの情報を公開して...

Webタイポグラフィまとめ2009–01–22フォント指定や行間、約物といった、文字周りのノウハウです。デザインというより技術的なまとめ。SWFObjectとかsIFRといったFlashネタを除けば、Webの文字は全部CSSでできるんだから... コーダこそタイポグラフィを意識すべし。看板みて書体...

「どんなサイトのどんな広告をユーザーは見るのか」――これは、広告主もメディア運営者も非常に興味ある事項ではないでしょうか。今回は、いくつかの大手サイトを男女計5人の被験者に自由に閲覧してもらい、ユーザーがどの広告に目を引かれていたのかをアイトラッキングマシン（被験者の視線の動きを追跡するツール）を...

SOH TANAKAのエントリーから、左右で色が異なる背景画像を設定するスタイルシートを紹介します。Achieving Double Background Effect with CSSdemoブラウザの幅が広 [...]

『 http://coliss.com/articles/build-websites/operation/css/2607.html 』

submit, buttonを角丸にしたデモ対応ブラウザは、IE6+, Fx2+, Op9+, Safari2+, Chrome, iPhoneとなっています。オプションでは、角丸のサイズ、アンチエイリアスの有無、角丸を適用するコーナーの指定などができます。 スクリプトはjQueryのプラグインの...

「Webサイトを作るときに本当によく使う機能を、自分で作らずにさくっと実装したい」――。そんなワガママな願望をかなえてくれる JavaScriptライブラリが登場した。ミツエーリンクスが今月オープンソースとして公開した「MJL（MITSUE-LINKS JavaScript Library）」は、...

2008年09月17日Firefoxで『感動した！』ってアドオン１５個WEBの仕事をしていると、様々なアプリを駆使して作業をこなすという事が多いのですが、わざわざアプリを立ち上げなくてもよい、Firefoxのアドオンがこれだ。 ◆IE Tab■IE Tab :: Firefox Add-onsもは...

Yahoo!検索 インフォセンターでは、Yahoo!検索が利用している検索エンジン、Yahoo! Search Technology（YST）に関連する情報や検索エンジンに関する基礎知識、Yahoo!検索をはじめとしたYahoo! JAPANのサービスの、サイト管理者向けの使い方、ヒントなどを紹介...

Web制作の現場では、さまざまなセオリー・考え方が要求される。筋道の通ったセオリーや理論を理解して実践することは、Webのクオリティを高めるうえでは正攻法といえるだろう。ここではセオリーや考え方などにポイントを絞り、根拠と実践への活用法を紹介していく。知らなかった内容はもちろん、あいまいに理解して...

HONGKIAT.COMのエントリー「50超のCSSやJavaScriptで実装するタブ型ナビゲーション集」から、当サイトで紹介したことのないものをいくつか紹介します。50+ Nice Clean CSS Tab-Based Navigation Scripts

料金プランやサービス内容などの比較など、単純にテーブルで組んでいるだけでは、なんだか味気ないですよね。おすすめのプランを少し、大きく表示して目立たせたり、アイコンやボタンを使って分かりやすく仕上げたり…。今回は、とってもきれいな料金表デザインのまとめです。今回ご紹介するサイトの料金表のデザインは、...

シンプルだけど使いやすそうなフリーのXHTML/CSSテンプレート集「Mantis-a templates」 次の記事 »：ハイパフォーマンスWebサイト - 本 woork: Nice comments counter style for your blog post This post ill...

Styling form controls with CSS, revisited フォームの各エレメントのブラウザごとの表示。追記：2008年2月28日「text field designs」を追加。