flexible box
2009年2月16日 22:26 | コメント (0) | トラックバック (0)
一般的な 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 なし......ただまあ、笑っちゃうソース
HTML ソース
<div class="col">
<div class="box-frame boxname を指定">
<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 -->
</div></div></div></div></div></div></div></div></div></div><!-- /box-frame --> と </div> が 10 コも並ぶ様はギャグでしかなく「そらこんだけあれば何でもできるだろうよ」といった感じだが、機能を保ったままこれ以下に減らすのはオレには無理だった。（IE 5.5 / 6 を切ってしまえば 2つくらいは減らせそうだが、たかだか 2つの div を減らすのにデメリットが大きすぎる）
ボックスのサンプル
flexible box サンプル
デザイン自由度の高さを説明するためのサンプルなのでデザインは煩めに、文章の読みやすさを多少無視して枠のごく近くまで文字を配置している。
このボックスで使用している画像
このボックスは以下の3枚の画像で構成されている。画像の幅や高さを細かく意識する必要はなく、幅は作成したいサイズ以上が、蓋と底の高さは 20px 以上あれば良い。（CSS に追加設定を行った場合、蓋・底に必要な最低高は増減する）
通常の枠つきパーツの場合
前述した通り、蓋や底にあたるパーツを用意して枠を作成する場合、蓋や底は該当部分の高さが限界となるため、必然的にデザインの自由度が狭まってしまう。
そういった場合、蓋・中央・底という構造ではなく、デザインにあわせて本文に蓋や底を担当させるテクニックがある。（その場合、本文が担当した側のパーツは無くなり、一番外側の要素が中央のリピート部分を担当する）
しかし、高さの必要なデザインが蓋側か底側かによって構造を変更する必要があり、なにより、この例のような蓋・底どちらも高さが必要なデザインには対応できないという弱点がある。
flexible box の場合
flexible box は Photoshop のレイヤーで言うと、右側表示用のレイヤーが「（下から）右中・右上・右下」の順で並び、その上に「左中・左上・左下」の左側表示用のレイヤーが、そしていちばん上に本文を格納した <div class="box-body"> レイヤーが乗せられた形となっている。
この構造により、全体の高ささえ確保できれば上画像・下画像ともに全高が表示されるため、蓋や底のデザイン高や、画像のスライスサイズをあまり気にする必要が無い。（全体の高さが足りない場合は下側が、幅が足りない場合は右側が優先される）
ミもフタもない事を言ってしまえば flexible box は楽をする為のパーツだ。最初に書いたように、パーツを構成する要素をうまく使い、画像サイズもきちんと調整すればこれほど大量の div を使用しなくても、同じようなデザインが実現できる場面は多いだろう。
flexible box の利点は、ひとまとめにしたい内容をとりあえずボックスに入れておけば、3枚の背景画像と CSS で外観のほとんどを好きなように制御できるところにある。
また、製作中はもちろん後からの変更となると、パーツの調整を行うには CSS のどの部分を修正すれば良いかといった読み解きが必要になるが、その場合の見通しが非常に効きやすい。
なお、上下は高さが 10,000px になろうとも対応可能だが、左右は用意した画像の横幅が限界値となる。内容次第でいくらでも長くなる上下と違い、モニタ幅程度に対応すれば良い左右の場合、あらかじめ余裕をもたせた画像を用意すれば div と背景画像が2つづつ節約できるため。
h3 に box-title という class をつけているのは、内部でつかう他の h 要素との区別用。一般的な体裁でいくと、内部の h はタイトルにあたるものよりも下位になる事が多く、たいていの場合 class が無くても区別可能だが、肝心のタイトルそのものが使う場所によって h2 だったり h3 , h4 だったりするので、class をつけて制御した方が何かとラクなのだ。（CSS だけを見た時に、どの部分を調整しているのか分かりやすいという利点もある）
基本 CSS はそのままコピー＆ペースト、背景指定 CSS は HTML 側で指定したボックス名と、背景画像の部分を書き換えれば良い。実際の使い方などは次のページから。
基本 CSS
背景指定 CSS
コメント(0)
トラックバック(0)
トラックバックURL : http://www.studio-ponytail.com/mt/mt-tb.cgi/153
コメントを投稿する
コメントの投稿には JavaScript が必要です。
ブラウザの JavaScript 機能を有効にしてください。
投稿ボタンを押してもエラーになりますのでご注意ください。