ページ罫線風枠を作る

枠飾りに用いる小さい画像を背景画像としたボックスを作り、枠の間隔のパディングを設定し、内側に背景色を白色にしたボックスを重ねてページ罫線様の枠を作成する。

手順

  1. 枠模様にする画像を用意します。この例では を使用しました。
  2. レイアウトコンテナーdivを挿入してidを設定します。
    （ここでは「id="sotowaku"」としました）
  3. 上記レイアウトコンテナーdivの中にさらにレイアウトコンテナーdivを挿入し別のidを設定します。（ここでは「id="utiwaku"」としました）
  4. ユニバーサルセレクタでデフォルトスタイルをリセットします。
  5. 上記2のレイアウトコンテナーdivの幅、高さ、背景画像及びパディングを設定します。
  6. 上記3のレイアウトコンテナーdivの幅と高さを100%に、背景色を白色に設定します。

HTMLソース

<body>
<div id="sotowaku">
<div id="utiwaku"></div>
</div>
</body>

CSS

*{
padding : 0px;
margin : 0px;
}
div#sotowaku{
background : url(画像のパス);
padding : ○○px;
width : ○○px;
height : ○○9px;
}
div#utiwaku{
background-color : white;
width : 100%;
height : 100%;
}

実施例

戻る