div要素を画像枠で囲む

任意のサイズのdiv要素を画像枠で囲みたい。具体的には、

ということでいくつか方法を検討してみました。

方法1 - 3分割した画像+div

3つに分割した枠画像とdiv要素を使う方法。

○HTML/CSSがシンプル。
×横幅が固定される。横幅のパターンがいくつかある場合、幅ごとに別の画像を用意する必要がある。

画像

枠画像を上、真ん中、下の3つに分割した画像を用意する。真ん中の画像は縦方向にリピートして使うので高さ1pxでOK。

HTML

背景を配置するためのdiv要素を追加する。枠で囲む対象のdiv要素はpanel_center内に配置。

<div class="panel_100">
  <div class="panel_top"></div>
  <div class="panel_middle">
    <div class="body" style="margin-left:10px;" >
    <!-- 枠で囲むdiv要素 -->
    </div>
  </div>
  <div class="panel_bottom"></div>
</div>

CSS

各div要素に背景画像を設定。

各divの横幅を固定。
div.panel_centerの画像は縦方向にリピートさせる。(background-repeat: repeat-y;)
div.panel_top,div.panel_bottomは潰れないように高さを明示する。

/** 3分割 ----------------------------------------------------------*/
div.panel_middle {
  background-repeat: repeat-y;
}
div.panel_top, div.panel_bottom {
  height: 10px;
  background-repeat: no-repeat;
}

/* 100 */
div.panel_100 div.panel_top, div.panel_100 div.panel_bottom, div.panel_100 div.panel_middle {
  width: 120px;
}
div.panel_100 div.panel_top {
  background-image: url("./img/panel_100_top.gif");
}
div.panel_100 div.panel_middle {
  background-image: url("./img/panel_100_middle.gif");
}
div.panel_100 div.panel_bottom {
  background-image: url("./img/panel_100_bottom.gif");
}

方法2 - 9分割した画像+table

9つに分割した枠画像とtable要素を使う方法。

○横幅縦幅を固定しなくてもOK。動的なサイズ変更に対応できる。
○画像も1セット用意すれば済む。「3分割+div」のように横幅ごとに画像を用意しなくてよい。
×原理主義者がうるさい。

画像

枠画像を以下のように分割した画像を用意する。

四隅(上左[1]、上右[3]、下左[6]、下右[8])はサイズ10x10で取り出す。
上辺と下辺(上真ん中[2]、下真ん中[7])は「高さ:10 幅:1」で横方向にリピートして使う。
左辺と右辺(真ん中左[4]、真ん中右[5])は「高さ:1 幅:10」で縦方向にリピートして使う。

HTML

枠で囲む対象のdiv要素をtableで囲む。

<table class="panel"  cellpadding="0" cellspacing="0"  >
  <tr class="panel_top">
    <td class="panel_left"></td>
    <td class="panel_center"></td>
    <td class="panel_right"></td>
  </tr>
  <tr class="panel_middle">
    <td class="panel_left"></td>
    <td class="panel_center">
      <div class="body" >
        <!-- 枠で囲むdiv要素 -->
      </div>
    </td>
    <td class="panel_right"></td>
  </tr>
  <tr class="panel_bottom">
    <td class="panel_left"></td>
    <td class="panel_center"></td>
    <td class="panel_right"></td>
  </tr>
</table>

CSS

各td要素に背景画像を設定。

/* 9分割(table) --------------------------------------------------------------*/
tr.panel_top  td.panel_left, tr.panel_top  td.panel_right, tr.panel_bottom  td.panel_left, tr.panel_bottom  td.panel_right {
  width: 10px;
  height:10px;
  background-repeat: no-repeat;
}
tr.panel_top  td.panel_left {
  background-image: url("./img/panel_t_l.gif");
}
tr.panel_top  td.panel_right {
  background-image: url("./img/panel_t_r.gif");
}
tr.panel_bottom  td.panel_left {
  background-image: url("./img/panel_b_l.gif");
}
tr.panel_bottom  td.panel_right {
  background-image: url("./img/panel_b_r.gif");
}

