特殊なデザインのボックス : Studio Ponytail

特殊なデザインのボックス

2009年2月18日 19:22 | コメント (0) | トラックバック (0)

特殊なデザインのボックス

　flexible box は基本的に Photoshop などで好きなデザインの枠を作成し「中央のリピート部分・蓋・底」の3つの画像を切り出せばサイズ可変の背景を作成する事ができる。
　一般的なデザインであれば画像さえ作成すれば枠を表示させる事ができるが、以下の3つのパターンでは画像作成に加え CSS を修正する必要がある。

背景の右側に 80px 以上のイラストやグラデーションを使いたい
110px 以下のごく小さなサイズのボックスを作りたい
周辺に 20px 以上の透過部分を作りたい

　これは、標準状態の CSS で確保された、透過枠表示用の 20px・右側表示用の 80px のスペースによる制限で、目的に応じてこの値を増減させる。

背景の右側に大きなイラストを使いたい

.boxname .bmid {
margin-right: 210px;
}

.boxname .box-body {
margin-right: -210px;
}

　右側の背景を大きく表示したいボックスに対して上記の CSS を追加し、赤字の部分を表示したいサイズ以上に指定する。右側に 200px のイラストがあるデザインであれば、余裕を持たせて 210px , -210px 程度を指定すれば良い。ボックスの幅をここで指定したサイズ以下にした場合、背景の左側が表示されないので注意。

　特定のボックスではなく、全てのボックスで右側デザインの表示サイズを変更したい場合は、以下の CSS を追加する。

.box .bmid {
margin-right: 210px;
}

.box .box-body {
margin-right: -210px;
}

　ボックス全体の設定を変更したい場合は全て上と同じパターンで、.boxname ではなく「.box 指定したいプロパティ」で値を指定すればシステム全体を変更する事ができる。（標準 CSS より後に記述する）

110px 以下の小さなサイズのボックスを作りたい

.boxname .bmid {
margin-right: 20px;
}

.boxname .box-body {
margin-right: -20px;
}

　小さいボックスを作成する場合も、原理は上のパターンと同じ。ただし、今度は標準で確保されている 80px のスペースが邪魔になっているため、その数値を右側の背景デザインがぎりぎり表示できる程度に減らせば良い。

　「右側確保用のスペース + 左側の透過背景用のスペース + 10px」が表示可能な最小サイズとなり、上記 CSS の場合 50px 幅のボックスを作成する事ができる。
　もっとも、標準状態で可能な 110px サイズでも以下の大きさで、幅 50px となるとその隣の縦書き状態のボックスになるため、ギャラリーのサムネイル用途など限られた場面以外で変更を要する事はあまり無いだろう。

110px 幅のサンプル

サンプル

周辺に 20px 以上の透過部分を作りたい

　ひとつのパーツを様々な色や模様の背景上で使い回す場合、パーツの隙間部分には透過処理を施す必要がある。右中央・右蓋・右底・左中央....と枠画像を重ね合わせる際に問題になるのがこの透過部分で、何も考えずに枠画像を重ねていると透過部分から下の枠画像が見えてしまう。

　標準状態では上・下・左 20px・右 80px の領域が、重ね合わせの際に下に画像が来ない設定となっている。このサイズを最初から大きくしておけば「どんな透過画像でもドンと来い」ではあるのだが、この数値は「ボックスの最小サイズ」と「蓋・底画像に最低限必要な高さ」に関係してくるため、バランスをとって 20px としている。

透過部分が大きい枠のサンプル
飛び出たトゲの上下左右は透過処理が行われており、青く見えるのは背景の色。
さらに分かりやすくする為に、box-body に赤枠を作成している。
box-body は padding: 78px 80px 82px 82px;

サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

上と同じ枠を、標準の CSS で表示させた例
透過部分から重ね合わせた下の背景が透けスケになる。赤枠から透けた白背景までの距離を見れば、標準設定の「上20・下20・左20・右80」部分は画像が重なっていない（ゆえに透けていない）事が分かる。
box-body の padding は上のサンプルと同数値。

　このケースの場合、上下左右のスペースを調整するため設定項目が多く、説明時の見やすさ重視で CSS の改行を削除しています。実装時に好みに応じて改行を挿入してください。

周辺 90px を透過させたい場合

.boxname .b1 {margin: 90px 0 90px 90px;}

.boxname .b2,.boxname .b5 {margin: -91px 0;}
.boxname .bmid {margin-left: -90px;}
.boxname .b4 {margin: 89px 0;}
* html .boxname .b4 {margin-top: 90px;}
*:first-child+html .boxname .b4 {margin-top: 90px;}

.boxname .bmid {margin-right: 110px;}
.boxname .box-body {margin-right: -110px;}

　基準となるのは、いちばん上の「.boxname .b1」の値で、これをベースに他の数値が決まる。それぞれの関係性は上の例を見たままで、プラスマイナスや、数字部分の +1・-1 を間違えないように注意するだけ。
　下 2つは基準値+20px という訳ではなく枠のデザインによって異なる。透過対策自体は「90px・-90px」で良いのだが、この2つは同時に「枠の右側表示分」でもあるため、上の画像では 110px を確保している。

前の記事：ボックスの基本

コメントを投稿する

コメントの投稿には JavaScript が必要です。
ブラウザの JavaScript 機能を有効にしてください。
投稿ボタンを押してもエラーになりますのでご注意ください。

トラックバックURL : http://www.studio-ponytail.com/mt/mt-tb.cgi/155

Studio Ponytail