IE6 が死んだらできる10のこと（from Ajaxian） - oogatta のブログ
という記事がその昔 Ajaxian に挙がっていたので自分のメモとして残っていたモノを、そろそろ時期が来たかと言うことでこちらに再掲。 http://ajaxian.com/archives/10-cool-things-we%e2%80%99ll-be-able-to-do-once-ie6-is-dead-and-a-few-we-cant 子セレクタ（child selectors）が使えるようになる。 孫以下を除く直の子にだけ適用するセレクタが使えるようになります。 #bodyMain > p {} ul > li 24bit PNG の機能を全て使えるようになる。 アルファチャンネル付きPNGがネイティブで使えます。アンチ付き角丸を背景色毎に用意する必要が無くなります。 属性セレクタ（attribute selectors）が使えるようになる。 感覚的にいって class の3割
IEをモダンブラウザのように扱う方法10 – creamu
IEにだけできないことを可能にしたい。 そんなときにおすすめなのが、『10 ways to make Internet Explorer act like a modern browser』。IEをモダンブラウザのように扱う方法です。 便利そうなのが揃っているので、ざっとご紹介しますね。 HTML5をIEでも使用可能にする html5.jsを読み込んで、HTML5をIEでも使用可能にする text-shadowプロパティー IEでtext-shadowプロパティーをfilterを使って実現 IEでのbox-shadow filterを使ってシャドウに見せるテクニック 角丸 モダンブラウザはborder-radiusで、IEにはDD roundiesを適用 マルチカラム div要素にカラムを追加する。IE用にはjQueryプラグインで実装 HTML5の表現はだんだん増えてくるかと思うので、一
iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone（iPod Touch）向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記： iPhone向けサイト制作の書籍を執筆しました！ 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5＋CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張（CSS）があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
[CSS]ハック無しで、不透明なパネルをドロップダウンするナビゲーション
IEをはじめとするクロスブラウザ対応の不透明なスタイルを適用したドロップダウン型のナビゲーションをCSSplayから紹介します。 IE6でのキャプチャ ナビゲーションはJavaScriptやtableは使用しておらず、スタイルシートもハックや条件付きコメントは使用していません。 対応ブラウザはIE5.5/6/7/8, Fx, Op, Safari(Win), Chromeとのことです。 また、同様に垂直型のナビゲーションも公開されています。
2009年、ウェブデザインに役立つまとめのまとめ
Web Design Trends For 2009 邦訳：2009年、押さえておきたいウェブデザインの10のトレンド 2009年に流行るであろうとされた10のトレンドです。確かに、これらのものが使用されたサイトは多く見かけました。
[Ajax][UI]画像スライダー・郵便番号検索・バリデーション « vanillate
画像をインラインフレームなどを使わずにスライドさせたり、郵便番号を入力するだけで（ボタンを押さずに）住所の入力補助ができたり、データを送信するまえにエラーチェックを行ったりといったインターフェイスが、当たり前に利用されるようになってきました。 利用側としては、使いやすい方に慣れていく傾向にあるので、私も取り入れるために調べてみた際のまとめです。 こういう処理の実装を行う時って、時間がない、仕上げの時が多いので、比較的に簡単に導入できそうなものを中心に、ご紹介します。 jQueryTOOLS デモ スライダー、ツールチップなどが簡単に実装できるライブラリ 1. Tabs（タブでDIV内容を切り替え） 2. Tooltips（ロールオーバーなどでヘルプ表示） 3. Overlay（同一ページ内で新しいウィンドウを表示） 4. Expose（クリックされた要素以外を暗転） 5. Scr
ロゴデザインをする時に参考になるサイト60+ – creamu
DESIGNM.AGで、ロゴデザインをする時に参考になるサイトが紹介されています。 4つのカテゴリーに分かれてたくさんありますね。いくつかご紹介します。 ロゴデザインのインスピレーションが得られるサイト » Logo Faves » LogoGala » Logo of the Day ロゴをテーマにしたブログ » Logo Design Love » David Airey » Logo Designer Blog ロゴデザインチュートリアル » Zeeのロゴをillustratorで作る方法 » オバマ大統領のOのロゴの作り方 » レインボーカラーのロゴを作るチュートリアル ロゴに関する記事やケーススタディー » Henri Ehrhartのブランドデザイン » Miskeetoのブランドデザイン » Butterfield Photographyのロゴデザインプロセス よくまとまって
IE 6で泣かないための、9つのCSSハック (1/3) - ＠IT
有限会社タグパンダ 喜安 亮介 2009/10/8 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） 最も多く使われているのに……、いや、だからこそ 多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE（Internet Explore）のバージョン6です。 IE 6は、発売開始当初のWindows XPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザー
jQueryでブロック要素の高さを揃えてみる - 徒書
ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。 というわけでまたも自分なりに書き換えてみるシリーズなのですが、今回は要素取得の柔軟さに着目してjQueryを使ってみることにしました。 できたものは以下です。 jquery.flatheights.js 動作サンプル jQueryの$関数ではCSSセレクタの書式で要素を取得できるので、例えば「"box1"というclass名を持つ要素」を集めるのであれば
実用的なユーザビリティの10のポイント：ガイドライン編 | コリス
ユーザーにあなたのウェブページを容易で、そして楽しくアクセスできるようにする実用的なユーザビリティの10のポイント（ガイドライン編）をSmashing Magazineから紹介します。 Tumblr 多くのフォームは2カラムのレイアウトを採用し、ラベルはフィールドの左に配置されています。一見よさそうに思えますが、これは採用すべきではありません。 なぜなら、フォームは一般に垂直に方向付けがされているためです。ユーザーが左→右→左下と視線を動かすことより、上→下と移動する方が容易です。 また、ラベルを左に配置することはもう一つの問題があります。 あなたはラベルを右揃えと左揃えのどちらで配置しますか？ 左揃えはラベルを読みやすくしますが、どのフィールドのラベルか判断するのが難しい場合があります。 右揃えはその逆です。フィールドのラベルを判断するのは容易ですが、ラベルを俯瞰するのが困難です。 2.
Ajax画像イメージギャラリー＆スライドショーのまとめ7選 : 4GALAXYのメモ
15 24 08 2007 Ajax画像イメージギャラリー＆スライドショーのまとめ7選 Samples, Ajax 仕事で調べる機会があったので、実用的に使えそうな物をピックアップ Sample - Highslide JS サムネイルからポップアップで原寸表示ギャラリー、Keyboardからもコントロールできます。HTML、Flashの表示も可能 Sample - ThickBox 3.1 画像のほかにもHTML、IFRAM、INLINEコンテンツに対応しています。jQueryライブラリ使用。 Sample - Fading Slideshow 1ページ型 大きめの画像スライドショーなんかに良さそうです。prototype.js scriptaculous.jsを使用 Sample - JonDesign’s SmoothGallery 埋め込みスライドショー型 Sample
webサービスを作る前に読みたいデザイン系エントリまとめ - 遥か彼方の彼方から
まとめwebプログラムをしていて、いざサービスを作ろうと思ったときにネックになるのが、デザインです。 僕はもうその手のセンスが絶望的に欠けていて、配色もレイアウトもまともなものが出来ません。HTMLやCSSそのものの知識があっても、それで作るモノが見えてこない。CakePHPの勉強をしてwebサービスをいっぱい作ろうと思っているのに、これは良くない。 そこで実際にwebサービスを作る前に読んでおきたいwebデザイン系の記事をメモとして並べておくことにしました。「これを読んでおけ」「ここのデザインは参考になるよ」「このアイコン集おすすめ」「あのツールの使い方ならここだ」「このツール良い感じ」みたいなものがあれば、是非教えてください！ 随時追加していきます。 プログラマでも出来るWebデザイン - Blog.37to.netウノウラボ Unoh Labs: デザインセンスの無い人がwebサイト
光源や１ピクのラインや透過を使ったウェブレイアウトのPhotoshopのチュートリアル集
光源やライトやシャドウ、グラデーション、1pxのライン、透過などを巧みに使用したウェブレイアウトのPhotoshopのチュートリアルを紹介します。
リアルな現実をサイトデザインに組み込んだサイトデザイン作成チュートリアル集:phpspot開発日誌
リアルな現実をサイトデザインに組み込んだサイトデザイン作成チュートリアル集。 次のような、ノートをそのまま開いたような自由なレイアウトの作成チュートリアルをまとめてみました。 Create a realistic web layout デスクにノートを広げたようなユニークなレイアウト作成チュートリアル Nature Portfolio Layout Interior Design Layout 3D Blog Layout Create a grunge personal portfolio layout Computer Store Web Layout Professional Business Layout Desktop Style Web Layout Photoshop Tutorial 机上スタイルのレイアウト作成チュートリアル Grunge Photographer Lay
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
[CSS]CSS3で何ができるの？ という時にみておきたいサイト集
IDEA * IDEA
ランディングページ集めました。%26utm_content%3DGoogle%2520Reader)
css-lecture.com
_level0 | Kayac Interactive Designer's Blog
