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

3 min

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

では、いってみましょ~!

CSSで作る便箋風ライン01

この様にCSSで便箋風のラインを引くことが出来ます。

この「便箋風ライン01」は、線が点で出来ています。

少し目立たせたい部分などに使うと効果的ですね。果てしなく改行しても問題ありません。
スマホでも、PCでもタブレットでも大丈夫!コピーして使ってみてくださいね。

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

この様にCSSで便箋風のラインを引くことが出来ます。

この「便箋風ライン02」は、線が4pxの線と2pxの空白で出来ています。

少し目立たせたい部分などに使うと効果的ですね。果てしなく改行しても問題ありません。
スマホでも、PCでもタブレットでも大丈夫!コピーして使ってみてくださいね。

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

この様にCSSで便箋風のラインを引くことが出来ます。

この「便箋風ライン03」は、線が3pxの線と4pxの空白で出来ています。

少し目立たせたい部分などに使うと効果的ですね。果てしなく改行しても問題ありません。
スマホでも、PCでもタブレットでも大丈夫!コピーして使ってみてくださいね。

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;
}

素材(点線)ダウンロード

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

ダウンロードする。

まとめ

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

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

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

では、bye!!

COMA

COMA

WEB業界歴17年のブロガーです。

WEB制作の企業に3社勤めた後に独立。現在はフリーランスとして生計を立てています。

この『COMALOG』では、WEB集客について、ホームページ運用、SEO、wordpress、ブログ運用やアフィリエイト、生活を便利にするガジェット等を紹介しています。

➡ 詳しくはコチラ

カテゴリー:
タグ:
関連記事