私のためのCSSだけ！コピペ背景


## 背景作りって
地味にめんどくさい！！

筆者の見出しの使い方のほうがめんどくさいよ、
この冒頭で見る気も失せてしまった！なんて…
そんな寂しいこと言わないで…！ゆるりと見ていってくださると嬉しいです☺

本題ですが、デザインする上でパターン作る際、少しズレただけですごい違和感を感じるし
それを調整するのに地味に時間かかる…と思ったことはありませんか？

しかし画像でパターンを作ってこそ可愛いパターンって沢山あって
デザイナーさんでもそこがこだわりだから！という方も多いと思います。

ですが、簡単などこにでも使えるパターンをこだわりのパターンと併用することで
時間短縮になり、他のところのデザインに時間を使えるのでは無いでしょうか🧐
しかもcssをコピペして色変えるだけで使えるなら便利ですよね…！

と思ったので早速集めてみました✨


## 1. 横ストライプ
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="WNPEgNb" data-user="wakana-m" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wakana-m/pen/WNPEgNb">
  Untitled</a> by miyazaki wakana  (<a href="https://codepen.io/wakana-m">@wakana-m</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 細い横ストライプ
数値を調整するだけで線を細くできます🌟お好みで☺
この後の縦ストライプも数値を調整して線を細くしたり太くしたりできます☺
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="xxMLyGB" data-user="wakana-m" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wakana-m/pen/xxMLyGB">
  Untitled</a> by miyazaki wakana  (<a href="https://codepen.io/wakana-m">@wakana-m</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## 2. 縦ストライプ
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="rNPzZMz" data-user="wakana-m" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wakana-m/pen/rNPzZMz">
  Untitled</a> by miyazaki wakana  (<a href="https://codepen.io/wakana-m">@wakana-m</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 3. 斜めストライプ
右上がりです☺
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="YzBxJVw" data-user="wakana-m" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wakana-m/pen/YzBxJVw">
  Untitled</a> by miyazaki wakana  (<a href="https://codepen.io/wakana-m">@wakana-m</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

逆バージョン！
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="abXyREe" data-user="wakana-m" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wakana-m/pen/abXyREe">
  Untitled</a> by miyazaki wakana  (<a href="https://codepen.io/wakana-m">@wakana-m</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 4. ギンガムチェック
かわいい…
濃い色で使うといかにも！という感じですが、
薄い色を使って淡く使うのも使い所位によっては可愛い気がします！
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="zYedMor" data-user="wakana-m" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wakana-m/pen/zYedMor">
  Untitled</a> by miyazaki wakana  (<a href="https://codepen.io/wakana-m">@wakana-m</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="BaMdGdq" data-user="wakana-m" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wakana-m/pen/BaMdGdq">
  Untitled</a> by miyazaki wakana  (<a href="https://codepen.io/wakana-m">@wakana-m</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 5. ドット

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="WNPEYWe" data-user="wakana-m" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wakana-m/pen/WNPEYWe">
  Untitled</a> by miyazaki wakana  (<a href="https://codepen.io/wakana-m">@wakana-m</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

ピンを打ったようなドット
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="BaMdvLB" data-user="wakana-m" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wakana-m/pen/BaMdvLB">
  Untitled</a> by miyazaki wakana  (<a href="https://codepen.io/wakana-m">@wakana-m</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 6. 格子

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="ExrvGmQ" data-user="wakana-m" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wakana-m/pen/ExrvGmQ">
  Untitled</a> by miyazaki wakana  (<a href="https://codepen.io/wakana-m">@wakana-m</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="WNPELZw" data-user="wakana-m" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wakana-m/pen/WNPELZw">
  Untitled</a> by miyazaki wakana  (<a href="https://codepen.io/wakana-m">@wakana-m</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 最後に🌈
いかがだったでしょうか
こんなの知ってるよ！という方もとても多いと思うのですが
知らなかった！使ってみたいなと思った方は活用してみてください☺

少しでも皆さんと私の作業に余裕ができますように！🍀

## 参考にしたサイトなど

https://pulpxstyle.com/post-142/

https://copypet.jp/2206/

https://photopizza.design/css_pat/

CSSの背景パターンをまとめたサイトを紹介されているサイトもありました！


https://japan-design.jp/design/0041/