CSSを使って便箋風ラインを引く簡単な方法！ブログで効果的！

今回は、CSSで便箋風なものを簡単に作れるように、説明していきたいと思います。ポイントで目立たせたい！少し注意を引きたい。という文章の時には、この便箋風なデザインにすることによって、他の文章との差別化を図れるのではないでしょうか。

では、いってみましょ～！

CSSで作る便箋風ライン01

HTML

<div class="line01 bgred">
<p>この様にCSSで便箋風のラインを引くことが出来ます。<br />
この「便箋風ライン01」は、線が点で出来ています。<br />
少し目立たせたい部分などに使うと効果的ですね。果てしなく改行しても問題ありません。
スマホでも、PCでもタブレットでも大丈夫！コピーして使ってみてくださいね。</p>
</div>

CSS

.line01 p {
	line-height: 36px;
	background: url(/images/bg-note01.png) bottom;
	margin: 0;
	padding: 0;
}
.bgred {
	border: 1px solid #dddddd;
	background-color: #fcf8fb;
	margin: 30px 0;
	padding: 20px 40px 40px;
}

CSSで作る便箋風ライン02

HTML

<div class="line02 bgblue">
<p>この様にCSSで便箋風のラインを引くことが出来ます。<br>
この「便箋風ライン02」は、線が4pxの線と2pxの空白で出来ています。<br>
少し目立たせたい部分などに使うと効果的ですね。果てしなく改行しても問題ありません。 スマホでも、PCでもタブレットでも大丈夫！コピーして使ってみてくださいね。</p>
</div>

CSS

.line02 p {
	line-height: 36px;
	background: url(/images/bg-note02.png) bottom;
	margin: 0;
	padding: 0;
}
.bgblue {
	border: 1px solid #dddddd;
	background-color: #f8fbfc;
	margin: 30px 0;
	padding: 20px 40px 40px;
}

CSSで作る便箋風ライン03

HTML

<div class="line03 bggreen">
<p>この様にCSSで便箋風のラインを引くことが出来ます。<br>
この「便箋風ライン03」は、線が3pxの線と4pxの空白で出来ています。<br>
少し目立たせたい部分などに使うと効果的ですね。果てしなく改行しても問題ありません。 スマホでも、PCでもタブレットでも大丈夫！コピーして使ってみてくださいね。</p>
</div>

CSS

.line03 p {
	line-height: 36px;
	background: url(/images/bg-note03.png) bottom;
	margin: 0;
	padding: 0;
}
.bggreen {
	border: 1px solid #dddddd;
	background-color: #fbfcf8;
	margin: 30px 0;
	padding: 20px 40px 40px;
}

素材（点線）ダウンロード

上記であげた３つの背景（点線）素材をダウンロードできるように、用意しておきました。欲しい方はダウンロードして自由に使用してください♪

→ ダウンロードする。

まとめ

ポイントとなる部分や他の段落との差別化で、記事自体が読みやすくなります。ずらずら書いてあるよりも、ポイントを読みやすくすると離脱率も少なくなりますね。ということは、PV数も増えていくという事になります。

line01で使っている点線と、line03で使っている背景（緑色）の組み合わせでもしっかり表示しますので、好みの線と好みの色を使ってみてくださいね♪

簡単にコピーでつくれるので参考にしてください～！

では、bye!!