つい先日、下記の様なデザインデータを渡され、コーディングに励んでおりました。
当然、パーツごとにデザインデータを切り分ける必要があります。
が….
どう考えても周りの線が「border」で何とかなるレベルではない。
なので力技で解決を試みました。
枠を丸ごと画像化(pngデータ化)し、「background」を用いて背景画像として指定。
1 2 |
/*CSS*/ background: url(image/frameborder.png) no-repeat; |
その上に中身を配置する。という方法です。
1 2 3 4 5 6 7 8 9 |
<!-- HTML --> <div class="contents"> <!-- 中身 --> </div> /*CSS*/ .contents{ background: url(image/frameborder.png) no-repeat; } |
一見(いっけん)何の問題もなく反映された様に見えました….
が!!!
要素が追加された途端、中身が枠からはみ出る…という事態に。
作成する流れは以下の通り。
①:まず、画像の一部を切り離します。
ただし、1枚ものの画像と違い、同じ画像を繰り返し並べて線にする為、切り離す位置はどこでもいい…という訳ではありません。
適当な位置で切り離すとガタガタの線になる為、ご注意を。(下図を参照)
②:続いて、切り取った画像を「background」を用いて設置します。尚、画像を繰り返し並べて表示させる為、「no-repeat」は設定してはいけません。
1 2 |
/*CSS*/ background: url(image/parts.png); |
すると、切り取った画像が縦横方向に中身の大きさ分 繰り返し表示されます。
これで枠は完成。ただし、中を白地で塗りつぶしていないから・・・
切り取った画像で中身が埋め尽くされます。
↓今はこの状態。
1 2 3 4 5 6 7 8 9 |
<!-- HTML --> <div class="contents"> <!-- 中身 --> </div> /*CSS*/ .contents{ background: url(image/parts.png); } |
その為、親要素「div(contents)」の直下に子要素「div(inner)」を作り、そこに白地を設定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- HTML --> <div class="contents"> <div class="inner"><!-- ←子要素を追加 --> <!-- 中身 --> </div> </div> /*CSS*/ .contents{ background: url(image/parts.png); } .inner{ background: #fff; /*←子要素に白地を設定*/ } |
ただ、線幅を太くしないと、今度は逆に要素が白地で塗りつぶされてしまう為、
「padding」を使い、線幅を調整します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!-- HTML --> <div class="contents"> <div class="inner"> <!-- 中身 --> </div> </div> /*CSS*/ .contents{ background: url(image/parts.png); padding: 5px; /*←線幅を調整*/ } .inner{ background: #fff; } |
すると…
高さが「固定」ではなく、「可変」となります。
これで・・・
いくら中身を追加しようが、高さが自動調整されるグラフィカルな線の完成です。
まとめると…
- 画像の一部を切り離す。その画像を繰り返し表示させる。
- 親要素の直下に子要素を作り、子要素を白地で塗りつぶす。
- 線幅をpaddingで調整する。
ですね。
こうすることで、可変式の「border」では表現できないグラフィカルな線を実現することができます。
ちなみに当初は「border-image」を利用する予定でしたが、「IE10」に対応していない為、諦めました。
もはや「IE10」のシェアは、全体のわずか1%強にすぎない為、個人的には捨ててもいいんじゃね…って思いますが、企業としては、そう都合よく切り捨てる訳にはいかないという…
みなどこまで対応させてるんやろ…? 誰か明言して欲しい。「ここまででええよっ!」って。(そして、できればIE11以上で。)
(2024/09/07 19:02:20時点 Amazon調べ-詳細)