「CSSで段組したらFirefoxで背景が出ねーよっ」て話をよく聞くので色々試してみました。 コンテンツメニュー 元になるHTML 特に何も考えずfloatを使った場合 外のボックスに幅を与えてみる 一般的な解決方法 その他の解決方法 overflowを使う 最終回答 番外編 更新履歴 このドキュメントについて 元になるHTML <div id="container"> <div class="leftBox">内容</div> <div class="rightBox">内容</div> </div> 例1(ブログ) class="leftBox"のボックスの内容は「サイドバー」。class="rightBox"の内容は「記事部分」。 例2(ウェブサイト) class="leftBox"のボックスの内容は「ローカルナビゲーション」。class="rightBox"の内容は「情報」。 例3
CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ <textarea name="code" class="css" cols="60" rows="5"> div#box{ width:100px; border:2px solid black; padding:10px; } </textarea>
「私のリアルな海外投資の結果をお見せします」を運営している管理者です。お越しいただきありがとうございます。 投資全般が好きな私は国内株式や海外への不動産投資や株式・定期口座など多くの投資をしています。 情報収集で多くの投資ブログを閲覧していますが、圧倒的に「投資に失敗している人」が海外投資を批判する内容の記事が多いことに驚きました。 海外投資に失敗している方の特徴はどれも中間業者の選定に間違いがあると感じています。そう海外投資には必ず資産を運用する会社があってこの運用会社の投資の腕にかかってるのです。この選定さえきちんとすれば確実に海外投資はよい結果が期待できます。投資なのでリスクは必ずありますがそのリスクを極力少なくする私の経験を交えて情報を配信したいと思います このサイトは「将来の日本は大丈夫だろうか？」「国家破たんもあるの？」「日本に資産を置いても全然増えない！」でも海外投資は怖いし
IE6向けの便利なCSSハック 2008年3月25日 IE6でのロールオーバー時の背景画像のちらつきを解消するためのハックとIE6でmin-heightやmin-widthを効かせるためのCSSハックです。 IE6でのロールオーバー時の背景画像のチラつきを解消するCSSハック html { filter: expression(document.execCommand("BackgroundImageCache", false, true)); } IE6でmin-heightやmin-widthを効かすためのCSSハック /* min-height */ .min-h { min-height:100px; height: auto !important; height: 100px; } /* min-width */ .min-w { min-width:100px; width:
clearfixの決定版を作るについてコメントしたのですが、なぜか僕のTypeKeyが認証失敗になってしまい、がんばって書いた文章がお伝えできず、消すのももったいないからこっちに書きます。 こんにちは。 僕も以前、clearfixの記述について、なぜあんなに複雑なのか疑問に思いました。CASE10の記述がfloatのclearに必要な最低限の記述とし、ピリオドやvisibility,heightは必要無いんじゃないかとさまざまなブラウザーで検証したのですが、contentで何かを記述しないとボックスが生成されずに正常にクリアできないブラウザーがありました。そして、生成したボックスを消すために、visibilityやheight:0が必要になりました。 モダンブラウザの中でも特にモダン（笑）なものに限ればCASE10だけで大丈夫のようです。ただやはりこういったものは出来るだけ多くのブラウザで
通常、floatさせている画像やボックスなどがある場合何らかの形でclearするか、その親要素にfloatを指定しないと、親要素からはみ出してしまいます。 コレはCSS2.0の仕様なんで正しい表示なんですが、どうしても親要素にfloatなどが使えず、やむなくclear:bothをbrなりdivにクラス指定して解決してたりって事があったかと思います。 IEの場合はwidth、もしくはheightを指定する事で解決できますが、コレはバグなんで他のモダンブラウザでは解決できません。 ソコでかなり便利に使えるテクニックが、clearfix。 使い方は、clearしたい親要素に下記のように記述。 div:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-hei
floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear: both"></div>）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。 例えば、clearfixの提唱者ではないかと類推されるPosition Is Ever
Browser CSS Hack/Filter supportは、IE4, Ns4から、IE8, Fx2, Op9.5, Safari3など、多くのブラウザのCSS Hack/Filterの対応をまとめたサイトです。 Browser CSS Hack/Filter support Browser CSS Hack/Filter supportは、dithered.comのCSS Filterをバージョンアップしたもので、CSS Hack/Filterの対応を検証しているのは下記のブラウザになります。 ※バージョン表記は省略。 Internet Explorer (Windows)：4.0.1～8beta Internet Explorer (Mac OS)：4.0～5.2.3 Pocket Internet Explorer (PocketPC)：4.0.1～5.2 Gecko(Firef
Internet Explorer 7 は、 8 月にも beta3 がリリースされるかも知れないんだけど、今現在、IE7 beta2 を含むモダンブラウザに有効そうだと思われる CSS ハックを自分用にまとめておく。以前に IE 7 用の CSS ハックを紹介したことがあったけど、今回の Easy CSS hacks for IE7 - Nano See, Nano Do で紹介されていたハックは、比較的シンプルかも知れない。想定ブラウザは下記のとおり。 バージョン 6 以下の IE IE7 それ以外のモダンブラウザ（Safari、Opera、Firefox） ブラウザごとのハック 全てのサンプルは body 要素を指定の対象としている。 バージョン 6 以下の IE にのみ適用 * html body サンプルページ バージョン 7 の IE にのみ適用 *+html body サンプ
「私のリアルな海外投資の結果をお見せします」を運営している管理者です。お越しいただきありがとうございます。 投資全般が好きな私は国内株式や海外への不動産投資や株式・定期口座など多くの投資をしています。 情報収集で多くの投資ブログを閲覧していますが、圧倒的に「投資に失敗している人」が海外投資を批判する内容の記事が多いことに驚きました。 海外投資に失敗している方の特徴はどれも中間業者の選定に間違いがあると感じています。そう海外投資には必ず資産を運用する会社があってこの運用会社の投資の腕にかかってるのです。この選定さえきちんとすれば確実に海外投資はよい結果が期待できます。投資なのでリスクは必ずありますがそのリスクを極力少なくする私の経験を交えて情報を配信したいと思います このサイトは「将来の日本は大丈夫だろうか？」「国家破たんもあるの？」「日本に資産を置いても全然増えない！」でも海外投資は怖いし
CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
