flexible box（全 3 件）
flexible box
WEB > HTML > flexible box
2009年2月16日 22:26
一般的な blog の記事表示のように、ヘッダ・本文・フッタといった定型フォーマットがある場合、それぞれのパーツに背景を割り当てれば、不要な div などを付加する事無く角丸などのデザイン枠は実現可能だ。
ただしその場合、表示する内容にあわせて調整を要する事が多く、さらにデザインの自由度も限られてくる。（蓋や底のデザインを表示内容の高さに合わせる必要があったり、逆にデザインの高さを確保するために不自然なスペースが生じたりする）
という事で、万能は言い過ぎだが結構応用の効くボックスパーツ、名付けて flexible box（いま命名）。このサイトのカテゴリーアーカイブや、サイドメニューなどで使用している。
- 上端・中央・下端の3枚の背景画像で上下左右にサイズ可変
- CSS 側で細かいサイズ調整が可能なため、レイアウト変更・サイズ調整に強い
- % 指定や、固定 + フリー等の段組みが可能
- 入れ子が可能
- 中身をボックスの最外周まで配置できるため、デザインの自由度が高い
- 透過入りの角丸画像なども使用可能
- 蓋や底にあたる要素が不要
- IE 5.5 / 6 / 7・Firefox 2 / 3・Opera 9・Safari での表示が可能（Mac IE 5.2.3 でも一応表示可能だが、追加設定や段組みを行ったボックスは崩れる可能性あり）
- HTML / CSS とも Valid で空 div なし......ただまあ、笑っちゃうソース
ボックスの基本
WEB > HTML > flexible box
2009年2月16日 23:31
ボックスの基本：全体の余白
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 確保しておく事を勧める。
特殊なデザインのボックス
WEB > HTML > flexible box
2009年2月18日 19:22
特殊なデザインのボックス
flexible box は基本的に Photoshop などで好きなデザインの枠を作成し「中央のリピート部分・蓋・底」の3つの画像を切り出せばサイズ可変の背景を作成する事ができる。
一般的なデザインであれば画像さえ作成すれば枠を表示させる事ができるが、以下の3つのパターンでは画像作成に加え CSS を修正する必要がある。
- 背景の右側に 80px 以上のイラストやグラデーションを使いたい
- 110px 以下のごく小さなサイズのボックスを作りたい
- 周辺に 20px 以上の透過部分を作りたい
これは、標準状態の CSS で確保された、透過枠表示用の 20px・右側表示用の 80px のスペースによる制限で、目的に応じてこの値を増減させる。