CSSシークレット ―47のテクニックでCSSを自在に操る

知っておくべきポイント

CSSグラデーション、基本的な border‐image、 P.78の「ストライ

プ模様の背景」、基本的なCSSアニメーション

課題

パターンや画像を、背景ではなくボーダーとして表示させたいことがあ

ります。例えば図2.57 では、画像を切り抜いた装飾的なボーダーが表示

されています。また、対象の要素のサイズに合わせて画像は伸縮すること

が望まれます。このようなボーダーは、 CSS を使って生成できるでしょ

うか。

「border‐imageを使えばいいに決まっているじゃないか。問題なんて

起こるはずがない」と思われるかもしれませんが、早まってはいけませ

ん。 border‐imageの仕組みを思い出してみましょう。図 2.58 のよう

に、border‐imageでは画像は9つに分割され、それぞれがボーダーの辺

や角に当てはめられます。

画像を分割して、図2.57 のようなボーダーは作れるでしょうか。要素

の大きさとボーダーの幅が決まっているなら、それに合わせて注意深く分

割することも可能です。しかし、その分割位置の設定は別の要素ではうま

く適用できません。ここで問題になっているのは、画像の中でどの部分が

ボーダーの角に位置するのか決まっていないという点です。要素の大きさ

1つの画像による

ボーダー

8

106

2章：背景とボーダー

図2.56

ストーンアートの画像。ボーダーの素

材として利用する

やボーダーの幅に応じて、角の位置に表示される画像は異なります。自分

で試してみれば、 bord