スタイルシートをめぐる冒険: 要素を左右に隙間なく配置することができない
スタイルシートによるレイアウトで、「ボックス」を最重要 "概念" とするなら、floatは最重要 "テクニック" と言えるだろう。floatとは、後に続く要素を左右どちらかに回り込ませるためのものだが、この性質を利用して要素を横にピッタリ隙間なく並べようとするとなかなかうまくいかない。 [該当するブラウザ] Windows／IE5.5、6.0 この現象を検証するために、左右それぞれの半円画像を背景とするボックスを設定し、floatを使って横に配置した。意図するところは、左右ピッタリくっつけて完全な円にしたいということなのだが、Windows版のIEでは間に3ピクセルほどの隙間ができてしまう。（→サンプルページ1） 【スタイルシート】 #half-left-circle { width: 40px; height: 80px; background-image: url(circle_l.g
phiary
今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
