これからのclearfix(クリアフィクス)はこれで。 | MJ-WAVE.COM
今までずっと使用してきたクリアフィクス。 こちらの記事によると、もうあんなにプロパティ書かなくていいっぽい。 ちなみに今まで書いてたのはこんな感じ。 .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility:hidden; } .clearfix { zoom: 1; } content: “.”; ってあるけど、これはNetScape用の記述だったらしく、今はもう必要ないかも。 ってことで新しいclearfixはこれでいい。 .clearfix:after{ content: ""; display: block; clear: both; } .clearfix { zoom:1; } いくらかシンプル。 でもzoomプロパティはcss3のバリデータで引っかかるんだよね。 ん〜IE
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ブラウザということもあり、世の中の多くのユーザー
CSS Differences in Internet Explorer 6, 7 and 8 — Smashing Magazine
One of the most bizarre statistical facts in relation to browser use has to be the virtual widespread numbers that currently exist in the use of Internet Explorer versions 6, 7 and 8. As of this writing, Internet Explorer holds about a 65% market share combined across all their currently used browsers. In the web development community, this number is much lower, showing about a 40% share. The inte
IE6問題に対処する10のテクニック | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers 既報のとおり、IE6のシェアは純減を続けている。2009年2月のNet Applications調査によればIE6のシェアはFirefox 3に抜かれて3位に落ちた。今後も下落の傾向は続くとみる向きが多い。しかし、依然として19%を越えるシェアはその次のシェアを獲得している4.5%弱のSafari 3.2を大きく上回る。IE8のリリースが控えている状況ではあるが、WebデベロッパやWebデザイナは依然としてIE6対応を継続しなければならない。 IE6固有の問題を回避する方法はいくつもあるが、それらテクニックをまとめたドキュメントがSitePoint: 10 Fixes That Solve IE6 Problemsとして公開されたので注目しておき
moruzo.com CSSハック
プロフィール (・´ｪ`・) 学生とクリエーターです モルゾ 最終審査を突破！無事、卒業できるみたいです。 モルゾなう (test中)ブログの色を自由自在に変えれるようになりました！ 色を変えてみる CSSハックについて調べてみました。 Internet Explorer、Safari、Firefox、Opera、Google Chromeなどさまざまなブラウザがあります。更にバージョンも様々です。全てのブラウザが同じように表示されるようにマークアップするのは難しいです。そんな時CSSハックすることで一部のブラウザのみ調節することが出来ます。■IE6に適応* html div { color:#FF0000; }div { _color:#FF0000; } IE6のみ除外#div { color /**/:#000000; }（条件分岐コメント）IE6だけに外部スタイルシートを読み込ませ
レイクって主婦でも申し込めるの？ | 現金が必要な時に一番便利なネットキャッシングで即日借入【ネポ】
レイクってよくCMでも目にするし、消費者金融を何か利用してみようかなって考えたときには候補として考えている人もいますよね。やっぱりいくら条件が良くても全く知らない消費者金融よりは、名前を知ってて利用者が多い方が安心できます。でもレイクって主婦でも申し込みできるのでしょうか？申し込める人と申し込めない人、どういう決まりになっているのでしょうか？ レイクにはもちろん申し込み条件がありますが、20～65歳までという年齢の条件があることと、きちんと収入があることの2点だけです。つまり、主婦でも収入があれば申し込むことができるんですね。主婦の収入といえばパートということになりますが、毎月きちんと収入を得ることができていれば、正社員や派遣社員などでなくても大丈夫なのです。 レイクはレディースレイクという女性専用商品を扱っています。対象が女性というのはもちろん、レイクの担当者も全員女性というもので、借り
（有）電脳菓子工房 PSD to HTML
飲料大手 商品紹介ページ 電器大手 商品紹介ページ 通信大手 携帯アクセス制御 モック 洋酒輸入代理店 イベントサイト ポータル大手 コラムページ 不動産フランチャイズ派遣サイト 不動産会社サイト 基礎コーディング 検定サイト 学校サイト サニタリー会社サイト 税理士事務所CMSサイト OS系フォーラムサイト 等 スコープ内 HTML、XHTMLコーディング PSDデータからの画像切り出し 既存スクリプトの埋め込み スコープ外 レイヤー選択 flash制作 ビジュアル設計 システム設計 ※スコープ外の作業は主に外部制作です ターゲットブラウザ IE6,7,8,9 最新のFireFox、Opera、Safari、Chrome
IE7用のハック（*+html body）で指定したスタイルがOperaにも適用される - Webtech Walker
解決方法 そういうわけでXML宣言を入れてる場合にIE7のみ適用させたいスタイルがある場合は「*:first-child+html」を使用したほうよいです。このハックで指定したスタイルだとXML宣言の有無に関わらず、Operaには適用されないのを確認しました。 なのでIE7のみに適用させたいスタイルがある場合は以下のように書くとよいです。 body { background: blue; } *:first-child+html body { background: green; } まとめ とりあえず今回のことでわかったのは、何が起こるかわからないのでハックは極力しないほうがいいということです。当たり前のことですが、改めて思い知りました。 もしかしたら他にも要因があるのかもしれなし、Operaのバージョンによって現象がでないとかいうこともあるかもしれません。詳しく知っている方は教えてくだ
IEバグ：img要素などの置換要素を含む行の前後では、line-heightが指定した値より小さくなる
IEバグ：img要素などの置換要素を含む行の前後では、line-heightが指定した値より小さくなる 行間を指定しているにも関わらず、imgなどの置換要素が含まれると、WinIEでline-heightで指定した値より小さくなるというバグ。 line-heightの値があまり大きくなければさして気にはならないのですが、line-height:200%など多少大きめに指定している場合だと、このデザイン崩れがやっかいです。 サンプル： 行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。
border-collapse | A Day in the Life
統合ボーダーモデルでは、その名の通りボーダーが統合された状態で表示される。各ボーダーモデルはセル間を中心に表示されることになる。テーブル上下左右にはボーダーの半分がはみ出すので注意が必要だ。 今まで統合ボーダーモデルを選んだ時のtableにかかるborderはtableの外にかかるものだと思い込んでた（苦）気になったのでborder-collapseをcollapse（統合ボーダーモデル）、tableとtd,thのborderに1px solidのプロパティを与え、各ブラウザでどのように表示されるか調べてみた。 Win Firefox...左に1pxはみ出す Win IE6...tableの内側に表示 Mac Safari...右に1pxはみ出す Mac Firefox...左に1pxはみ出す borderに1px以上のプロパティを与えてやるとWin IE6以外のブラウザは、ボーダーの半分
スタイルシートをめぐる冒険: inline-blockの奇妙な世界
inline-blockとは、displayプロパティの値のひとつで、表示形式を「インラインに流し込むことのできるブロック要素」にするためのもの。まともに対応しているのが、OperaとSafari、それになぜかMac版IEくらいというマイナーな存在だが、なかなか興味深い振る舞いをする値なので、いろいろと検証してみた。 まず、「インラインに流し込むことのできるブロック要素」とはどういうものなのかを見てみるために、.inlineblockというクラスを作り、div要素に指定してみた。また、「インラインに流し込むことのできるブロック要素」とは、言い換えれば、「幅と高さを指定できるインライン要素」ということだから、span要素にも指定した。 インラインブロックの検証 その1 【スタイルシート】 .inlineblock { display: inline-block; width: 100px;
clearfixハックは本当に必要なのか - MID [Serendipity Weblog]
いわゆるclearfixハックネタなのですが、あるブロック内にfloatさせた要素を並べると、状況によってレイアウトが崩れるわけです。 こいつを綺麗に整えるためにはfloatさせた要素の後でclear:leftなどで一旦解除させる、というのがclearfixの原点のように思います。 最近またこの手のネタがはてブで盛り上がっているようです。 floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（ ）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 少し遡って 解決法は2つある。ひとつは、「原因」
ブラウザバグ回避用CSSセットアップ / IEバグ対処フロー | Takazudo Clipping*
暇だからCSSのセットアップでも載せとく。 CSSレイアウトで問題になるのは、ブラウザごとにバグがあって、それに対応するのにどうするかっていうのが一番困る。でも、ブラウザごとにっていっても、実際に問題があるのは、ネスケ4とかIE4とかMacIEとの本当に古いブラウザと、バグの多いけどまだちょっと使っている人がいるIE5、IE5.5、まだまだこれからも高いシェアを続けていくIE6と、かなりましになったけどまだちょっと問題のあるIE7を、なんとかすればいい。逆に言えば、これら以外のブラウザには、フツーに何の仕掛けもなしに、きちんと表示される必要がある。FirefoxとかOperaは、かなりきちんと表示してくれるから。 要するに問題なのはIEばっかりなんだけれど、FirefoxやOperaできちんと表示されていれば、IEでボロボロになってても、大して心配はない。一定の流れでバグ回避をしていけば
TRANS - * { magin: 0;}だけでは物足りない！zoom: 1;を使おうよ！
IE6からIE7が今後本格的にマーケットシェアを取って行くことを考えると、IE7の仕様やバグを考えた上でのマークアップが欠かせないとは思います。でも、僕らはまだIE7がどんなものかが分からない。そのため、とりあえず* { zoom: 1;}を指定しておくことが安全策なのかもしれません。 IE7のZoom機能で、見事にこける。 先日、うちの本体のサイトを更新し終わった際に、スタッフから「あれ、しゃらくのサイトずれてるよ」と指摘されました。更新箇所が多く、CSSも多少いじくったので、どこか消してしまったのかもしれません。そこで、自分のブラウザで確認するも、どうも問題が再現できない。そのスタッフのブラウザを見ると、こんな感じになっていました。 僕のFirefoxで見てみても問題ないし、そのスタッフが使っているIE7でも問題なし。「うーん」と悩んでみるものの、意外と答えは簡単なところにありました。
非対応セレクタを利用した CSS ハックの注意点 - 2xup.org
2007-01-21T04:00:10+09:00 Microsoft Internet Explorer 7 正式版の登場で、これまで未対応だった CSS セレクタが利用できるようになりました。Windows IE7 で対応したプロパティのおさらいと、その他ブラウザでの対応状況を資料ではなく実際に試してみてまとめていた中から今回は子セレクタと隣接兄弟セレクタにしぼり、備忘録も兼ねてまとめてみます。子セレクタ、隣接兄弟セレクタの仕様は以下のとおり。 子セレクタ A>B { property: value; } 親要素 A の直下(子) にあるBにのみ装飾を行うセレクタ。 div>span { color: gray; } この場合、<div><span>not gray</span></div> はグレーの文字になりますが、<div><p><span>not gray</span></p>
[CSSNite in Nagoya 2007] 極力ハックしない CSS というテーマでお話しました - pur*log
[CSSNite in Nagoya 2007] 極力ハックしない CSS というテーマでお話しました 2007-03-12T11:29:48+09:00 Tag: CSS, CSSNite, event, hack, presentation, seminar 去る2007年3月10日、CSS Nite in Nagoya 2007にて、「極力ハックしない CSS」というテーマでスピーカーとして参加させていただきました。 総勢282名という多くの方にご参加いただき、プレゼンターとしてだけではなく、参加者としても有意義に勉強させていただくことができました。 回想や反省を含めて、またあとで追記するか別エントリで書こうと思います。取り急ぎ pdf 版の資料を公開いたします。音声版は後日 CSS Nite 公式ページで公開される予定ですので、興味のある方はご覧ください。（追記）PDF 版に加え
expression() のまとめ
前書き expression()のことをダイナミックプロパティといいます。 スタイルシートのプロパティで body { height: expression(); } みたいに使います。 簡単に言うと、CSSの中でJavaScriptが動かせる、って感じです。 IE5以上での、独自拡張です。 Googleで検索しても、 イマイチまとめサイトとかサンプルみたいなものがなかったので、 値としてスクリプトのようなものが書けるということしか知らないのですが、 いろいろ実験してでてきた経験則を、 ここでまとめて紹介して置いておくことにします。 あくまで経験則なので、もしかしたら間違ってたり もっとうまいやり方があったりするかもしれません。 備考 IE5以上で、 expression() というプロパティを使うことで、 ダイナミックにページや要素のスタイルを変えることができます。 一番簡単で、かつ一番
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
簡単にブラウザ別CSSを導入するJavaScript （CSS Browser Selector） - youmos
モダンブラウザ向けCSSハック：ウェブネタブログ
http://spreadsheets.google.com/pub?key=prvB_MFPHuEHOYL7ulKmYOQ&output=html