タグ

clearfixに関するkuroaka1871のブックマーク (3)

  • IE8でのclearfixの挙動|BLACKFLAG

    コーディングする上で今では当たり前となっているfloatを使って回り込みをした際の解除指定の「clearfix」。 この記述方法についてはいくつかパターンがありますが、うちでは —————————————– .clearfix:after { content: “.”; height: 0; clear: both; display: block; visibility: hidden; } .clearfix { display: inline-block; } —————————————– の記述を基としています。 ですが、この記述方法では「IE8」では、ページ上にJSを使って高さが可変する動きをつけるとブロック要素ごとに重なりあったりする不具合が生じることがちらほら。 そんな際にはIE8のみ“display”要素を“inline-block”から“block”に変えることで解決でき

    IE8でのclearfixの挙動|BLACKFLAG
  • cssとは?使い方と学び方の基礎まとめ - プログラミング学習の窓口

    プログラミングの基礎であるhtmlを勉強していると、必ず出てくる言葉がcss。 現代のwebサービスにおいて、htmlcssはいわば兄弟のようなもので切っても切れない関係と言えるでしょう。 では、cssとはいったいどういうものなのでしょうか。 簡単に言うと、Webページの文字の色や大きさ、背景、配置といった見た目を設定する言語の一種です。 静的ページも動的ページも見た目の部分の多くはこのcssで制御されています。 もしcssを詳しく学ぶなら、独学もいいですがプログラミングスクールがおすすめです。費用は当然かかりますが、アドバイスがもらえることと、学習スケジュールが管理されるので、強制的に頑張れる仕組みが作れるのもメリットと言えるでしょう。 The post cssとは?使い方と学び方の基礎まとめ first appeared on プログラミング学習の窓口.

  • CSSでfloatを解除する方法のまとめ

    CSSのfloatを解除(クリア)する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題(というか仕様)と、その対処方法についてネットで調べた情報を一通りまとめました。 1.floatにより親要素の高さが出なくなる(=背景がなくなる)問題 親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。 例えば、次のCSSHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi

    CSSでfloatを解除する方法のまとめ
  • 1