画像で横ラインを引く


bodyのbackgroundへ画像を配置し、横に並べてみましょう。

背景の横方向に画像を並べる。

スタイルシートのソースは、こういう書き方になります。

cssソース

/*====参考====*/
body {
    background: url("./images/s256_f_health_36_0g.png") repeat-x;
}

それでは見ていきましょう。
repeat-xのrepeatは繰り返す、xは横方向へ、という意味になります。

実行すると、要素の上端に、横方向に、タイル状に配置されます、つまり、横方向に1列に画像が配置されます。

上端に並んでいるだけでは面白くないですよね。
下へ、任意の位置に下げることができます。

ソースはこうなります。

cssソース

/*====参考====*/
body {
    background: url("./images/s256_f_health_36_0g.png") repeat-x;
    background-position-y: 100px;
}

下のソースを追加しました。
background-position-yのposition-yは縦方向、という意味です。
縦方向に上から100px下がった位置で1列に表示されます。

ライン代わりに使い道がありそうです。

次は画像で縦ラインを引く

  1. 背景に色を付ける
  2. 背景にグラデーションをかける
  3. 画像をタイル状に配置する
  4. 画像を1枚表示する
  5. 画像で横ラインを引く
  6. 画像で縦ラインを引く
  7. 複数の画像を配置する
  8. 画像にグラデーションをかける