模様入りの枠線を作る

BORDERプロパティーで様々な枠線を作ることが出来ますが、BORDERプロパティーでは用意されていない模様入りの枠線の作り方を紹介します。

枠線１

赤色とブルーの斜線からなる縞模様の枠線です。


  1. 枠模様にする画像を用意します。上の例では を使用しました。
  2. 枠の中に入れるテキストを入力しPタグで括ります。
  3. このPタグをレイアウトコンテナーdivで括ります。
  4. このdivの背景画像に用意した画像を指定し、4方向共に枠の太さとなるパディングを設定します（上の例では5pxに設定しました）。
  5. Pタグに背景色としてページの背景色を指定（ここでは白色）、見やすくするための余白としてパディングを設定します。

HTMLソース

<div>
<p>赤色とブルーの斜線からなる縞模様の枠線です。</p>
</div>

CSS

div.waku{
background : url(画像のパス) ;
padding : 5px;
}
div.waku p{
background-color : #fff;
padding : 5px;
}

枠線２

縞模様の枠線の周囲を枠線を付けました。

縞模様の枠線の周囲に枠線を引くと縞模様を目立たせることが出来ます。方法は上記の設定でdiv及びｐに「border: 1px solid black;」を加えるだけです。
CSS

div.waku{
background : url(画像のパス) ;
padding : 5px;
border: 1px solid black;
}
div.waku p{
background-color : #fff;
padding : 5px;
border: 1px solid black;
}

戻る