みなさんこんにちは!おさかなです!
今回は「CSS background patterns」について、書いていこうと思います!
それでは、レッツゴー!!!!!
想定読者
・模様パターンを探している方
・背景デザインを探している方
・CSSを学習中の方
・模様パターンを探している方
・背景デザインを探している方
・CSSを学習中の方
いい感じの「模様」を使いたい!
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
おさかな
なんかこう…同じ柄が繰り返されるみたいな…そういう模様を…なんて言うんだっけ?
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
ナビまる
「幾何学模様」みたいなやつ?
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
おさかな
そう!それそれ!
![](https://osakanav.com/wp-content/uploads/2020/04/20-05-28-15-19-36-122_deco-160x90.jpg)
【HTML/CSS】「CSS」だけで画像を表示する方法とは?【プログラミング】
みなさんこんにちは!おさかなです!
今回は「「CSS」だけで画像を表示する方法」について、書いていこうと思います!
それでは、レッツゴー!!!!!
想定読者
・HTML/CSSを学習中の人
・画像の配置方法を<img...
「CSS background patterns」って何?
「CSS background patterns」とは、色々な「模様パターン」がまとめられているサイトのことです。CSSで作成されているので、Webサイトの「背景」に使用でき、カスタマイズすることもできます!(いいね!)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/7ddbbff6fe63026fdf3771215ef22b79.png)
CSS pattern backgrounds by Super designer
A collection of 100+ CSS background patterns for free. Simple copy-paste backgrounds in created using pure CSS
![](https://osakanav.com/wp-content/uploads/2021/11/dbg-top-160x90.png)
【CSS】いい感じの「破線」が作れちゃう?!【Dashed Border Generator】とは?
みなさんこんにちは!おさかなです!今回は「Dashed Border Generator」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・破線を作成したい方・デザインをチェックしながら、破...
実際につかってみよう!
模様を探そう!
それでは早速サイトにアクセスします!
![](https://osakanav.com/wp-content/uploads/2021/11/css-bg-p.png)
スクロールしてみると…?
色々な模様パターンを見ることができます!(風呂敷になりそう…笑)
![](https://osakanav.com/wp-content/uploads/2021/11/css-bg-p.gif)
気になる模様はクリックすると、実際に背景として表示されます!(おお!)
![](https://osakanav.com/wp-content/uploads/2021/11/css-bg.gif)
右側のパネルから、
カラー
背景カラー
サイズ
透明度
の4項目をカスタマイズできます!(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2021/11/css-bg-customize.gif)
カスタマイズが完了したら「Copy CSS」を押して、コードをコピーしましょう!(ポチッと)
![](https://osakanav.com/wp-content/uploads/2021/11/css-bg-btn.png)
(あともう少し…🚩)
CSSコードを貼り付けよう!
今回はコピーしたCSSコードをエディタに貼り付けていきたいと思います!(おー!)
↓CSSがよくわからないという方はこちら
![](https://www15.a8.net/0.gif?a8mat=3H5R2D+EGCW9M+3L4M+601S2)
今回は「.html」ファイルの中に<style>タグを書いて、その中にコードを貼り付けています。
※*で全体に指定。
![](https://osakanav.com/wp-content/uploads/2021/11/css-bg-code.png)
ここが貼り付けたコードです!
![](https://osakanav.com/wp-content/uploads/2021/11/css-bg-code-paste.png)
表示をチェックしてみると…?
いい感じで背景が実装されました〜!(やった〜🌻)
![](https://osakanav.com/wp-content/uploads/2021/11/Screenshot-from-2021-11-21-00-04-37.png)
他のパターンも素敵です…!(きれい!)
![](https://osakanav.com/wp-content/uploads/2021/11/Screenshot-from-2021-11-21-00-14-30.png)
![](https://osakanav.com/wp-content/uploads/2021/11/Screenshot-from-2021-11-21-00-27-10.png)
![](https://osakanav.com/wp-content/uploads/2021/11/Screenshot-from-2021-11-21-00-15-58.png)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
おさかな
色々な模様を試しちゃおう〜!
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2021/11/rayso-top-160x90.png)
プログラムをきれいに見せる「コード映え」画像が作れちゃう?!【Ray.so】とは?
みなさんこんにちは!おさかなです!今回は「Ray.so」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・プログラムを書いている方・人に見せるための、コード画像がほしい方・コードをきれいに見...