ここ2年ぐらいで、Appleのサイトは積極的にCSSとかAJAXとか新しい技術を採り入れ始めていて、最近はCSS関連のイベントで「AppleサイトのCSSを解析する」みたいなスピーチをされた方もいるらしく、サイトの存在自体がおもしろくなってきたと思う。特に個人的にスゴイと思うのは、全体一発リニューアル！とかやらずに「少しづつ、かつ抜け目なく」新しい技術をサイトに注入して、まるで生物が進化するかのようなアップデートをしているところ。一発リニューアル！が難しい大企業系サイトとして、ここまで柔軟かつデザインドリブンな運営方法は学ぶべきところが大きいと思う。 とはいってもAppleではiPhone登場時、アップルジャパンでは新iMac登場時に、10年近く使い続けたタブデザインを新しくし、珍しく全ページに渡る更新を敢行。早速Firebugなんかで構造をチェックしていると、グローバルメニューの画像置換

Unit Interactiveのエントリーから、透過PNG画像をIE6で表示する、超軽量(2KB)の設置も簡単なスクリプトを紹介します。

CSS Decorative Gallery I’m using the same trick to show you how to decorate your images and photo galleries without editing the source images.CSSでイメージをオシャレに修飾するサンプル集「CSS Decorative Gallery」。 イメージにＣＳＳをあてることで、次のように、セロハンテープで貼り付けたり、画鋲でとめたりといった効果を出すことができます。 デモページはこちらでＩＥ６でも問題なく動作。 沢山種類があって、色んな場面で使えそうです。 これは久しぶりに感動しました。

Ann Arbor Michigan Web Design AgencyYou have a split second to make a great first impression on your website See how 3.7 Designs can help you convert more prospects into leads, customers, and members through advanced design psychology and our exclusive Six Layers of Design™ process.

気になった初期化CSS コリスさんの記事でブラウザのデフォルトスタイルを初期化するCSSのサンプルが多数掲載されていました。 >> [CSS]ブラウザのスタイルを初期化するスタイルシートのサンプル集 | コリス 初期化する内容やどこまで初期化しておくのかは案件ごとのデザインなどによってケースバイケースだったりして、完全にこれが私のリセットCSSですと言えるものはないのだけれど、それなりにいつもだいたい使いまわしている自分のリセット部分のソースと見比べて考えてみた。いろいろと拝見して気になったものが2つあったのでメモ。 select option に paddingを指定する 予めブラウザのデフォルトスタイルを全称セレクタ（*）なんかで一気にpaddingを0に指定してしまうと、Fxなどの一部のブラウザでだけのようだけど、selectのoptionの右端が下向き矢印マークで隠れてしまうことが

Styling File Inputs with CSS and the DOM // ShaunInman.com This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation. inputのtype=fileをCSSでクールにスタイルするサンプル input type=file なエレメントを次のように美しくスタイリングするサンプルが公開されています。 これはなかなかクールですね。Web2.0なサイトでは是非実装したいスタイルです。 関連エントリ サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ CSSでデザインされたテーブルレスでクールなフォームサ

