罫線をデザインする

スタイルシートマニア

罫線をデザインする | ホームページカスタマイズ Tips

段落の間を分かりやすくする事で可読性を上げられます。

<hr />要素にCSSでデザインを入れます。、これにはborderプロパティを使って罫線を作ります。

 .line01 {
      border-top: 1px dashed #666;
      margin: 2em 0;
}

<hr class="line01" />

ラインの画像を使ってデザインしてみます。

.line02 {
      background: url(img/line01.gif) center no-repeat;
      width: 359px;
      height: 6px;
      margin: 2em auto;
}

<div class="line02" ></div>

backgroundで背景画像を指定、横幅と縦幅を指定してmarginで位置を調整して完成です。

hideo