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

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

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

「ノートのように罫線(下線)を引くデザイン」ソースのまとめ

HTMLソース:
<div class="notedesign">
   <p class="notetitle">
      <span class="date">日付</span>
      ■タイトル
   </p>
   <p>
      本文いろいろ
   </p>
   <p>
      本文いろいろ
   </p>
</div>
ノート内部に表示する本文は、p要素を使って作ります。 このp要素(=段落)は、いくつ連続していても構いません。上記のサンプルソースでは2つの段落を記述しています。1つだけにしても構いません。

スタイルシートソース:
/* ▼外枠▼ */
div.notedesign {
   border: 2px solid green;   /* 外枠 */
   padding: 10px;             /* 内側の余白 */
   background-color: #ffffcc; /* 背景色 */
}
/* ▼ノート内部▼ */
div.notedesign p {
   background-image: url("greendot.gif"); /* 罫線 */
   line-height: 25px; /* 行の高さ */
   margin: 0px;       /* 外側の余白 */
}
/* ▼ノートタイトル▼ */
div.notedesign p.notetitle {
   margin: 0px 0px 5px 0px;           /* 外側の余白 */
   padding: 3px 0px;                  /* 内側の余白 */
   border-bottom: 3px double #008000; /* 下線 */
   font-weight: bold;                 /* 文字の太さ */
   color: #008000;                    /* 文字色 */
}
/* ▼ノートタイトルの日付欄▼ */
div.notedesign p.notetitle span.date {
   float: right;
}

上記のソースを表示すると、以下のように見えます。

日付■タイトル

本文いろいろ。

本文いろいろ。


上記のソースから、ファイル名を「bluedash.gif」に変更し、枠線の色やタイトルの色を「#0000cc」に変更すると以下のように見えます。

日付■タイトル

本文いろいろ。

本文いろいろ。


画像や色を変更して、お好みのノートになるようデザインしてみて下さい。

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

今回は、画像とスタイルシートを使ってノートのように各行に下線を引く方法をご紹介いたしました。ぜひ、試してみて下さい。画像を使わずにCSSだけで実現する方法もありますが、それは別の機会にご紹介いたします。

なお、本記事中でサンプルに使用した下線画像はご自由にコピーしてご活用下さい。例えばWindows環境では、下記の画像を右クリックして「名前を付けて画像を保存」などの機能を使えば保存(ダウンロード)できます。

青破線 」:bluedash.gif , 「 緑点線 」:greendot.gif , 「 赤破線 」:redbrush.gif
青実線 」:blueline.gif , 「 赤実線 」:brownline.gif


【関連記事】

【編集部おすすめの購入サイト】
Amazon でホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 4
  • 5
  • 6
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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