CSSのみでノートの罫線のようなスタイルを実装する方法【実線・点線】

Webページ上に「ノートのような罫線つきのデザインを実装したい!」という方もいるかと思います。

単純に線を引くだけならborderプロパティを使えばよいのですが、ノートの罫線のように何本も線を引く場面には向いていません…。

そこで今回の記事では、CSSのグラデーションlinear-gradient()を使用して、ノート風の罫線を引くデザインの実装方法を紹介します!

この方法を使うと、文字の長さや改行に合わせて何本も線を引くことができるので、オススメです。

また、文字サイズ、罫線の色、背景色などのカスタマイズ方法も解説しますので、是非参考にしてみてください。

目次

【コピペ用】ノート風罫線デザインの実装サンプルと実装コード

ここでは、2種類の罫線スタイルを用意しました。

  • 実線のスタイル
  • 点線のスタイル

実装コードも載せておくので、コピペするだけでお使いいただけます。

カスタマイズしたい・コードの内容を詳しく知りたい方は、次の章に進んでください。

ノート風罫線の実装サンプル1. 実線のスタイル

ノートの罫線デザインの実装サンプルです。CSSのlinear-gradient()関数で実装しています。文章の長さに合わせて、自動的に罫線が引かれます。ノートの罫線デザインの実装サンプルです。CSSのlinear-gradient()関数で実装しています。文章の長さに合わせて、自動的に罫線が引かれます。

<div class="note">
  <p>ここに文章を入れてください。</p>
