HOME > 開発者向けBLOG > Webデザイン >  左右のカラム間に縦の境界線

Technology Note 開発者向けBLOG

Webデザイン

左右のカラム間に縦の境界線

こんにちは、ゼノフィ渡部です。

左と右どちらのカラムが伸びても、カラム間にある線も同時に伸びる方法をご紹介いたします。

テーブル要素やjavascriptなど、方法はいくつかありますが、ここでは背景画像で実現させてみます。

カラムは3つ使用しています。

  • 大枠(背景画像を使用するカラム)
  • 左カラム
  • 右カラム

「div.border」は左右カラムの親にあたるdivに指定します。「div.border」は横幅を設定し、「background: url(border.gif) repeat-y center; 」で、幅と高さ、それぞれ1pxにした画像を「repeat-y」で縦方向にリピートさせ、「center」で左右のカラムの中央(350pxの中央)に表示させています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

div.border {
  width: 350px; /* 幅を設定 */
  margin: 0 0 50px;
  background: url(border.gif) repeat-y center; /* ボーダーの背景画像を左右カラムの中央に表示 */
}
 
/* 左右カラムの共通プロパティ */
div.border div.l_col,
div.border div.r_col {
  float: left;
  width: 130px; /* 左右カラムの幅 */
  padding: 10px; /* 左右カラムのパディング */
  background: #EFEFEF;
}
 
div.border div.l_col {
  float: left;
}
 
div.border div.r_col {
  float: right;
}

左カラムが伸びた場合と、右カラムが伸びた場合の2つのソースを記述しています。それぞれ3つのカラムで構成されていることがわかります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!-- 左が伸びているカラム -->
<div class="border clearfix">
    <div class="l_col">
        左カラム左カラム左カラム左カラム左カラム左カラム左カラム左カラム左カラム左カラム左カラム左カラム
    </div>
    <div class="r_col">
        右カラム
    </div>
</div>
 
<!-- 右が伸びているカラム -->
<div class="border clearfix">
    <div class="l_col">
        左カラム
    </div>
    <div class="r_col">
        右カラム右カラム右カラム右カラム右カラム右カラム右カラム右カラム右カラム右カラム右カラム右カラム
    </div>
</div>

今回ご紹介した方法は子要素が伸びることによって、親要素が自動で伸びていく特性を利用して実現させています。

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

div.border {
  width: 350px; /* 幅を設定 */
  margin: 0 0 50px;
  background: url(border.gif) repeat-y center; /* ボーダーの背景画像を左右カラムの中央に表示 */
}
 
/* 左右カラムの共通プロパティ */
div.border div.l_col,
div.border div.r_col {
  float: left;
  width: 130px; /* 左右カラムの幅 */
  padding: 10px; /* 左右カラムのパディング */
  background: #EFEFEF;
}
 
div.border div.l_col {
  float: left;
}
 
div.border div.r_col {
  float: right;
}
 
/* クリアフィックス */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
 
.clearfix {
  overflow: hidden;
  zoom: 1;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!-- 左が伸びているカラム -->
<div class="border clearfix">
    <div class="l_col">
        左カラム左カラム左カラム左カラム左カラム左カラム左カラム左カラム左カラム左カラム左カラム左カラム
    </div>
    <div class="r_col">
        右カラム
    </div>
</div>
 
<!-- 右が伸びているカラム -->
<div class="border clearfix">
    <div class="l_col">
        左カラム
    </div>
    <div class="r_col">
        右カラム右カラム右カラム右カラム右カラム右カラム右カラム右カラム右カラム右カラム右カラム右カラム
    </div>
</div>

<

>

PAGETOP