枠線に画像を使う方法

目次

• はじめに
• backgroundプロパティを使う方法
• border-imageプロパティを使う方法
• まとめ



はじめに

上記のように、枠に画像を使ったレイアウトにしたいときの方法を２パターン紹介します。
今回使用するパーツはこちら。リピート表示できるようにスライスしています。

backgroundプロパティを使う方法

backgroundを使って、画像をリピート表示します（緑の部分）。その上に、白いボックスを置くことで、見本通りの表示になります。これなら文字数の増減にも対応しています。

サンプル

		<div class="wrap">
			<p class="txtBox">
				吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
			</p>
		</div>
		

		.wrap{
			width: 200px;
			padding: 10px;/* 枠線の幅 */
			background-image: url(画像のパス);
			background-repeat: repeat;
		}

		.txtBox{
			padding: 10px;
			background-color: rgb(255,255,255,1);
			font-size: 12px;
		}
		

border-imageプロパティを使う方法

IE10など 一部非対応のブラウザもありますが、border-imageプロパティでも実装ます（対応ブラウザはこちら）。※今記事では、border-imageの詳しい説明は省きます。

サンプル

		<div class="sample01">
			吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
		</div>

		

		.sample01{
			width: 200px;
			padding: 10px;
			border: 10px solid #96d1a9;
			border-image:url(画像のパス) 15 round;
		}

		

まとめ

うまくできましたか？
今回のように見た目は同じでも、やり方が複数あることが多いので状況に合わせてやってみてくださいね。

参考サイト

• border-image – CSS: カスケーディングスタイルシート