罫線をデザインする

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

<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で位置を調整して完成です。

文字にラインを引く

文字にラインを引いて強調させてみましょう。

.line-red {
      text-decoration: underline;
      color: #f00;
}

このスタイルを適応させたい部分をspanで囲みます。

上の一行をhtmlで書くと
<p>この<span class=”line-red”>スタイル</span>を適応させたい部分をspanで囲みます。</p>
です。

この他にも上にラインを引くoverlineもつかって見るとまた一味違った装飾ができます。
この場合、text-decoration:にunderlineとoverlineを半角スペースで区切って記入します。

.line-red {
      text-decoration: underline overline;
}