日曜、午後、6時半。のロゴ

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

ボーダーを画像で表現

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

枠線を画像にしたサイト

 

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

が….

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

border=シンプルな線

 

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

 

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


枠線をbackground-imageで指定


 

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


backgroundの上に中身を配置


 

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

が!!!

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

中身がはみ出ているサイト

 

ぼく
せ、先輩…
先輩
…何
ぼく
中身が飛び出るんです。
先輩
せやろな。高さが固定されてるからな。
ぼく
どうすれば…
先輩
画像の一部を切って、backgroundでリピート。線幅はpaddingで調整。ただし、子要素を作り、中を白地で塗りつぶす必要がある。OK?
ぼく
は、はい。

 

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

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


画像の一部をトリミング


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

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

backgroundの繰り返しの説明

 

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

backgroundで画像をリピートさせる

 

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

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

塗りつぶされたサイト

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

↓今はこの状態。

 

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

 

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

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

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

 

すると…

中身ぶん高さが自動調整される

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

これで・・・

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

 

まとめると…


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

ですね。

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

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

 

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

CSS3のborder-imageで、しましまの目立つ枠線を作る
CSS3で追加された「border-image」プロパティを使えば、枠線の模様を画像で描画できます。しましま柄の画像を枠線として指定すると、とても目立つ「しましま(ストライプ...

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

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

 

 

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください