ボックスの基本
2009年2月16日 23:31 | コメント (0) | トラックバック (0)
ボックスの基本：全体の余白
flexible box の各種制御は <div class="box-frame boxname"> のように、box-frame と同じ場所に指定した ボックス名で行う。ボックス内部の余白は「.boxname .box-body」の padding によって指定可能で、内容物が収納される <div class="box-body"> は背景の外周とぴったり同じサイズになるため、余白ゼロから任意のサイズまで自由に設定する事ができる。
ただし、別項で解説予定だが .box-body の padding-top を 0 にした場合、CSS の仕様上、ボックス内の最初の要素の margin-top の分だけ、親要素が下がってきてしまう。（厳密には少し違うのだが、外見上はそう見える）
最初の要素の matgin-top を 0 にしておけば問題無いのだが、そういった事はたいてい最も忙しい時に忘れて「なんで崩れてんの？」となりがちなので、「.boxname .box-body」の padding-top は最低 1px 確保しておく事を勧める。
flexible box
<div class="col">
<div class="box-frame announce1">
<div class="box"><div class="b1"><div class="b2"><div class="b3"><div class="bmid">
<div class="b4"><div class="b5"><div class="b6"><div class="box-body">
<h3 class="box-title">flexible box</h3>
<p>
文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル
文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル
文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル
</p>
</div></div></div></div></div></div></div></div></div></div><!-- /box-frame -->
</div><!-- /col -->
おとなしい角丸枠と普通の文章という構成では、一般的な角丸ボックスでも発生する周辺表示分の寄せがむしろ自然な余白となるが、このサイトのサイドメニューのように枠ぎりぎりまで中身を描きたい場合、余白をゼロにできる構造が力を発揮する。（といいつつ、このサイトのサイドメニューにはデザイン的に 4px のパディングが設定されている）
ここからは、「announce1」という名前のボックスを例に実際の使い方を紹介する。サンプルソースを囲んでいる枠自体が、表示見本となっており、サンプルは HTML に直接 CSS を埋め込んでいるが、枠内の CSS を記述すれば同様の効果を得る事ができる。
ちなみに、announce1 ボックスの枠は、サイドメニューと全く同じ画像を使用している。（サイドメニューは枠の中の a 要素に各種画像を割り当てることでメニューっぽく表示させている）
.box-body を赤色のボーダーで囲んだ例
ボックス内部の、直接文章などが入っている box-body が外周と同じ大きさである事がわかる。
.announce1 .box-body {
border: solid 1px #f00;
}
.box-body の余白を 0 にした例
.announce1 .box-body {
padding: 0;
}
ボックスの基本：タイトルの設定
flexible box のタイトル設定は「.boxname .box-title」で行う。背景色やカラーリングでアクセントをつければ、シンプルな枠の画像を様々な場面で使い回す事もできる。
ここで IE で表示ズレを起こさない為の注意点。ボックス上端からタイトルまでの距離は「.boxname .boxbody」の padding-top と「.boxname .box-title」の margin-top の合計値で決まる。（タイトルに背景や枠をつけない場合は「.boxname .box-title」の padding-top も使用可能だが、話がややこしくなるのでとりあえず置いておく）
しかし、IE には垂直 padding と margin が相殺されるバグがあるため、2つの合計値で距離を設定すると、Safari・Firefox・Opera などと、IE での表示にズレが発生してしまう。
タイトル上部のスペースは、「.boxname .boxbody」の padding-top か「.boxname .box-title」の margin-top いずれか一方だけで設定しておくと、このズレを回避する事ができる。
.box-title に各種設定を行った例
.announce1 .box-title {
margin: 7px 0 0;
padding: 5px 0;
background: #ecc;
text-align: center;
color: #c22;
}
上と同じで色だけ変更
.announce1 .box-title {
margin: 7px 0 0;
padding: 5px 0;
background: #cce;
text-align: center;
color: #44c;
}
flexible box ならではというテクニックではないが、ポストイット風のタイトルにする事もできる。h 要素をインライン化しても同じような表現が可能だが、IE 5.5 / 6 のバグ挙動の対応に各種追加設定が必要となるため、position: absolute; で配置してしまった方が早い。
ポストイット風タイトル
.announce1 .box-title {
position: absolute;
top: 2px;
left: -13px;
padding: 5px 20px;
background: #f4c2bd;
border: solid 1px #d4928d;
color: #d66;
}
.announce1 .box-body {
padding-top: 3em;
}
ボックス位置の調整
ページのデザインやレイアウトとのバランス的に、もう少し隙間が欲しい・あと少し詰めたい、といった状況はよくあるが、その場合「.boxname .box」の margin でボックスの位置を調整する事ができる。
左右に100px のマージンをとった例
.announce1 .box {
margin: 0 100px;
}
ネガティブマージンの指定も可能で、ページ全体に設定された余白を無視して全体枠にぴったりくっつけたり、親要素に overflow: hidden; が効いていなければはみ出した状態で配置する事もできる。
※このサイトはデザインの都合上、IE 5.5 / 6 ではメイン側に overflow: hidden を指定しています。このページは例示用に一時的に overflow: visible としているため、それらのブラウザでレイアウト崩れが発生する可能性があります。
左にネガティブマージンをとってぴったりくっつけた例
.announce1 .box {
margin: 0 0 0 -13px;
}
-13 などの数字は、ページ全体に設定された padding サイズによって変わります。
さらにネガティブマージンをとってはみ出させた例
.announce1 .box {
margin: 0 0 0 -50px;
}
コメント(0)
トラックバック(0)
トラックバックURL : http://www.studio-ponytail.com/mt/mt-tb.cgi/154
コメントを投稿する
コメントの投稿には JavaScript が必要です。
ブラウザの JavaScript 機能を有効にしてください。
投稿ボタンを押してもエラーになりますのでご注意ください。