かわいい見出しデザイン ストライプ

今回はかわいい見出しデザインを使ってみたいと思います。

参考にした記事はこちら！

blog.minimal-green.com

たてストライプの付箋風

<div style="font-size: 140%; border-left: 5px solid  #77B8DA; padding: .5em 0 .5em .75em; background: repeating-linear-gradient(90deg, #edf5f4, #edf5f4 10px, #f6faf9 0, #f6faf9 20px);">ここに文章</div>

このコードをHTML編集画面に貼り付けるとこうなります↓

ここに文章

色を変えてバリエーションを作ってみます。

ピンク系

<div style="font-size: 140%; border-left: 5px solid  #e3acae; padding: .5em 0 .5em .75em; background: repeating-linear-gradient(90deg, #ffeaff, #ffeaff 10px, #fef9fb 0, #fef9fb 20px);">ここに文章</div>

ここに文章

オレンジ系

<div style="font-size: 140%; border-left: 5px solid  #c2894b; padding: .5em 0 .5em .75em; background: repeating-linear-gradient(90deg, #ffeddb, #ffeddb 10px, #fffcf9 0, #fffcf9 20px);">ここに文章</div>

ここに文章

緑系

<div style="font-size: 140%; border-left: 5px solid  #79c06e; padding: .5em 0 .5em .75em; background: repeating-linear-gradient(90deg, #efffe0, #efffe0 10px, #f9fff4 0, #f9fff4 20px);">ここに文章</div>

ここに文章

紫系

<div style="font-size: 140%; border-left: 5px solid  #b79fcb; padding: .5em 0 .5em .75em; background: repeating-linear-gradient(90deg, #efe0ff, #efe0ff 10px, #f9f4ff 0, #f9f4ff 20px);">ここに文章</div>

ここに文章

memo

font-sizeで文字の大きさが調節できますね！　

ななめストライプ背景の付箋風

<div style="font-size: 140%; padding: .5em 0 .5em .75em; border-left: 5px solid #77B8DA; background: repeating-linear-gradient(-45deg, #edf5f4, #edf5f4 10px, #f6faf9 0, #f6faf9 20px);">ここに文章</div>

ここに文章

色を変えてバリエーションを作ってみます。

ピンク系

<div style="font-size: 140%; padding: .5em 0 .5em .75em; border-left: 5px solid #e29399; background: repeating-linear-gradient(-45deg, #ffefff, #ffefff 10px, #fff9f5 0, #fff9f5 20px);">ここに文章</div>

ここに文章

オレンジ系

<div style="font-size: 140%; padding: .5em 0 .5em .75em; border-left: 5px solid #d0826c; background: repeating-linear-gradient(-45deg, #fff2e5, #fff2e5 10px, #fff9f5 0, #fff9f5 20px);">ここに文章</div>

ここに文章

緑系

<div style="font-size: 140%; padding: .5em 0 .5em .75em; border-left: 5px solid #89c997; background: repeating-linear-gradient(-45deg, #dbffed, #dbffed 10px, #f9fff4 0, #f9fff4 20px);">ここに文章</div>

ここに文章

紫系

<div style="font-size: 140%; padding: .5em 0 .5em .75em; border-left: 5px solid #b79fcb; background: repeating-linear-gradient(-45deg, #eddbff, #eddbff 10px, #f7efff 0, #f7efff 20px);">ここに文章</div>

ここに文章

見出しがおしゃれになりそうですね！