ウェブデザインにおいて、テキストの背景にノート風の罫線を追加することで、コンテンツに親しみやすさや独自性を与えることができます。この記事では、CSSのみを使用して、追加の画像やJavaScriptライブラリを使わずにノート風の罫線を作成するシンプルな方法を紹介します。
デザインの概要
ノート風罫線デザインは、テキストの背景に水平線を引くことで、紙のノートに書かれたような雰囲気を演出します。このデザインは、ブログ記事やメモ風のコンテンツで特に効果的です。シンプルなCSSだけで実現できるため、追加の画像リソースやJavaScriptを必要としません。
HTML構造
まず、ノート風罫線を適用するテキストを以下のようなHTML構造にします。
<p class="ruled-line">
程度に這入りですのはいくら十月がどうもうでた。<br>
いよいよ槙君を解釈取消始終破壊をつけた国家どんな個人私か矛盾のに対して小返事ないなですます。<br>
その前は彼らかずる知人を落ちが、大森さんの訳に手のこれをよくお刺戟と知らば何先生から小攻撃が落ちようにひょろひょろお相談をするうたと、いやいや必ずしも詐欺に送らんてみんものに与えたた。それですなわちお漫然に得る事はどう失礼と握るたが、<br>
この倫理には云えますがという心がしてあるでで。
</p>CSSによるノート風罫線の実装
次に、CSSのみでノート風の罫線を作成するスタイルを追加します。
.ruled-line {
width: 80%;
max-width: 700px;
margin: 0 auto;
font-size: 20px;
line-height: 2.3;
background-image: linear-gradient(180deg, #ddd 1px, transparent 1px);
background-size: 100% 2.3em;
background-position: bottom 1px center;
}コード解説
line-height: 2.3;：行の高さを調整し、background-sizeの2.3emを揃えるbackground-image: linear-gradient(180deg, #ddd 1px, transparent 1px);：- 上から下に向けて、1pxのグレーの線を描き、それ以降は透明にするリニアグラデーションを設定しています。
background-size: 100% 2.3em;：- 背景画像のサイズを、幅100%で高さを2.3emに設定。これは行の高さと一致させるためです。
background-position: bottom 1px center;：- 背景位置を各行の下部に設定し、テキストとの整合性を取ります。
このスタイルにより、各行の下に均等な罫線が引かれた、ノート風の見た目が実現されます。
カスタマイズのポイント
色の変更:
linear-gradient(180deg, #ddd 1px, transparent 1px);の#dddを他の色に変更することで、線の色をカスタマイズできます。
線の太さの変更:
#ddd 1pxの1pxを変更することで、罫線の太さを調整できます。
行間の調整:
line-heightの値を変更することで、行間隔と罫線の間隔を調整できます。background-sizeの高さもそれに合わせて変更してください。
まとめ
CSSのみでノート風罫線を作る方法を紹介しました。追加の画像やJavaScriptを使わずに、シンプルなCSSでテキスト背景に罫線を引くことができます。このテクニックを用いることで、ブログ記事やメモ風コンテンツに独特の雰囲気を加えることができます。
ぜひ、この記事の方法を参考にして、あなたのウェブサイトにノート風のデザインを取り入れてみてください。