Matthew James Taylorのエントリーから、高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介します。 Equal Height Columns with Cross-Browser CSS & No Hacks demo: 2カラム demo: 3カラム 以前、紹介した「高さの異なるカラムを揃えるスタイルシート」では、ページ内アンカーで要素が消失したり、IEで印刷できないなどの不具合がありましたが、今回紹介するものは、その２つの不具合が無いものとなっています（IE7調べ）。 対応ブラウザは、IE5.5, 6, 7, Fx1.5, 2, 3, Op8, 9, Safari, Google Chromeなどほとんどのものに対応しています。 仕組みはカラムごとにdivを用意し、それぞれをずらして配置します。 下記は、そのイメージです。

Coming SoonGet ready, something cool is coming!

May 08, 2007 331 Comments Tags: Javascript If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom. This CSS dock menu is perfect to add on to my iTheme. Here I will show you how to implement it to your web page. CSS dock menu screenshot Update: I no longer supp

もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife class名やid名って付ける時悩みませんか？今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 class名やid名を付ける際の一般的な名前集を紹介されてます。 全体のラッパー wrap wrapper top-wrapper wrapperAll ヘッダー head header headerArea headline ナビゲーション部分 navi navigation navbar gnav メインコンテンツ部分 area main maincontent center フッター foot footer footnavi footerArea 他の名前一覧も読む場合はこちら なるほど、あらかじめCSS名を決めてメモっておくことで

CSSでグラフをデザインしたい。 そんなときにおすすめなのが、『8 CSS Techniques for Charting Data』。グラフを作るためのCSSテクニック集だ。 以下にいくつかご紹介。 ↑のキャプチャはCSS for Bar Graphs。 CSS Vertical Bar Graphs Creating a Graph Using Percentage Background Images Accessible Bar Chart その他のリストは以下から。 » 8 CSS Techniques for Charting Data グラフを作るためのCSSテクニック、チェックしてぜひ参考にしてみてはいかがだろうか。 「ミスト」を見たよ。めちゃこわかった。。クローバーフィールド並みでしたね。しかも後味がよくないな。。

An exclusive pack of creative resources, updated every month. 8,000+ icons, mockups, logos, templates, themes and more. Get Lifetime Access For $19

フォントごとの「&」のデザインが知りたい。 そんなときにおすすめなのが、『Use the Best Available Ampersand』。CSSでベストな「&」を指定してみるサンプルだ。 このエントリーは、OSごとに「&」がどのように表示されるかを教えてくれる。 ↑はWindows Vista。 Mac OS X (10.5) Windows XP CSSは以下のように指定すればOKだ。 <span class="amp">&amp;</span> span.amp { font-family: Baskerville, Palatino, "Book Antiqua", serif; font-style: italic; } CSSでベストな「&」を指定してみるサンプル、チェックして参考にしてみてはいかがだろうか。 カフェに行ってまったりしてたんだけど、カウンターだったのでマスター

ブラウザごとのスタイルシートの記述に、ifを使った条件式が利用できる「Conditional-CSS」を紹介します。 Conditional-CSS デモ デモ画面にIE, Fx, Op, Safariの各ブラウザでアクセスすると、それぞれ用の画像が表示されます。 条件式に利用できるものは、下記のようになっています。 browser IE - Internet Explorer Gecko - Gecko based browsers (Firefox, Camino etc) Webkit - Webkit based browsers (Safari, Shiira etc) Opera - Opera's browser IEMac - Internet Explorer for the Mac Konq - Konqueror IEmob - IE mobile PSP - Pla

janko at warp speedのエントリーから、h1やp内のテキストデータに、グランジ風のエフェクトをつけるスタイルシートを紹介します。 Add grunge effect to text using simple CSS デモ 仕組みは、以前当サイトでも紹介した「テキストにグラデーション効果をつけるスタイルシート」と同じもので、背景画像を変更したものとなっています。 空spanを使用するため好みは分かれると思いますが、画像で作成することに比べて、テキストデータだと修正・更新が容易という利点もあります。 デモは、下記のようになっています。 HTML <textarea name="code" class="html" cols="60" rows="5"> <h1>This is one very long title with grunge effect<span></span>

I like the little icons next to hyperlinks that signify if that link will take me offsite, open a popup, or link to a file (as opposed to another html page). Here's how to do it in a way that's supported in IE7, Firefox, and Safari. Download zip Images First, find some nice little icons (or better yet, create them yourself) in gif format that will be used as the cues. It might be easier for them a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut d

Hidden Pixels - CSS Frameworks CSSフレームワークがまとまっていたので紹介。 CSSフレームワークを使えば、ブラウザ間のCSSの差異吸収や、ブロックレイアウトが簡単になって便利、ですが沢山ありますね。 Elements CSS Frameworks YUI Grids CSS YAML CSS Framework Blueprint CSS Schema Web Design Framework CleverCSS Tripoli CSS Framework ESWAT Web Project Framework Boilerplate CSS Framework WYMstyle CSS Framework That Standards Guy CSS Framework 960 Grid System Emastic CSS Framework これだけ