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

CSSのborder-image-repeatプロパティとは？繰り返し・伸縮・丸め表示の使い方を解説

CSSのborder-image-repeatプロパティは、要素の境界線に適用した画像（ボーダーイメージ）の表示方法を制御するためのプロパティです。画像をそのまま引き伸ばして表示するか、繰り返して並べるか、あるいは領域に合わせて調整するかなどを指定できます。

border-image-repeatで指定できる値

border-image-repeatプロパティには、主に以下の値を指定できます。

  • stretch：画像を引き伸ばして領域全体に表示します（初期値）。
  • repeat：画像をタイル状に繰り返し表示します。端が切れる場合があります。
  • round：画像を繰り返し表示しつつ、領域にぴったり収まるようにサイズを自動調整します。
  • space：画像のサイズは変更せず、余白を均等に配分して繰り返し表示します。

実装例

以下のコードでは、border-image-repeatプロパティに「round」を指定し、ボーダー画像が領域に合わせて調整されながら繰り返し表示される例を確認できます。

<html>
   <head>
      <style>
         #borderimg1 {
            border: 15px solid transparent;
            padding: 15px;
            border-image-source: url(https://tutorialspoint.com/css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 50;
            border-image-width: 10px;
         }
      </style>
   </head>
   <body>
      <p id = "borderimg1">これはボーダーイメージのサンプルです。</p>
   </body>
</html>

コードのポイント解説

  • border: 15px solid transparent; … 透明なボーダーを15pxで設定し、ボーダーイメージを表示する領域を確保しています。
  • border-image-source … ボーダーとして使用する画像ファイルのURLを指定します。
  • border-image-slice: 50; … 画像をどのように分割（スライス）するかを指定します。
  • border-image-width: 10px; … ボーダーイメージの表示幅を10pxに設定しています。
  • border-image-repeat: round; … 画像が領域にきれいに収まるよう、繰り返し表示時にサイズを自動調整します。

このようにborder-image-repeatプロパティを使いこなすことで、単純な線だけではない、デザイン性の高い装飾ボーダーを簡単に実現できます。「repeat」「round」「space」など、それぞれの値の違いを実際に試して比較してみると理解が深まります。

  1. CSSのアウトライン（outline）とボーダー（border）の違いと使い方

    アウトライン（outline）とは？ CSSのアウトライン（outline）は、要素の周囲に線を引くためのプロパティです。最大の特徴は、レイアウト上のスペースを占有しないという点にあります。ボーダー（border）が設定されている場合は、そのボーダーの外側に描画されます。 アウトラインは、要素を視覚的に強調（ハイライト）する目的でよく使われます。たとえば、キーボード操作でフォーカスを受けたリンクやフォーム部品を目立たせるといった使い方が典型的です。なお、Firefoxなど一部のブラウザでは、フォーカス中の要素に自動的に細いアウトラインが表示されることがあります。 ただし、アウトラインには次のよ

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

    CSSで要素の境界線に画像を表示したい場合は、border-imageプロパティを使用します。通常の実線や点線ではなく、任意の画像を境界線として描画できるため、デザインの幅が大きく広がります。 border-imageプロパティの基本 border-imageプロパティは、主に次の3つの要素を組み合わせて指定します。 画像のURL … 境界線に使用する画像をurl()で指定します。 スライス値 … 画像をどのように分割して配置するかを、数値(px)またはパーセントで指定します。 繰り返し方法 … round(領域に収まるよう間隔を調整して繰り返し)やrepeat(そのまま繰り返し)などを指定