背景でノートの画像を入れて日記風のデザインにするのは間々見かけますが、今回はCSSでunderlineを引いて日記風のデザインを作ってみます。

しかし、単純にtext-decoration: underline;で下線を引いても単純に下線が引かれるだけで日記ノートのようなデザインとは程遠い感じになってしまいます。では、どうするのか？っというと、border-bottomプロパティを使って下線を引きます。でも、これだけでは段落のブロック要素の下に下線が引かれるだけになってしまうので、displayをinlineに入れます。

.underline p  {
      border-bottom: 1px dotted #999;
      line-height: 2em;
      display: inline;
      padding-bottom: 2px;
}

<div class="underline">

<p>このCSSが誕生する前はWebサイトはHTML言語（Hyper Text Markup Language）という言語だけで構成されていましたが、インターネットの普及により次々とリリースされるブラウザで独自にHTMLの要素や属性を拡張したりして、W3Cが意図しない方向へと進み始めたためにこのCSSが生まれたのです。</p>
</div>

ここで注意しなければいけないのは、display: inline;で<p>タグでは改行できないようになっているので<br />を使って改行するようにしてください。