CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのborder-imageプロパティで境界線画像を作成する方法

CSSで要素の境界線に画像を表示したい場合は、border-imageプロパティを使用します。通常の実線や点線ではなく、任意の画像を境界線として描画できるため、デザインの幅が大きく広がります。

border-imageプロパティの基本

border-imageプロパティは、主に次の3つの要素を組み合わせて指定します。

  • 画像のURL … 境界線に使用する画像をurl()で指定します。
  • スライス値 … 画像をどのように分割して配置するかを、数値(px)またはパーセントで指定します。
  • 繰り返し方法 … round(領域に収まるよう間隔を調整して繰り返し)やrepeat(そのまま繰り返し)などを指定します。

また、境界線画像を正しく表示するには、あらかじめborder: 10px solid transparent;のように透明な境界線を設定しておく必要があります。これは、画像を表示するための領域を確保するためです。

コード例

以下は、同じ画像に対して異なるスライス値(30px と 2%)を指定した例です。

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.border1 {
   border: 10px solid transparent;
   padding: 15px;
   border-image: url("https://i.picsum.photos/id/677/200/300.jpg") 30 round;
}
.border2 {
   border: 10px solid transparent;
   padding: 15px;
   border-image: url("https://i.picsum.photos/id/677/200/300.jpg") 2% round;
}
</style>
</head>
<body>
<h1>CSSでの境界線画像</h1>
<p class="border1">段落内のサンプルテキストです</p>
<p class="border2">段落内のサンプルテキストです</p>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。

CSSのborder-imageプロパティで境界線画像を作成する方法

スライス値の違いにより、境界線画像の切り分け方や見た目が変化することが確認できます。実際のデザインに合わせて、値を調整しながら試してみてください。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>