画像で縦ラインを引く


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

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

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

cssソース

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

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

実行すると、要素の左端に、縦方向に、タイル状に配置されます、つまり、縦方向に1列に画像が配置されます。
左端に並んでいるだけでは面白くないですよね。
右へ、任意の位置に移動させることができます。

ソースはこうなります。

cssソース

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

下のソースを追加しました。
background-position-xのposition-xは横方向、という意味です。
左から横方向に100px移動したい位置で1列に表示されます。

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

次は複数の画像を配置する

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