枠線を画像に！border-imageではなくbackgroundで表示させる方法【CSS】

SPONSORED LINK

つい先日、下記の様なデザインデータを渡され、コーディングに励んでおりました。

当然、パーツごとにデザインデータを切り分ける必要があります。

が….

どう考えても周りの線が「border」で何とかなるレベルではない。

なので力技で解決を試みました。

枠を丸ごと画像化（pngデータ化）し、「background」を用いて背景画像として指定。

/*CSS*/
background: url(image/frameborder.png) no-repeat;

1 2	/CSS/ background: url(image/frameborder.png) no-repeat;

その上に中身を配置する。という方法です。

<!-- HTML -->
<div class="contents">
    <!-- 中身 -->
</div>

/*CSS*/
.contents{
  background: url(image/frameborder.png) no-repeat;
}

</div>

/*CSS*/

.contents{

background: url(image/frameborder.png) no-repeat;

}

一見（いっけん）何の問題もなく反映された様に見えました….

が！！！

要素が追加された途端、中身が枠からはみ出る…という事態に。

ぼく

せ、先輩…

先輩

…何

ぼく

中身が飛び出るんです。

先輩

せやろな。高さが固定されてるからな。

ぼく

どうすれば…

先輩

画像の一部を切って、backgroundでリピート。線幅はpaddingで調整。ただし、子要素を作り、中を白地で塗りつぶす必要がある。OK？

ぼく

は、はい。

作成する流れは以下の通り。

①：まず、画像の一部を切り離します。

ただし、1枚ものの画像と違い、同じ画像を繰り返し並べて線にする為、切り離す位置はどこでもいい…という訳ではありません。

適当な位置で切り離すとガタガタの線になる為、ご注意を。（下図を参照）

②：続いて、切り取った画像を「background」を用いて設置します。尚、画像を繰り返し並べて表示させる為、「no-repeat」は設定してはいけません。

/*CSS*/
background: url(image/parts.png);

1 2	/CSS/ background: url(image/parts.png);

すると、切り取った画像が縦横方向に中身の大きさ分繰り返し表示されます。

これで枠は完成。ただし、中を白地で塗りつぶしていないから・・・

切り取った画像で中身が埋め尽くされます。

↓今はこの状態。

<!-- HTML -->
<div class="contents">
    <!-- 中身 -->
</div>

/*CSS*/
.contents{
  background: url(image/parts.png);
}

</div>

/*CSS*/

.contents{

background: url(image/parts.png);

}

その為、親要素「div（contents）」の直下に子要素「div（inner）」を作り、そこに白地を設定します。

<!-- HTML -->
<div class="contents">
  <div class="inner"><!-- ←子要素を追加 -->
    <!-- 中身 -->
  </div>
</div>

/*CSS*/
.contents{
  background: url(image/parts.png);
}

.inner{
  background: #fff;　/*←子要素に白地を設定*/
}

</div>

/*CSS*/

.contents{

background: url(image/parts.png);

}

.inner{

background: #fff;　/*←子要素に白地を設定*/

}

ただ、線幅を太くしないと、今度は逆に要素が白地で塗りつぶされてしまう為、

「padding」を使い、線幅を調整します。

<!-- HTML -->
<div class="contents">
  <div class="inner">
    <!-- 中身 -->
  </div>
</div>

/*CSS*/
.contents{
  background: url(image/parts.png);
  padding: 5px; /*←線幅を調整*/
}

.inner{
  background: #fff;
}

</div>

/*CSS*/

.contents{

background: url(image/parts.png);

padding: 5px; /*←線幅を調整*/

}

.inner{

background: #fff;

}

ぼく

切り取った画像を設置している要素に「padding」を設定します。今回の例でいうと「contents」ですね。

すると…

高さが「固定」ではなく、「可変」となります。

これで・・・

いくら中身を追加しようが、高さが自動調整されるグラフィカルな線の完成です。

まとめると…

画像の一部を切り離す。その画像を繰り返し表示させる。
親要素の直下に子要素を作り、子要素を白地で塗りつぶす。
線幅をpaddingで調整する。

ですね。

こうすることで、可変式の「border」では表現できないグラフィカルな線を実現することができます。

ぼく

その他の利点としては、画像を丸ごと1枚配置するよりも、小さい画像を繰り返し表示させる方がページの表示速度は速くなります。

ちなみに当初は「border-image」を利用する予定でしたが、「IE10」に対応していない為、諦めました。

[ホームページ作成] All About

CSS3のborder-imageで、しましまの目立つ枠線を作る

CSS3で追加された「border-image」プロパティを使えば、枠線の模様を画像で描画できます。しましま柄の画像を枠線として指定すると、とても目立つ「しましま(ストライプ)柄」のボックスを簡単に作ることができます。実線・破線といった平凡な枠線ではなく、もっと凝った枠線を引きたい際に便利です。border-imageプロパティの使い方を解説します。

もはや「IE10」のシェアは、全体のわずか1%強にすぎない為、個人的には捨ててもいいんじゃね…って思いますが、企業としては、そう都合よく切り捨てる訳にはいかないという…

みなどこまで対応させてるんやろ…？誰か明言して欲しい。「ここまででええよっ！」って。（そして、できればIE11以上で。）