tr.panel_top td.panel_center, tr.panel_bottom td.panel_center  {
  height:10px;
  background-repeat: repeat-x;
}
tr.panel_top  td.panel_center {
  background-image: url("./img/panel_t_m.gif");
}
tr.panel_bottom  td.panel_center {
  background-image: url("./img/panel_b_m.gif");
}
tr.panel_middle td.panel_right, tr.panel_middle td.panel_left  {
  width:10px;
  background-repeat: repeat-y;
}
tr.panel_middle  td.panel_left {
  background-image: url("./img/panel_m_l.gif");
}
tr.panel_middle  td.panel_right {
  background-image: url("./img/panel_m_r.gif");
}

方法3 - 9分割した画像+div

9分割+tableと同じことをdiv+floatで行う方法。

○画像は9分割+tableと同じものを1セット用意すれば済む。「3分割+div」のように横幅ごとに画像を用意しなくてよい。
×高さと横幅を固定しないと背景を描くためのdiv要素が潰れてしまってうまくいかない。横はまあいいとして高さ固定は痛い。

画像

9分割+tableと同じ

HTML

枠で囲む対象のdiv要素をtableの代わりにdivで囲む。

<div class="panel2"  style="width:120px;">
   <div class="panel2_top">
     <div class="panel2_left"></div>
     <div class="panel2_center" style="width:100px;"></div>
     <div class="panel2_right"></div>
     <div style="clear:both;"></div>
   </div>
   <div class="panel2_middle">
     <div class="panel2_left"  style="height:100px;"></div>
     <div class="panel2_center" style="width:100px;">
       <div class="body" >
         <!-- 枠で囲むdiv要素 -->
       </div>
     </div>
     <div class="panel2_right" style="height:100px;"></div>
     <div style="clear:both;"></div>
   </div>
   <div class="panel2_bottom">
     <div class="panel2_left"></div>
     <div class="panel2_center"  style="width:100px;"></div>
     <div class="panel2_right"></div>
     <div style="clear:both;"></div>
   </div>
 </div>

CSS

各div要素に背景画像を設定。floatを使ってテーブルのようにレイアウトする。

/* 9分割(div) --------------------------------------------------------------*/

div.panel2_top  div.panel2_left, div.panel2_top  div.panel2_right, div.panel2_bottom  div.panel2_left, div.panel2_bottom  div.panel2_right {
  width: 10px;
  height:10px;
  background-repeat: no-repeat;
}
div.panel2_top  div.panel2_left {
  background-image: url("./img/panel_t_l.gif");
}
div.panel2_top  div.panel2_right {
  background-image: url("./img/panel_t_r.gif");
}
div.panel2_bottom  div.panel2_left {
  background-image: url("./img/panel_b_l.gif");
}
div.panel2_bottom  div.panel2_right {
  background-image: url("./img/panel_b_r.gif");
}

div.panel2_top div.panel2_center, div.panel2_bottom div.panel2_center  {
  height:10px;
  background-repeat: repeat-x;
}
div.panel2_top  div.panel2_center {
  background-image: url("./img/panel_t_m.gif");
}
div.panel2_bottom  div.panel2_center {
  background-image: url("./img/panel_b_m.gif");
}

div.panel2_middle div.panel2_right, div.panel2_middle div.panel2_left  {
  width:10px;
  background-repeat: repeat-y;
}
div.panel2_middle  div.panel2_left {
  background-image: url("./img/panel_m_l.gif");
}
div.panel2_middle  div.panel2_right {
  background-image: url("./img/panel_m_r.gif");
}

div.panel2_left {
  float: left;
}
div.panel2_center {
  float: left;
}
div.panel2_right {
  float: right;
}