タグ

2015年9月5日のブックマーク (2件)

  • CSSの【float】についてちょっと本気出して説明してみた。 | たねっぱ!

    HTMLとかCSS ひよこちゃん向けシリーズ、【float】編です!CSSの【float】について気出して説明してみた。left right ,clearってなに!?? HTMLとかCSSとかこれから!な、ひよこちゃん向けシリーズ、【float】編です! 2016/07/15 一番最後のほうにfloat clearfixの修正版追加しました。 float(フロート)とはなんぞや? floatとは、要素(<div>とか<p>とか)を右に寄せたり、左に寄せたりするときに使います。 よくサイトで見られるサイドバーとかサイドメニューとかもfloatで配置することが多いですね。 まずは、プロパティをおさらいしておきましょう! left 【左に寄せる】 right 【右に寄せる】 none 【やっぱフロートやめる】 inherit 【継承させる】←使うことあまりない プロパティは以上です。基的にi

    CSSの【float】についてちょっと本気出して説明してみた。 | たねっぱ!
  • overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス

    フロートした子要素を内包するコンテナが高さを拡張しない問題を解決するためのテクニックはさまざまなものがあります。 その中から、overflowを使った方法とその際に生じる問題点とその解決方法を紹介します。 CSS: Clearing Floats with Overflow [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに Demo 1: overflow:auto; Demo 2: overflow:hidden; overflowを使って生じる問題点と解決方法 はじめに フロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。 デモ:1 フロートをクリアする要素を配置して解消した例 しかし、この問題を解決するために、「overflow」プロパティでもできることを知っていましたか? これは