点線を使った下線を引いてノートのようにデザインするCSS

本来、リファレンスよりこういったものの方が読んでいて楽しいと思うし書くほうも書き甲斐がある。
さて、CSSだけでもきれいなデザインはできます。
今回は下線を点線にしてノートのような感じにデザインするためのCSSを紹介します。
全く難しいものではなく、CSSのborderというプロパティを使うだけの簡単な方法です。

使うCSSはborder-bottom。
下線のスタイルをdottedやdashedにするだけです。
dottedは点線で表現され、dashedは少し横長の点線で表現します。
※詳しくは枠線のスタイル、太さ、色をまとめて指定する”border”プロパティ
まずはスタイルシートはこのように指定します。

/*スタイル１*/
div.note1
{
border-bottom:1px dotted #666666;
}
/*スタイル２*/
div.note2
{
border-bottom:1px dashed #666666;
}

スタイル１
<div class="note1">コンテンツ１</div>
<div class="note1">コンテンツ２</div>
<div class="note1">コンテンツ３</div>
<div class="note1">コンテンツ４</div>
<div class="note1">コンテンツ５</div>

スタイル２
<div class="note2">コンテンツ１</div>
<div class="note2">コンテンツ２</div>
<div class="note2">コンテンツ３</div>
<div class="note2">コンテンツ４</div>
<div class="note2">コンテンツ５</div>

これらを実際にブラウザで現すとこのようになります。
簡単ですが、こういった細かい部分がデザインを左右します。
シンプルだけれど使えるCSSデザインです。
例えばこんな感じでメニューに使ってみるという手もあります。