【CSS09】

CSS2.1

背景画像と枠線

＞できたソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
  <head>
    <title>【CSS09】</title>
    <meta http-equiv="Content-Type" content="text/html; charset=SHIFT-JIS" >
    <style type="text/css">
<!--

body {background-image:url("http://cdn-ak.f.st-hatena.com/images/fotolife/w/web-design-advance/20120415/20120415210237.jpg");
      background-repeat:repeat-y;
      width:640px;
     }

h1 {color:#a52a2a;
    font-size:32px;
    font-weight:bold;
    margin-left:72px; /* 背景画像の横幅＋アンチエイリアスを想定して＋2px */
    border-bottom:dashed 4px #808080;
    padding:1em 0 10px 10px;
   }

p {
    margin-left:72px;
    padding:0 0 10px 10px;
  }

//-->
    </style>
  </head>
  <body>
    <h1>Page Design</h1>
    <p>背景に色数を減らした画像を用意します。背景画像は、縦方向び繰り返しを指定しています。<br>
また、見出しの文字は、大きく、インパクトの強い色を指定し、目を引くようにしています。<br>
このように、やり方次第でデザインの幅が広がります。いろいろ試してみましょう。</p>
  </body>
</html>

＞できたページ

screenshot