今回はおしゃれな背景のチェック枠を使ってみたいと思います。
参考にした記事はこちら！
チェック背景ボックス
<div style="border: none; background-color: #ffffff; background-image: linear-gradient(-45deg,rgba(236, 232, 225, 0.5) 25%, transparent 25%, transparent 50%, rgba(236, 232, 225, 0.5) 50%, rgba(236, 232, 225, 0.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(236, 232, 225, 0.5) 25%, transparent 25%, transparent 50%, rgba(236, 232, 225, 0.5) 50%, rgba(236, 232, 225, 0.5) 75%, transparent 75%, transparent 100%); background-size: 40px 40px; transform: rotate(0deg); padding: 15px;"><div style="background-color: rgba(255, 255, 255, 0.8); border: none; width: 94%; padding: 10px;">ここに文字</div></div>
このコードをHTML編集画面に貼り付けるとこうなります↓
チェックを表現するために透過カラーが使用されています。
#ではなくrgba(数字, 数字, 数字, 数字)で表されているところ。
変換に便利なツールがあります↓
カラーコードからrgbaへ変換するツール【css】 | WEBクリエイターの部屋
考える人、すごいですね！
色を変えてバリエーションを作ってみます。
使いたい色を原色辞典で選んでから、rgba変換ツールを使って数字に変換して、6か所入れ替えます。
ピンク系
<div style="border: none; background-color: #ffffff; background-image: linear-gradient(-45deg,rgba(245, 236, 244, 0.5) 25%, transparent 25%, transparent 50%, rgba(245, 236, 244, 0.5) 50%, rgba(245, 236, 244, 0.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(245, 236, 244, 0.5) 25%, transparent 25%, transparent 50%, rgba(245, 236, 244, 0.5) 50%, rgba(245, 236, 244, 0.5) 75%, transparent 75%, transparent 100%); background-size: 40px 40px; transform: rotate(0deg); padding: 15px;">
<div style="background-color: rgba(255, 255, 255, 0.8); border: none; width: 94%; padding: 10px;">ここに文字</div>
</div>
緑系
<div style="border: none; background-color: #ffffff; background-image: linear-gradient(-45deg,rgba(190,210,195,0.5) 25%, transparent 25%, transparent 50%, rgba(190,210,195,0.5) 50%, rgba(190,210,195,0.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(190,210,195,0.5) 25%, transparent 25%, transparent 50%, rgba(190,210,195,0.5) 50%, rgba(190,210,195,0.5) 75%, transparent 75%, transparent 100%); background-size: 40px 40px; transform: rotate(0deg); padding: 15px;">
<div style="background-color: rgba(255, 255, 255, 0.8); border: none; width: 94%; padding: 10px;">ここに文字</div>
</div>
水色系
<div style="border: none; background-color: #ffffff; background-image: linear-gradient(-45deg,rgba(240,248,255,0.5) 25%, transparent 25%, transparent 50%, rgba(240,248,255,0.5) 50%, rgba(240,248,255,0.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(240,248,255,0.5) 25%, transparent 25%, transparent 50%, rgba(240,248,255,0.5) 50%, rgba(240,248,255,0.5) 75%, transparent 75%, transparent 100%); background-size: 40px 40px; transform: rotate(0deg); padding: 15px;">
<div style="background-color: rgba(255, 255, 255, 0.8); border: none; width: 94%; padding: 10px;">ここに文字</div>
</div>
色を変えるのに6か所編集しないといけないのがたいへんですが、チェック柄かわいいですね！
