hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
floatプロパティのテスト - 3ping.org
Comments:7 MaKOTO 2007年11月15日 01:27 こういう授業を受けている生徒さん達が羨ましいです。 web制作の道へ進む生徒さんは知らず知らずの内に近道を進んでいることに気づいていると思いますが、 ネスケ4の崩壊っぷりを見せて「お前たちは幸せもんだぁ」と武田鉄矢口調で言い放って欲しいです。 ※役所関連の仕事ではネスケ4.xが対象ブラウザに入る可能性がなきにしもあらずですが・・・。 wu 2007年11月15日 12:59 MaKOTOさん、お久しぶりです! 生徒たちは「ふーん」という顔で淡々と勉強しています。(笑 テーブルデザインを知らない人は、逆にすごい素直にHTMLとCSSを覚えられるようです。 「おじさんが勉強した頃は大変だったんだぞ」みたいな時代になるのでしょうか‥ ｶﾞｺﾌﾞﾙ。 sf 2007年11月21日 03:10 答えは？ wu 2007
CSS Flamework -CSSによる段組レイアウト-
CSS による段組レイアウト 文書構造を極力いじらずにレイアウトを変更できるようなフレームワーク。 以下の各サンプルでは分かりやすいように head 要素内の style 要素でスタイルを指定、先頭で defaultReset.css と common.css をインポート。 実際に使用する際には、style 要素ではなく link 要素で core.css などにリンクして、そこに defaultReset.css などとともに layout.css としてインポート。 この文書の詳細については、「CSSによる段組レイアウトのフレームワーク」を参照してください。 2 カラム 文書構造は以下の通り。メイン、サブの順番。 div.container -div#head -div.content --div#mainContent ---div.section --div#subContent
clearは「floatの解除」ではない:てんぽ
「CSSのclearプロパティは『floatの解除』である」と説明されることがあります。 これはほとんどの場合において正しいのですが、正確には、clearは上マージンの自動調整です。 （追記：CSS2.1では、上マージンの自動調整ではなく、上マージンが不足する場合に不足分を埋める「クリアランス」を設ける、という説明になります。） 仕様書（邦訳）にはclearについて、つぎのように書かれています。 非浮動ブロックボックスに適用される場合は，値は次の意味をもつ。 left 生成されるボックスの上マージンを増加し，上境界辺が，ソース文書のそれより以前の要素から生じたあらゆる左浮動ボックスの下外辺よりも下になるようにする。 clearは「floatの解除」ではない ふたつのimg要素が、左フロート、右フロートの順で存在し、ふたつ目のimgでclear:leftした場合。 <p> <img src=
floatは「回り込み」ではない:てんぽ
「CSSのfloatプロパティは『回り込み』させるものである」とよく説明されますが、それは特定条件下での表示結果がそのように見えるだけであって、あまり正確ではありません。 「回り込み」という表現はfloatを使いこなすうえで、語弊になっていると思います。 floatとは、通常の流れ（normal flow）から取り除き、左（または右）に寄せるです。 floatは「回り込み」ではない <p> <img src="xxx.jpg" alt="floating image"> 「回り込む」テキスト </p> このときimg要素を左にフロートさせた（float:left）なら、後続するテキストはimgの右側に「回り込み」ます。 これは確かに回り込みと呼べます。 では、ブロックレベル要素をフロートさせた場合はどうでしょうか。 <div style="width:100px; float:left;"
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
