clearは「floatの解除」ではない:てんぽ
コメント（1件） -:承認待ちコメント このコメントは管理者の承認待ちです 2013年02月20日（水）13:47:58 コメントの投稿 名前 件名 メール URL コメント コメントを編集・削除するにはパスワードの入力が必要です。 編集・削除用パスワード 非公開コメント 管理者にだけ表示を許可する トラックバック（3件） http://mb.blog7.fc2.com/tb.php/62-551cfb2b floatとclearの関係 昨日、「mixi」のコミュニティで見つけたサイト。 clearは「floatの解... 2006年03月27日（月）16:57:24 from ddy-w::blog フロート解除と上マージンは一緒に指定しない！ フロート解除を指定した要素に、上マージンを指定しても、 上マージンが利かない(;´Д`)ノ。 -------------------------
可変幅で両側にドロップシャドウ（div一重で）
てんぽ: 可変幅で両側にドロップシャドウ（div一重で） CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど background-positionを%単位で指定し、ドロップシャドウ用の画像の大きさを調整することで、 画面の両側に影をつけたリキッドデザイン（画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会のような）を実現できます。 しかも必要となるdivはひとつだけです。 このようなデザインでは divを二重にして一方のdivの左端に左側用の影画像を、もう一方のdivの右端に右側用の影画像を背景画像として指定するのが簡単です。 <div id="left"> <div id="right"> </div> </div> #left { width: 90%; margin: auto; background: url(shadow-left.gif) top
逸材
hoverするとeseだけ色が変わるんですね。:first-letterじゃ無理だし、余計なspanもない……！！ <h1><a href="http://d.hatena.ne.jp/voorey/">esereal</a></h1> これだけのマークアップでこのギミックは並じゃできない。 誰もそんなとこ見てはいないだろうけど……。
IE6で最小幅を実現する
CSSでボックスの最小幅を指定するには通常min-widthを使いますが、IE6はこれに対応していません。 そこで、IE6で擬似的にmin-widthを実現する方法としてボーダーとネガティブマージンを使うものが知られています。 Lucky bag::blog: IE で min-width を指定する方法 外側のボックスのボーダーで最小幅を確保しておいて、 その上に内側のボックスをネガティブマージンで重ねる。 これだけならHTMLとCSSは次のようにシンプルで済みます。 <div> <p>ここは可変幅だけど最小幅をもつ</p> </div> div { border-right:400px solid #fff; } p { margin-right:-400px; } 実際、Firefoxはこれだけでうまくいきます。 ところが肝心のIE6はなぜかボーダー部分まで可変になってしまいます。
メモ：Safari background-imageのバグ
Safari2.0(?)で、background-positionにより背景画像の一部が該当ボックス内に収まらないような位置になると、 その部分が該当ボックス内の反対側に表示される。あるいは該当ボックスをはみ出して背景画像が表示される。 この説明ではわかりにくいので、サンプルを用意しました。Safariを使っている人はほかのブラウザでの表示結果と比べてみてください。 Safariのbackground-imageのバグ サンプル
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
