css filters (css hacks) - centricle
Windows Mac OS X Macintosh Other IE Mz Ns Op iC IE Mz Ns Om Op Sf IE Mz Ns Op Ko 7 6 5.5 5 4 1 7 6 4 8 7 6 5 2 5 1 7 6 4 8 7 6 5 2 5 4 1 7 6 4 6 5 3 7 6 5.5 5 4 1 7 6 4 8 7 6 5 2 5 1 7 6 4 8 7 6 5 2 5 4 1 7 6 4 6 5 3 IE Mz Ns Op iC IE Mz Ns Om Op Sf IE Mz Ns Op Ko Windows Mac OS X Macintosh Other voice-family:"\"}\""; voice-family:inherit; property:value;
スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る ―モダンブラウザ編―
floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear: both"></div>）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。 例えば、clearfixの提唱者ではないかと類推されるPosition Is Ever
CSS Step Menu
What is this? 5 step (showing each state of the step menu) Step 1: XXXXXXXXEt nequ a quam turpis duisi Step 2: XXXXXXXXEt nequ a quam turpis duisi Step 3: XXXXXXXXEt nequ a quam turpis duisi Step 4: XXXXXXXXEt nequ a quam turpis duisi Step 5: XXXXXXXX Et nequ a quam turpis duisi Step 1: XXXXXXXXEt nequ a quam turpis duisi Step 2: XXXXXXXXEt nequ a quam turpis duisi Step 3: XXXXXXXXEt nequ a quam t
CSS: Menu Descriptions - Mike’s Experiments
Mike’s Experiments - CSS: Menu Descriptions This is a CSS technique that could be useful if you want to give users accessible added content such as tool-tips, notifications, or alerts, without adding unnecessary clutter to your page. And since it doesn’t rely of JavaScript, it should be useful to everyone, even disabled users. Get the XHTML, CSS, source. Go to back to the Mike’s Experiments index
Lucky bag::blog: CSS3 の target 疑似クラスで脚注を動的に表示する
文書の URI の後に #foo などの識別子（id）をつけたアンカーから、その文書内の当該箇所へジャンプできるのは周知の通り。ただ、スクロールもせずに移動するんで、閲覧者が一瞬戸惑ったりるすわけで、CSS3 では、そのターゲットとなる要素をハイライト表示させたりすることが可能な :target 疑似クラスってのが用意されている。現在、:target 疑似クラスに対応しているブラウザは、Firefox などの Gecko 系と Safari、Konqueror とか。IE や Opera は未対応。 Selectors 6.6.2. The target pseudo-class :target そんな :target 疑似クラスを利用して、文書下部に用意した脚注を動的に表示させてみるの試み。ちなみに、サンプルは未対応な IE でも再現できるように、Suckerfish :target |
WEBデザイン BLOG: MTアーカイブ
先月の9月29日（Sat）にカンファレンスが行われたようですね。急な用事で参加できなくなってしまい残念でしたが、なかなか面白い内容のことが発表されたようですね。こちらにて開催された内容レビューが公開されています。【第16回】WebSig会議「Web屋さんのためのMovable Type 4」レポート (WebSig24/7) 資料が公開されていますので、興味のある方はこちらでDLできますのでどうぞ。【第16回】WebSig会議「Web屋さんのためのMovable Type 4」資料公開 (WebSig24/7) 自分も質問（というか希望なんだけど）したかったです。あとで書いておきます。それにしても、参加者の方の参加後レビューエントリーが発信されていないなー。前回のCSSNite（CSS Nite in Osaka, Vol.5レビューとセッション・研修会について）といい、関西のWEB制作者
ITmedia Biz.ID：Wordのお節介をなくす10の方法
何かとお節介な動きをすることが多いOffice。これらの設定を変更し、直感的に使うためのTipsを紹介する。Word編。 前回のExcelに引き続き、今日はWordの「お節介をなくす10の方法」を紹介する。内容的にはExcelと一部重複するが、設定画面の階層が異なる場合も多いので、同じTipsについても改めて紹介する。Word 2002／2003のほか、Word 2007でも検証した。 Wordの「お節介をなくす10の方法」インデックス アルファベットの1文字目が勝手に大文字になったり、記号に変換されるのを防ぐ 「1.」や「・」が行頭にある文章を改行した際、勝手に箇条書きになるのを防ぐ URLにハイパーリンクが勝手に張られるのを防ぐ 単語の下に波線を引かれるのを防ぐ 勝手にスペルチェックされるのを防ぐ 図を挿入する際に、勝手に描画キャンバスが作られるのを防ぐ あまり使わないメニューが勝手に
IE7 の隣接セレクタで気が付いたこと
「画像の使用を（略）CSS大会」 に応募した自分の作品を、IE7 で見てみたんですが、なぜか隣接セレクタ （E + F） がまったく適用されていないのに気がつき... 「画像の使用を（略）CSS大会」 に応募した自分の作品を、IE7 で見てみたんですが、なぜか隣接セレクタ （E + F） がまったく適用されていないのに気がつきました。 IE7 は隣接セレクタに対応してるはずなのでおかしいな、なんか自分の書き方がおかしいのかな？なんて思って、手元にある CSS をいじったりしてみたのですがまったく効果なし。何でだろうと思って HTML 文書の方を見て、何気なくソース内のコメントを削除してみたら...... 普通に適用されてる...... orz 該当する HTML ソースは下記の通り。 <div id="navigation"> <h2>Contents</h2> ...中略... </di
404 Blog Not Found:Apache - proxyを使って人様のアクセスをログする
2007年04月07日22:15 カテゴリiTech Apache - proxyを使って人様のアクセスをログする そんなPHPなんて使わなくても、Apacheだけでできますがな。 企業イントラネットのちょっとグロイ小話4本*ホームページを作る人のネタ帳 かなり簡単な構造です。 検索ボックスから http://(自社グループウェアドメイン)/get.php に対して、検索ボックスからクエリを送信する。 ここで、サーバーに検索キーワード履歴を保存します。 その後、何事もなかったかのように header("Location: http://www.google.co.jp/search?q=".$q."&hl=ja&ie=EUC-JP"); をPHPに書き込んでおくだけで、Googleの検索結果に移行する。 以下はApache 2.0.xにおける方法ですが、1.3.xでも2.2.xでも違いはほ
Elements of Design: A Web Design Showcase
Elements of Design is a collection of UI components that highlight best practices for particular design patterns from leading websites around the world. Browse the archives and use it as a source of inspiration for your next web design project. The average shopping cart abandonment rate is slightly under 70%, which translates to billions of dollars in lost sales per year. As a result, an effective
CSSでポップアップネタ・改正版：RedLine Magazine
CSSでポップアップネタ・改正版 以前に書いた「CSSでポップアップネタ」という記事のサンプルの件。SafariやmacIEでは表示が変なんです、とLe Archeの冥さんからこちらの記事で教えて頂いた。 冥さんが撮ってくださったキャプチャによるとこんな感じ。 背景色を指定したボックスのみのパターンはOKみたい。ただ、背景を画像にした場合、Safariでは位置はあってるけど、テキストと背景画像が出てこない、テキストがズレている。macIEでは位置が変ってな感じ。あ。今Operaで見たらこっちも変やった(汗)ちょうど今日macをゲットしたのでさっそく検証してみる。 つーことでもう一度サンプルを新たに作ってみた >>RedlineMagazine::CSSでポップアップ・改正版サンプルはこちら 検証したブラウザはIE6、IE7(Standalone版)、Firefox、Netscape7、8、
RedLine Magazine : floatの親ボックスをoverflowで伸ばす
floatの親ボックスをoverflowで伸ばす CSS - Clearing floatsという記事を拝見して。左記ページでは冒頭で『floatを利用したレイアウトに関する一般的な問題はfloatボックスを含む親ボックスがそのfloatボックスの最後まで高さを伸ばしたがっていないということです。』と述べている。少し日本語訳がおかしいかもしれないが、要するにfloat使用時に一番やっかいなのは親ボックスの背景が伸びない事だと言っているわけだ。 cssレイアウトを始めた頃に混乱に陥りがちなあの現象。 以前ほんの少しだけこのサイトでもclearfixを利用したこの問題の解決方法を書いた記憶があるが、上記ページではoverflowを利用した解決方法が書かれている。ソースはシンプル。 div.container { border: 1px solid #000000; overflow: auto
「clearfix」のIE 7対策
CSSで、フロートした要素がはみ出してしまうのを回避させる「clearfix」のIE 7対応版です。 「clearfix」の解説ページ Clearing a float container without source markup（Position Is Everything） 「clearfix」のIE 7対策方法 「.clearfix」に「min-height:1%;」を追加します。 .clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix{ display:inline-block; <span class="accent1">min-height:1%; /* for IE 7*/</span> } /* Hides from IE-mac &
stu nicholls | CSS PLaY | experiments with cascading style sheets | home page
What it's all about... "Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents." The above quote, taken from the W3C website, is one of the reasons for this site. Whilst I agree that it is a mechanism for adding style to web documents, I do not agree that it is a SIMPLE mechanism. It can be very complicated, as I found out when I took my
Redline Magezine：：CSSでポップアップネタ
(2007年4月5日追記) このサンプルは一部のブラウザにしか使えません。 >>改正版のサンプルをこちらに置いているので、そちらを参考にしてください。 ブックマークしてくだった方、すいませーん・・・。 サンプル01:元ネタのCSS examples - centred pageさんと同じパターン ここにマウスを乗せるとポコっと。サンプル１ spanでマークアップされたテキストが出てきます。 CSSソース <style type="text/css"> <!-- .popup01 a{position:relative;} .popup01 a span{ position:absolute; top:-55px; left:0px; width:200px; padding:5px; visibility:hidden; background:#f5f5f5; border:2px sol
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
hereticanthem co.,ltd. » Photoshop&Illustratorのチュートリアルまとめ
ボックスをはみ出さないようにfloatをクリアCSS:clearfixハック | Tech de Go
Listamatic2: Pop-open list
Dr. Web Weblog ? Blog-Archiv ? Collection of Web 2.0 Navigation Menus
aplus moments
