ホームページ作成/ボックスや枠線の表示・装飾 (HTML,CSS)

ノートのように罫線(下線)を引くデザインの作り方

ノートのように、文中の各行に下線を引くデザインの作り方を解説。罫線画像とスタイルシートを組み合わせると、簡単にノートのように見えるデザインが作れます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

ノートのように各行に下線を引くデザインを作る方法 (画像使用)

ノートのように、各行に下線を引くデザインを作ってみましょう。スタイルシートと画像を使うことで、下記のようにノートっぽく見えるデザインが簡単に作れます。

2009年7月13日ノートのような罫線を引く

「下線を引く」というと、text-decorationプロパティに値「underline」を指定したり、border-bottomプロパティを使ったりする方法を思い浮かべる方々も多いでしょう。

しかし、text-decorationプロパティを使う方法では、文字のない箇所には下線が引けないため、あまりノートのようには見えません。

また、border-bottomプロパティを使う方法では、ボックスの最下部に下線が引かれるだけで「各行」には引かれないため、まったくノートのようには見えません。


ここでは、スタイルシートで下線を引いているわけではありません。 下線(罫線)はあらかじめ画像「 青破線 」で用意しておき、その画像と本文をスタイルシートでうまく配置することで、ノートのように見えるデザインを作っています。画像を使わずにCSSだけで実現する方法もありますが、ここでは下線に画像を使う方法をご紹介いたします。この方法には画像を用意する手間がかかりますが、古いブラウザでも問題なく表示できるメリットがあります。

カテゴリ[スタイルシート]ノートのような下線画像

ノートのような罫線(下線)は画像で作るため、点線・破線など様々なラインが使えます。 画像さえ用意すれば、下線の色も線種も自由自在です。

罫線画像は背景画像として指定するため、本文は何行でも好きなだけ延ばすことができます。


今回は、このようなノートのように見えるデザインの作り方をご紹介いたします。 罫線画像を用意して、数行のスタイルシートを記述するだけで簡単に作れます。

July 13, 2009.ノートに見えるデザインを作る方法

この記事の目次:
1. ノートに見えるデザインのサンプル(このページ)
2. ノートに見えるデザインを作る
3. ノートの外側をデザインする
4. ノートのタイトル部分を作る
5. タイトル部分の右端にも文字列(日付など)を加える
6. ソースのまとめ


それでは、ノートのように見えるデザインの作り方を、順番に見ていきましょう
  • 1
  • 2
  • 3
  • 6
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます