(HTML,CSS)CSS3のborder-imageで、しましまの目立つ枠線を作るCSS3で追加された「border-image」プロパティを使えば、枠線の模様を画像で描画できます。しましま柄の画像を枠線として指定すると、とても目立つ「しましま(ストライプ)柄」のボックスを簡単に作ることができます。実線・破線といった平凡な枠線ではなく、もっと凝った枠線を引きたい際に便利です。border-imageプロパティの使い方を解説します。文宏ホームページ作成ガイド目立つ、しましま(ストライプ)柄の枠線を引きたいしましま(ストライプ柄)の枠線CSS3では、枠線の描画に画像を使う「border-image」プロパティが追加されました。4種類しかありませんでした。この「border-image」プロパティを使えば、枠線を任意の画像で構成できるため、右図のように、目立つ「しましま」(ストライプ)柄の枠線など、様々な枠線が実現できます。CSS3のborder-imageプロパティを使えば、枠線に自由な画像が使える例えば、下図のように「しましま柄の画像」を用意しておけば、それを枠線に指定することで、「しましま柄の枠線」を作ることができます。border-imageプロパティを使って、しましま柄の画像を指定すれば、しましまの枠線が作れる枠線の模様は「画像」ですが、太さはCSSで自由に指定できます。下図のように、太い枠線でも細い枠線でも、ピクセル単位で望みのサイズを指定できます。画像を使っているとはいえ、CSSで枠線を指定しているため、太さは自由自在もちろん、用意する画像次第では、しましま柄以外の枠線を引くこともできます。作り方は、「border-image」プロパティを1つ記述すれば良いだけなので、とても簡単です。単純に画像ファイル名を指定するだけでは、うまく表示されません。「画像のどの部分」を「枠線のどこに使うか」、「画像をどのように枠線として並べるか」といった情報も同時に指定する必要があります。今回は、上図のような「しましま柄」の枠線を引くことを例にして、この「border-image」プロパティの使い方をご紹介致します。Explorerでは、Ver.11以降でサポートされました(右図の左上側)。IE10以下のような「border-image」プロパティに非対応のブラウザでも、同時に指定する「border」プロパティによって、(画像を使わない)普通の枠線は描画されますから、特におかしな表示にはなりません(右図の右下側)。気軽に活用してみて下さい。それでは、次のページで、border-imageプロパティの使い方をご紹介致します。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。