CSS - Clearing floats
A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way. The problem Let's try it. This is the CSS we'll use throughout the page: div.container { border: 1px s
Lucky bag::blog: float の問題を overflow で解決
float させた要素を内包したボックスは、高さを指定しないと下方に伸びません。これを、clear を使わずに overflow で解決しちゃう方法。 CSS - Clearing floats 簡単に説明してみます。container 内に left と right があり、それぞれを左右に float させています。で、実はcontainer に背景色 #ddffbb を指定しているのですが、反映されてません。 floatサンプル01 container 自体の高さを指定していないので、下方に伸びないからです。これを解決するためには、(X)HTML に手を加えて clear させるしか方法はありませんでした。 floatサンプル02 しかし、container に幅と overflow を指定すれば解決します。 #container { background-color: #ddffb
CSSでfloatを解除する方法のまとめ
CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高さが出なくなる（＝背景がなくなる）問題 親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。 例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi
WEB屋の“メンドクサイ”は多事多難！今年遭遇したメンドクサイの数々、そして対処法色々！ | バンクーバーのうぇぶ屋
なるべく口にしないようにしていますが、正直言って僕はかなりの頻度で”メンドクサイ”と思うことが多いです。何か面倒な作業が目の前に立ち塞がったら、とにかく”メンドクサイ”と思うように心がけています。 というのも、僕にとって”メンドクサイ”という言葉は口にしたらアウトですが、思う分には誰にも咎められることはありません。おまけに、その瞬間僕が“メンドクサイ”と感じたことは、解消できれば僕の作業効率は絶対に上がることを意味しているから、別に誰になんと言われても僕にとっての“メンドクサイ”は良い言葉です。 大事なのは”メンドクサイ”で終わらせないこと。”メンドクサイから解消しなきゃ！”で口癖（思い癖？）にできれば一番でしょうか？ というわけで、今日は僕自身が「あー、もうほにゃにゃらら（メンドクサっ）！！」と思った時に、そのメンドクサイを解消してきたサービスやツールなど、遭遇したシチュエーションにも分
float解除の決定版。clearfixを考えたら、進化した。
現在この中でclearfixでよく使用されているプロパティは display:inline-block; height:1%(min-height:1%) zoom:1; でも良く考えたら、全て微妙です。 zoom:1はIEの独自仕様ですし、heightを使用する場合は、IE6,7に対応させるために2つのプロパティが必要です。 display:inline-blockもボックスの要素を変形させることになります。 hasLayoutのスイッチを見た時に、一番理に適ったプロパティはwidthかなと思いました。 子要素を囲む要素として、divやulなどデフォルトCSSがdisplay:blockのプロパティのものが多く、display:blockのプロパティの場合、width:100%で問題ないと思ったからです。 現在のブラウザ状況に適したclearfix 上記を踏まえ見直したclearfixが
複雑なブロックレイアウトもシンプルかつ簡単に実装可能な「malo」:phpspot開発日誌
malo - Google Code 複雑なブロックレイアウトもシンプルかつ簡単に実装可能な「malo」。 次のようなHTMLを書いておくと簡単に複雑なレイアウトが作成可能。 <div class="main"> <!-- width = 100% のカラム--> <div class="dp100" style="background-color:#777;height:100px;">100% (1/1)</div> <!-- width = 50% のカラムx2 --> <div class="dp50" style="background-color:#444; height:100px;">50% (1/2)</div> <div class="dp50" style="background-color:#555; height:100px;">50% (1/2)</div> <
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
%26utm_content%3DGoogle%2520Reader)
css-lecture.com
CSSハックしない、JavaScript使わないCSSの教科書みたいなテンプレ*ホームページを作る人のネタ帳