</div>
.note {
  background-color: #fff; /* 背景色 */
  background-image: linear-gradient(180deg, #ccc 1px, transparent 1px); /* 罫線の色と太さ  */
  background-size: 100% 2.5em; /* 行の高さ */
  line-height: 2.5em; /* 文字の高さ */
  padding-bottom: 1px; /* 最終行の下にも罫線を引く */
}

ノート風罫線の実装サンプル2. 点線のスタイル

ノートの罫線デザインの実装サンプルです。CSSのlinear-gradient()関数で実装しています。文章の長さに合わせて、自動的に罫線が引かれます。ノートの罫線デザインの実装サンプルです。CSSのlinear-gradient()関数で実装しています。文章の長さに合わせて、自動的に罫線が引かれます。

<div class="dashed-note">
  <p>ここに文章を入れてください。</p>
</div>
.dashed-note {
  background-color: #fff; /* 背景色 */
  background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%), /* 点線1の色 */
                    linear-gradient(180deg, #ccc 1px, transparent 1px); /* 点線2の色と太さ */
  background-size: 8px 100%, /* 点線1のサイズ */
                   100% 2.5em; /* 点線2のサイズ */
  line-height: 2.5em; /* 文字の高さ */
  padding-bottom: 1px; /* 最終行の下にも罫線を引く */
}

ノート風罫線デザイン(実線)の解説とカスタマイズ方法

ここからは、ノート風罫線デザインのコード解説とカスタマイズ方法を紹介していきます。

まずは実線のスタイルから見ていきましょう。

ノート風罫線(実線)のコード解説

<div class="note">
  <p>ここに文章を入れてください。</p>
</div>

まずは文章を囲うためのdivタグを用意し、noteクラスを付けます。

この中にpタグを入れ、文章を書き入れると、HTMLは完成です。

文章が短いと1行に収まってしまうので、文章を長めにして改行させることでよりノートっぽく見えますね。

.note {
  background-color: #fff; /* 背景色 */
  background-image: linear-gradient(180deg, #ccc 1px, transparent 1px); /* 罫線の色と太さ */
  background-size: 100% 2.5em; /* 行の高さ */
  line-height: 2.5em; /* 文字の高さ */
  padding-bottom: 1px; /* 最終行の下にも罫線を引く */
}

続いてCSSの解説です!

少し複雑なので、以下の4つに分けて説明します。

  1. ノートの背景色を指定
  2. linear-gradient()で罫線の色と太さを指定
  3. 各行の高さを指定
  4. 最終行の下にも罫線を引く

①ノートの背景色を指定

background-color: #fff; /* 背景色 */

background-colorプロパティには、ノートの背景色を指定することができます。

サンプルでは白にしていますが、好みに合わせて自由に変えてください。

②linear-gradient()で罫線の色と太さを指定

background-image: linear-gradient(180deg, #ccc 1px, transparent 1px); /* 罫線の色と太さ */

linear-gradient()関数で、罫線の色と太さを指定しています。通常はグラデーションカラーを作るのによく使われていますね。

罫線の仕組みは、以下の図のようになっています。

まとめると、一番上から1pxまでの間はボーダーの色、1pxから一番下までは透明にするということですね。

省略せずに書くと、以下のようになります。

/* 0%から1pxまでは#ccc, 1pxから100%まではtransparent */
background-image: linear-gradient(180deg, #ccc 0%, #ccc 1px, transparent 1px, transparent 100%);

こちらの書き方だと仕組みが理解しやすいですね。

どちらの方法で書いても同じ意味になるので、好きなほうを使ってください。

罫線の色を指定する方法
background-image: linear-gradient(180deg, #ccc 1px, transparent 1px);

線の色を変えたい場合は、#cccとなっている部分にカラーコードを記入してください。

罫線の太さを指定する方法
background-image: linear-gradient(180deg, #ccc 1px, transparent 1px);

線の太さを変えたい場合は、1pxとなっている2つの箇所に数値を記入してください。

太すぎると不自然に見えるので、最大でも3px以内にとどめておくのがいいですね。

③各行の高さを指定

各行の高さは、background-sizeline-heightで調節します。

background-size: 100% 2.5em; /* 行の高さ */
line-height: 2.5em; /* 文字の高さ */

2.5emという指定が2箇所ありますね。

ここの数値で、各行の高さを指定することができます。

これら2箇所の数値は同じにしておかないと崩れるので、必ず同じ数値を指定してください。

また、単位にemを指定しているため、文字サイズに応じて高さが自動的に調整されます。

④最終行の下にも罫線を引く

padding-bottom: 1px; /* 最終行の下にも罫線を引く */

この指定をすることで、最終行の下にも線を引くことができます。

この1pxという数値は、②で指定した罫線の太さと同じにする必要があるので、その点注意してください。

ノート風罫線(実線)のカスタマイズ方法まとめ

ノートの罫線デザインの実装サンプルです。CSSのlinear-gradient()関数で実装しています。文章の長さに合わせて、自動的に罫線が引かれます。ノートの罫線デザインの実装サンプルです。CSSのlinear-gradient()関数で実装しています。文章の長さに合わせて、自動的に罫線が引かれます。

.note {
  background-color: #fff; /* 背景色 */
  background-image: linear-gradient(180deg, #ccc 1px, transparent 1px); /* 罫線の色と太さ */
  background-size: 100% 2.5em; /* 行の高さ */
  line-height: 2.5em; /* 文字の高さ */
  padding-bottom: 1px; /* 最終行の下にも罫線を引く */
}

ノート風罫線デザイン(点線)の解説とカスタマイズ方法

続いては、ノート風罫線デザインの点線スタイルについて解説していきます。

こちらは実線よりも少し複雑になります。

ノート風罫線(点線)のコード解説

<div class="dashed-note">
  <p>ここに文章を入れてください。</p>
</div>

先程と同じように、divタグにクラスを付与します。ここではdashed-noteにしました。

このdivの中にpタグで文章を挿入してください。

.dashed-note {
  background-color: #fff; /* 背景色 */
  background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%), /* 点線1の色 */
                    linear-gradient(180deg, #ccc 1px, transparent 1px); /* 点線2の色と太さ */
  background-size: 8px 100%, /* 点線1のサイズ */
                   100% 2.5em; /* 点線2のサイズ */
  line-height: 2.5em; /* 文字の高さ */
  padding-bottom: 1px; /* 最終行の下にも罫線を引く */
}
  1. ノートの背景色を指定
  2. linear-gradient()で2種類の線を作る
  3. 各行の高さを指定
  4. 最終行の下にも罫線を引く

先程はlinear-gradient()で1本の罫線をつくりましたが、今回は2つの線を用意して重ねるという作業が必要になります。

①ノートの背景色を指定

background-color: #fff; /* 背景色 */

background-colorプロパティには、ノートの背景色を指定してください。

後ほど説明しますが、背景色を変更する場合は、ステップ②にも変更を加える必要があります。

②linear-gradient()で2種類の線を作る

ここで点線を作っていくのですが、以下のように2つのlinear-gradient()を使用する必要があります。

background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%), /* 線1 */
                  linear-gradient(180deg, #ccc 1px, transparent 1px); /* 線2 */
background-size: 8px 100%, /* 線1 */
                 100% 2.5em; /* 線2 */
  1. 線1を作成
  2. 線2を作成
  3. 2つの線を重ねて点線にする

これらの作業が必要ですので、順番に見ていきましょう。

2-1. 線1を作成

まずは、線1を作っていきます。

background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%);
background-size: 8px 100%;

CSSのこの部分が1つ目の線になります。

コードだけだとわかりにくいので、linear-gradient()の部分がどうなっているのかを図にしてみました。

グラデーションの角度は90degなので、左から右という意味になります。

0% ~ 50%は透明、50% ~ 100%は白となっていますね。

これにbackground-sizeを足すと、以下の図のようになります。

横幅は8pxとなり、高さは100%なので、行の高さの100%という意味になります。

この2つが合わさると、以下のようになります。

透明と白のグラデーションが、8pxごとにX軸方向にリピートされていますね。

これはbackground-repeatというプロパティの初期値がrepeatになっているためです。

これによって、8pxのグラデーションが要素の背景を埋めるまで繰り返し表示されます。

これで線1は完成したので、次で2つ目の線を作成していきましょう。

2-2. 線2を作成

ノート風罫線(実線)のコード解説で、実線を作る方法を説明しましたね。

ここでも同じものを使用します。

background-image: linear-gradient(180deg, #ccc 1px, transparent 1px);
background-size: 100% 2.5em;

それぞれのコードを図で表すと、以下のようになります。

グラデーションの角度は180degなので、上から下に色が変わります。

上から1pxまでは線の色(#ccc)、1pxから下は透明(transparent)という指定をすることで、罫線を引くことができました。

これで2つの線が完成したので、次でこれらを重ねていきます。

2-3. 2つの線を重ねて点線にする
background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%), /* 線1 */
                  linear-gradient(180deg, #ccc 1px, transparent 1px); /* 線2 */
background-size: 8px 100%, /* 線1 */
                 100% 2.5em; /* 線2 */

上記のコードで、2本の線を作成しましたね。

これらを重ねると、以下の図のようになります。

線1と線2を重ねることで、点線が実装できているのが確認できますね。

transparentと指定した部分は透明になっていますが、ここには①で指定した背景色が表示されます。

なので、背景色を変更する場合は、background-colorと線1の色を同じにする必要がありますね。

background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%),
                  linear-gradient(180deg, #ccc 1px, transparent 1px);
background-color: #fff;

上記のコード内で#fffとなっている箇所は、すべて同じ色で揃えてください。

これで綺麗な点線が実装できました!

③各行の高さを指定

background-size: 8px 100%, /* 点線1のサイズ */
                 100% 2.5em; /* 点線2のサイズ */
line-height: 2.5em;

各行の高さは、background-sizeline-heightで指定します。

2.5emとなっている2箇所に同じ数値を設定してください。

④最終行の下にも罫線を引く

padding-bottom: 1px; /* 最終行の下にも罫線を引く */

最終行の下にも線を引くために、1pxの余白を用意します。

この1pxという数値は、ステップ②で設定した罫線の太さと同じにしてください。

ノート風罫線(実線)のカスタマイズ方法まとめ

ノートの罫線デザインの実装サンプルです。CSSのlinear-gradient()関数で実装しています。文章の長さに合わせて、自動的に罫線が引かれます。ノートの罫線デザインの実装サンプルです。CSSのlinear-gradient()関数で実装しています。文章の長さに合わせて、自動的に罫線が引かれます。

.dashed-note {
  background-color: #fff; /* 背景色 */
  background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%), /* 点線1の色 */
                    linear-gradient(180deg, #ccc 1px, transparent 1px); /* 点線2の色と太さ */
  background-size: 8px 100%, /* 点線1のサイズ */
                   100% 2.5em; /* 点線2のサイズ */
  line-height: 2.5em; /* 文字の高さ */
  padding-bottom: 1px; /* 最終行の下にも罫線を引く */
}

ノートのような実線・点線スタイルはCSSのみで実装可能!

今回の記事では、linear-gradient()を使用してノート風の罫線を引く方法を紹介しました。

文字サイズに合わせて行の高さを自動調整してくれるので、どんな文字サイズでも綺麗に表示されます。

また、文章が長い場合・改行が多い場合でも文章全体に罫線を引いてくれるので、すごく便利ですね。

ノート風の罫線をWebページで実装したい方は、ぜひ活用してみてください!

Web制作に関する
記事案を募集中!

Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。
要望が多かったものは解説記事を作成します。

よかったらシェアしてね!

コメント

コメントする

目次
閉じる