タグ

CSSとfloatに関するsikusikuのブックマーク (2)

  • CSS やってはいけないこと floatとは

    ブログテンプレートを例にとると、 記事表示部分-サイドカラム…のように、divなどの箱が横方向(左右)に分割されて表示されている部分があります。 floatとは、左右どっちに寄せるか?という「回り込み」を指定するプロパティで、 float: left; float: right; float: none;(回り込みをさせない) のように、left(左)に回り込ませる・right(右)に回り込ませる、といったようにCSS部に記述して使います。 floatに関する説明は、なんだかややこしく感じるのですが、 floatで左か右か、方向を指定しているdivやimgなどの要素は、その指定した方向に寄せられる、といったような感じです。(その後に続く要素は、指定した方向とは反対の方向に表示されます。) floatを指定する要素にやってはいけないこと ブログテンプレートなどには、必ずと言っていいですがfl

  • hail2u.net - Weblog - floatで並べたリストのセンタリング

    ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる

  • 1