CSSで柄背景を作ってみよう！
記事IT・テクノロジー
画像を用意しなくても、CSSだけで水玉模様やチェック柄が作れます。いつものようにコピペ用のコードも載せておきますので、よかったら使ってみてください。そして最後には、この背景を使っての活用例もお伝えしますので、参考にしてみてくださいね🌷
▼このブログの完成見本
https:// tsuyu0102.github.io/css-sample/background-pattern/index.html
完成見本1️⃣
html1️⃣
<section class="sample01"></section>
⭐️sectionタグはdivとかでもいいです👍 <div class="sample01"></div>としてもOK。そしてこのタグの間に、表示したいものを入れます。この背景を使った活用方法はページ下部へ👇
CSS1️⃣
.sample01 {
height: 300px;
background-color: #f7e3da;
background-image: repeating-linear-gradient(-45deg, transparent 0 15px, #badfd7 15px 30px, #fdb7b9 30px 45px);
}
⭐️高さはheightのところで調整してください。htmlのsectionタグの中に何か書けば、CSSのこの1行書かなくてもOK。
完成見本2️⃣
html2️⃣
<section class="sample02"></section>
CSS2️⃣
.sample02 {
height: 300px;
background-color: yellowgreen;
background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0 20px, transparent 20px 40px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0 20px, transparent 20px 40px);
}
⭐️background-colorでは背景色を指定しています。
完成見本3️⃣
html3️⃣
<section class="sample03"></section>
CSS3️⃣
.sample03 {
height: 300px;
background-color: #f5f5f4;
background-image: radial-gradient(#9198e5 0 10px, transparent 10px), radial-gradient(#e66465 0 10px, transparent 10px);
background-position: 0 0, 30px 30px;
background-size: 60px 60px;
}
⭐️transparentとは透明色のこと
1️⃣を使っての活用見本
▼一番左はホバーエフェクト（マウスが乗った時の変化）で、背景が白くなって影が付くようにしました。
活用例1️⃣html
<section class="sample01">
<div class="new-items-area">
<h2>NEW ITEMS</h2>
<ul class="items-container">
<li>
<a href="#"><img src="img/item01.jpg" alt="" />Tシャツ01</a>
</li>
<li>
<a href="#"><img src="img/item02.jpg" alt="" />Tシャツ02</a>
</li>
<li>
<a href="#"><img src="img/item03.jpg" alt="" />Tシャツ03</a>
</li>
<li>
<a href="#"><img src="img/item04.jpg" alt="" />Tシャツ04</a>
</li>
</ul>
</div>
</section>
⭐️imgフォルダにitem01.jpgなどが入っている設定です。
⭐️aタグのhref内に、クリックしたら飛ぶリンク先URLを入れてください。（＃と差し替える）
活用例1️⃣CSS
body {
margin: 0;
}
.sample01 {
background-color: #f7e3da;
background-image: repeating-linear-gradient(-45deg, transparent 0 15px, #badfd7 15px 30px, #fdb7b9 30px 45px);
text-align: center;
}
.sample01 h2 {
letter-spacing: 1rem;
margin-bottom: 3rem;
}
.new-items-area {
max-width: 900px;
margin: 0 auto;
padding: 2rem;
}
.items-container {
list-style-type: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
justify-content: center;
align-items: center;
gap: 1rem;
}
.items-container li a {
display: block;
background: rgba(255, 255, 255, 0.7);
border-radius: 5px;
color: blueviolet;
text-decoration: none;
transition: 0.2s ease-in-out;
padding: 1rem;
}
.items-container li a:hover {
background: #fff;
box-shadow: 0 0 15px rgba(117, 108, 102, 0.5);
}
.items-container img {
max-width: 100%;
}
⭐️:hoverはマウスが乗った時のこと
2️⃣を使っての活用見本
活用例2️⃣html
<section class="sample02">
<div class="menu-container">
<h2>LUNCH MENU</h2>
<ul>
<li>本日のサラダ</li>
<li>スパニッシュオムレツ</li>
<li>海老のアヒージョ</li>
<li>バケット</li>
<li>魚介のパエリア</li>
<li>本日のデザート</li>
<li>コーヒーまたは紅茶</li>
</ul>
</div>
</section>
活用例2️⃣CSS
body {
margin: 0;
}
.sample02 {
width: calc(100% - 8rem);
max-width: 900px;
background-color: yellowgreen;
background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0 20px, transparent 20px 40px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0 20px, transparent 20px 40px);
text-align: center;
margin: 1rem auto;
padding: 3rem;
}
.menu-container {
background: #fff;
padding: 3rem;
}
.menu-container h2 {
color: #ca9f3a;
letter-spacing: 0.5rem;
padding: 2rem 0;
}
.menu-container h2:after {
content: '';
display: block;
width: 80px;
border-bottom: solid 0.5rem #cee6a2;
text-align: center;
margin: 3rem auto 0;
}
.menu-container ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu-container ul li {
line-height: 7rem;
letter-spacing: 0.25rem;
}
＠media (max-width: 400px) {
.sample02 {
width: calc(100% - 4rem);
margin: 0 auto;
padding: 2rem;
}
.menu-container {
padding: 2rem;
}
.menu-container h2 {
padding-top: 0;
}
.menu-container ul li {
line-height: 4rem;
letter-spacing: 0.15rem;
}
}
⭐️＠は半角のアットマークにしてください。
いかがでしたか？少しでも参考になれば幸いです🌈
【参考サイト】
🌟CSSでストライプなどの背景パターンを作る方法
https:// tamatuf.net/html-css/css-gradient-stripe/
🌟CSSだけで作る！ドット(水玉模様)やストライプ(ボーダー)、チェックのパターン
https:// www.esz.co.jp/blog/2766.html