前回のIE編の冒頭で、私は「CSS自体の正しさとか美しさを優先し、そのためには古いバージョンのブラウザは犠牲になってもしょうがない」と書いた。その流れでいえば、マイクロソフトもサポートを打ち切ったMac版IEにそもそも対応する必要があるのか、IE編でWin版IE5.0を無視したのだから、Mac版IEも無視していいのではないか、という疑問が当然わく。至極もっともなことである。が、しかし、それで終わってしまっては本稿自体が成り立たない。しぶしぶではあるが、Mac版IE（5.x）でfloatをクリアする方法を探ってみよう。結論はもうすでに出ている。以下の通りである。 .clearfix:after { content: url(pixel.gif); display: block; clear: both; height: 0; } .clearfix { display: inline-blo

miyakeです。突然ですが、CSSって書くの面倒ですよね。何らかのプログラミング言語を知っている人間から見ると、CSSというのは言語としてはかなり貧弱です。 もちろんCSSはプログラミング言語では無いので、それを貧弱だと言われてもCSSもいい迷惑かも知れません。でも、 div#content { ～ } div#content div.entry { ～ } div#content div.entry p { ～ } div#content div.entry ul { ～ } こういう大したことをしていないのに、コードがどんどん長くなっていくのを見ると、もう少し何とかならないものかと思ってしまいます。 コピペするにしても、 コピー元にカーソルを移動 範囲選択してコピー コピー先にカーソルを移動 ペースト という操作が必要になります。数が増えてくるとコピペのミスも発生しかねませんし、id

てんぽ: 可変幅で両側にドロップシャドウ（div一重で） CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど background-positionを%単位で指定し、ドロップシャドウ用の画像の大きさを調整することで、 画面の両側に影をつけたリキッドデザイン（画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会のような）を実現できます。 しかも必要となるdivはひとつだけです。 このようなデザインでは divを二重にして一方のdivの左端に左側用の影画像を、もう一方のdivの右端に右側用の影画像を背景画像として指定するのが簡単です。 <div id="left"> <div id="right"> </div> </div> #left { width: 90%; margin: auto; background: url(shadow-left.gif) top

CSS Juice - Design, Tutorial, Showcase and more 25 Rounded Corners Techniques with CSS Rounded corners is one of the most popular and frequently requested CSS techniques even the father of internet Google also launch the rounded corners style markup with her Google Adsense and let users to custom their ads recently. CSSで角丸テクニック２５がまとめられていました。 様々なサイトにでの角丸実装ドキュメントのまとめです。 Sliding Doors Even More Round

少し前に出た話題だけど、CSS (だけ) でブラウザのウィンドウの中央にボックスを表示させてみる。元ネタは以下の記事より。 CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 | CREAMU 以下のリンク先にサンプルがあります。 sample.html 仕組みとミソ 元記事のように、ネガティブマージンを使用すると、中央配置したボックスの大きさよりブラウザのウィンドウが小さくなると、右上半分が消えてしまいます。 また position: static; な body 要素に絶対配置すると、ブラウザのウィンドウを小さくしていくとうまいこといかない (画面の中央に表示されない) 現象がみられました。ということで今回は以下のように対策してみました。 高さ 100% の body 要素に posit

CSSでいつも悩まされるのはクロスブラウザですけど、フォームでは特に面倒くさい要素が山盛りですよね。ボタンの文言を動的に変えたいから画像はなるべく使いたくないけど、だからといってブラウザのデフォルトのボタンとか、味気ないですものね。 今日は、フォームにつきもののボタンについて考えてみます。 私たちがボタンに求めるモノって、何でしょう。 データを送信（submit）する どのブラウザでも同じように見える 使い回しが聞く ボタンについている文言がどんなに長くなっても、水平方向の長さがフレキシブル 上記のようにサイズ的にフレキシブルであっても、見た目の美しさを阻害しない ボタンの大きさ＝クリックできるエリアの大きさ 画像がdiableされていても使用可 CSSがdisableされていても使用可 ボタンのように見えて実はただのリンクの時のもある これらの要求を解決してくれる方法が複数出

2007-07-31T20:30:41+09:00 各表示モードによる CSS 解釈の違いをまとめたドキュメントで『body 要素の最初の内包要素に上マージンがある場合の body 要素デフォルトのマージン処理』については僕自身がきちんと理解できていないためブログ記事内では解説やサンプルを引っ込めていたのですが、記載を残していた表へのフィードバックをいただきました (ありがとうございます！)。 さらに、[body直下要素に上マージン その2：メモランダム] を読んでしっかり理解できました。本当にありがとうございます！ サンプルも無くややこしい表現をしている状態でしたので、サンプルの共有、表の修正と詳細を用意します。 XHTML 1.0 Strict 文書 XML 宣言を省略した XHTML 1.0 Strict 文書 DOCTYPE 宣言の無い謎のマークアップ言語で書かれた文書 Windo