擬似フレーム・段組など、画面を横方向に分割する場合のスタイルについてです。
画面を横方向に分割するには、widthプロパティで横幅を区切って、それをfloatプロパティやポジショニング(positionプロパティとleftプロパティなどを組み合わせる)で実現する事になります。
ところで、標準規格に依れば、widthプロパティ及びheightプロパティは内容本体の大きさであって、パディングやボーダは含まれない事となっております。
このため、例えばきっちり左側の幅30％、右側の幅70％とした場合、ボーダやパディングが入ると確実に崩れの原因となります。
残念ながらCSSでの大きさの値には加減乗除した値を与える事は出来ません。
人気女優をモデルにした制作者の創作キャラクタを用いたイラストの一例とそれを組み込んだアニメーション動画width: 30%-1px-2em;なんて数式がサポートされたら便利なのですが、生憎そのような仕様はありません。このため、いろいろ工夫する必要があります。
このような問題を手っ取り早く解決する方法としては、横に並べるブロックを二重の<div>要素タグで囲んでしまうと言うものです。
この場合、外の<div>要素セレクタに対してwidthプロパティを与え、内部の<div>要素セレクタに対してボーダやパディングのプロパティを与えます。
こうする事で、例えばきっちり左側の幅30％、右側の幅70％としても、パディングやボーダも安心して利用出来るようになります。
しかしながら、二重<div>要素は確かに簡単且つ確実ですが、余りにも安易な方法です。
何より、HTMLを表示デザインに合わせて書き直すと言う苦行を強いられます。
出来る事なら、CSSだけで解決するようにしたいものです。
例えば、左側をきっちり幅30％として、幅 1ピクセルの枠線を右に引くとします。
この場合、以下のようにすれば、幅から 1ピクセルが差し引かれます。
左側のセレクタ{float: left;width: 30%;margin: 0 -1px 0 0;padding: 0;border-right: 1px solid #f00;}
要素包含ブロックの横幅(及び高さ)は、widthプロパティ(高さの場合はheightプロパティ)の他、対応するpaddingプロパティ, border-widthプロパティ及びmarginプロパティから算出されます。
この算出方法は単純に幅の値を加算するものですが、marginプロパティは負値が許されているプロパティなので、当然負値を入れる事で減算も出来ます。
ところで、パディングについても同様にする事が出来る筈です。
例えば、以下のようにです。
左側のセレクタ{float: left;width: 30%;margin: 0 -1em;padding: 0 1em;}
ところが、オペラ 7.x〜8.xでは、パディングの実装に問題があるため、右側に隙間が出来てしまいます(オペラ 9.0で改善されました)。
また、ボーダと併用する場合にも問題が生じます。
結局、この対策としては、ボックス内の要素についてはパディング幅に相当するマージンを与えるしかないでしょう。
また、この他にも実装の問題ですが、以下のような問題があります。
対策としては、以下のような感じになるでしょう。
インターネットエクスプローラの場合、標準モードでない限り横幅にパディングとボーダが加算されますので、それを配慮して幅を計算します。
具体的には、予めインターネットエクスプローラ向けのプロパティ値を記述し、その後でインターネットエクスプローラでは無視される記述を用いて上書きするなどします。
このように工夫する事で、ユーザエージェントの実装に依るピクセル単位の隙間が見えなくなるでしょう。
