罫線を使って日記風テキスト

背景でノートの画像を入れて日記風のデザインにするのは間々見かけますが、今回は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 />を使って改行するようにしてください。

罫線をデザインする

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

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

文字に罫線を引く

以前、text-decorationを使って文字にラインを引きましたが、これだと文字の上下だけにしかラインが引けない上に装飾パターンも全く選べないただラインを引く事しかできませんでしたが、borderプロパティを使うことで、より自由なデザインが可能になります。

文字を罫線で囲むには、テキストで使っている要素に対してborder関連のプロパティを使います。

.border-text {
      border: 1px solid #f00;
      padding: 2px;
}

<p>borderスタイルを使って文字を<span class=”.border-text”>罫線</span>で囲む</p>

borderスタイルを使って文字を罫線で囲む

こんな感じです。

余談ですが、borderの指定方法はいろいろあります。

例えば、上記で使ったようなborder: 「太さ」「線のスタイル」「色」;っと指定する場合。
これは、上下左右同じ「太さ」「線のスタイル」「色」になります。

これが、上の線だけ違う色にしたいということになると、

.border {
      border-top: 1px dotted #00f;
      border-right: 1px dotted #f00;
      border-bottom: 1px dotted #f00;
      border-left: 1px dotted #f00;
}

っというような書き方をすれば、上だけ線の色が青になります。

更に違う方法で違うスタイルを書いてみましょう。

.border {
      border-width: 1px 1px 3px 5px;
      border-style: dashed dotted solid double;
      border-color: #f00 #f00 #f60 #ff0;
}

こうすると
上が、１ピクセルのダッシュ線の赤
右が、１ピクセルのドット線の青
下が、３ピクセルのソリッドのオレンジ
左が、５ピクセルの二重線の黄色
になります。

これはボーダーの「太さ」、「線のスタイル」、「色」の指定をtopを出発点として時計回りに指定する方法です。
とはいってもこんなでたらめなボーダーはないような気もしますが、覚えておくと便利に使える時があるかも？しれません。