Web ページのデザインで、ある要素がコンテンツエリアを突き破ってはみ出ている場合、それを簡単に再現するための CSS のソースコード例です。親要素の Width が指定されていて、そこからはみ出る要素がある想定で行います。 動作確認用の demo 親要素から子要素をはみ出させたい場合、子要素の margin にマイナスを指定することで子要素の横幅を広げることができます。以下にそのサンプルコードを示します。このサンプルコードの例では親要素の横幅が 200px、その子要素の横幅は300px となります。 <div style="width:200px;"> <div style="margin-right:-100px;">子要素</div> </div> 確認しやすいように border, background などを指定してレンダリングすると以下のような結果となります。 <div sty
暇だからCSSのセットアップでも載せとく。 CSSレイアウトで問題になるのは、ブラウザごとにバグがあって、それに対応するのにどうするかっていうのが一番困る。でも、ブラウザごとにっていっても、実際に問題があるのは、ネスケ4とかIE4とかMacIEとの本当に古いブラウザと、バグの多いけどまだちょっと使っている人がいるIE5、IE5.5、まだまだこれからも高いシェアを続けていくIE6と、かなりましになったけどまだちょっと問題のあるIE7を、なんとかすればいい。逆に言えば、これら以外のブラウザには、フツーに何の仕掛けもなしに、きちんと表示される必要がある。FirefoxとかOperaは、かなりきちんと表示してくれるから。 要するに問題なのはIEばっかりなんだけれど、FirefoxやOperaできちんと表示されていれば、IEでボロボロになってても、大して心配はない。一定の流れでバグ回避をしていけば
operaでのfloatの挙動 TPLHさんでOperaでfloat要素の後続が回り込まないとのエントリーを見て、気になったことをボクもエントリーしておこう。 TPLHさんのエントリーでは以下の記述で、OperaだとBOX3が回り込まないというもの。 <div class="sample-code"> <div style="width:240px; list-style:none; margin:0; padding:0;"> <p style="border:1px #333 solid; margin:0 0 10px; padding:10px; background:#ccccff; ">BOX1</p> <p style="width:93px; height:130px; border:1px #333 solid; margin:0 10px 0 0; padding:10
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
