今回はストライプの背景を使ってみたいと思います。
参考にした記事はこちら！
１．太めのストライプ
<div style="background-image: linear-gradient( -45deg, #fff9fc 25%, #ffe5f2 25%,#ffe5f2 50%, #fff9fc 50%, #fff9fc 75%, #ffe5f2 75%, #ffe5f2 );
background-size: 30px 30px; font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
違う色を並べる感じでしょうか？
法則がよくわかりませんがバリエーションを作ってみます。
オレンジ系
<div style="background-image: linear-gradient( -45deg, #fffcf9 25%, #fff2e5 25%,#fff2e5 50%, #fffcf9 50%, #fffcf9 75%, #fff2e5 75%, #fff2e5 );
background-size: 30px 30px; font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
このコードをHTML編集画面に貼り付けるとこうなります↓
緑系
<div style="background-image: linear-gradient( -45deg, #f9fff9 25%, #f5ffe5 25%,#f5ffe5 50%, #f9fff9 50%, #f9fff9 75%, #f5ffe5 75%, #f5ffe5 );
background-size: 30px 30px; font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
このコードをHTML編集画面に貼り付けるとこうなります↓
水色系
<div style="background-image: linear-gradient( -45deg, #f9ffff 25%, #e5ffff 25%,#e5ffff 50%, #f9ffff 50%, #f9ffff 75%, #e5ffff 75%, #e5ffff );
background-size: 30px 30px; font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
このコードをHTML編集画面に貼り付けるとこうなります↓
２．中太のストライプ
<div style="background-image: linear-gradient( -45deg, #fff9fc 25%, #ffe5f2 25%,#ffe5f2 50%, #fff9fc 50%, #fff9fc 75%, #ffe5f2 75%, #ffe5f2 );
background-size: 20px 20px; font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
色を変えてバリエーションを作ってみます。
background-sizeの部分の数字を変えればよさそうですね。
オレンジ系
<div style="background-image: linear-gradient( -45deg, #fffcf9 25%, #fff2e5 25%,#fff2e5 50%, #fffcf9 50%, #fffcf9 75%, #fff2e5 75%, #fff2e5 ); background-size: 20px 20px; font-size: 100%; padding: 20px;">ここに本文を入れます♪</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
緑系
<div style="background-image: linear-gradient( -45deg, #f9fff9 25%, #f5ffe5 25%,#f5ffe5 50%, #f9fff9 50%, #f9fff9 75%, #f5ffe5 75%, #f5ffe5 );
background-size: 30px 30px; font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
このコードをHTML編集画面に貼り付けるとこうなります↓
水色系
<div style="background-image: linear-gradient( -45deg, #f9ffff 25%, #e5ffff 25%,#e5ffff 50%, #f9ffff 50%, #f9ffff 75%, #e5ffff 75%, #e5ffff );
background-size: 30px 30px; font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
このコードをHTML編集画面に貼り付けるとこうなります↓
３．細めのストライプ
<div style="background-image: linear-gradient( -45deg, #fff9fc 25%, #ffe5f2 25%,#ffe5f2 50%, #fff9fc 50%, #fff9fc 75%, #ffe5f2 75%, #ffe5f2 );
background-size: 10px 10px; font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
色を変えてバリエーションを作ってみます。
オレンジ系
<div style="background-image: linear-gradient( -45deg, #fffcf9 25%, #fff2e5 25%,#fff2e5 50%, #fffcf9 50%, #fffcf9 75%, #fff2e5 75%, #fff2e5 ); background-size: 10px 10px; font-size: 100%; padding: 20px;">ここに本文を入れます♪</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
緑系
<div style="background-image: linear-gradient( -45deg, #f9fff9 25%, #f5ffe5 25%,#f5ffe5 50%, #f9fff9 50%, #f9fff9 75%, #f5ffe5 75%, #f5ffe5 );
background-size: 10px 10px; font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
このコードをHTML編集画面に貼り付けるとこうなります↓
水色系
<div style="background-image: linear-gradient( -45deg, #f9ffff 25%, #e5ffff 25%,#e5ffff 50%, #f9ffff 50%, #f9ffff 75%, #e5ffff 75%, #e5ffff );
background-size: 10px 10px; font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
このコードをHTML編集画面に貼り付けるとこうなります↓
ストライプはちょっと太めのほうがストライプらしさが出る気がしますね！
