【CSS】画像を使用せずに、背景をストライプやチェック、レインボーにするスタイルシートをご紹介
こんにちわ。ちゃーちです。webサイト制作の際に使えるお役立ち情報をお伝えしていきたいと思います。
備忘録も含めた意味で色々とご紹介していきます。
最近、モダンブラウザ（ChromeやFireFoxなど）のシェアが上がってきているので、PCサイトでも気にせずバリバリ使っております。
ちょっとしたコードでPhotoshopを使わずに簡単に装飾出来るのでとっても便利です。
今回は背景にストライプやボーダーなど装飾を施すcssをご紹介していきたいと思います。
ボーダー(横線)による装飾
See the Pen jdGYjb by kaz (@kaz0710) on CodePen.0
ボーダー柄を実装するCSSです。配色を変えたい場合はbackground: repeating-linear-gradient(#fa2e71, #fa2e71 10px, #fff 0, #fff 20px);の中の”#fa2e71”と”#fff”をお好みのカラーコードに変更してください。
また、線の太さを変えたい場合はpxの値を変更してくださいね。
ストライプ(縦線)による装飾
See the Pen RvLyQJ by kaz (@kaz0710) on CodePen.0
ストライプ柄を実装するCSSです。配色を変えたい場合はbackground: repeating-linear-gradient(90deg, #444, #444 10px, #888 0, #888 20px);の中の”#444”と”#888”をお好みのカラーコードに変更してください。
また、線の太さを変えたい場合はpxの値を変更してくださいね。
斜めストライプによる装飾
See the Pen ErwLRW by kaz (@kaz0710) on CodePen.0
斜めストライプを実装するCSSです。ここでは回転を45degにしていますが、30degとか60degにすることで傾き具合を簡単に変更できます。また、「-（マイナス）」指定することで方向を逆にすることができます。
チェックパターンによる装飾
See the Pen gqGzBZ by kaz (@kaz0710) on CodePen.0
チェック柄を実装するCSSです。background-positionやbackground-sizeの値を変更することで大きさなど変更できます。
他と同様カラーコードを変更することで色も変えることができます。
方眼紙パターンによる装飾
See the Pen RvLyEY by kaz (@kaz0710) on CodePen.0
方眼紙のような背景を実装するCSSです。
ギンガムチェックによる装飾
See the Pen daVere by kaz (@kaz0710) on CodePen.0
ギンガムチェックを実装するCSSです。少し透過させたものを重ねることで少し違うチェック柄を表現しております。
ピンドット風パターンによる装飾
See the Pen PVJegL by kaz (@kaz0710) on CodePen.0
ピンドット風パターンを実装するCSSです。こちらもpxの値を変更することでドットのサイズを大きくしたり小さくしたりすることが可能です。もちろんドットの色も変更できますよ。
ユニークな背景パターン
See the Pen pGWVMy by kaz (@kaz0710) on CodePen.0
ユニークな背景を実装するCSSです。立体的なボックスが並んでいるような背景パターンです。（・・・いったいどこで使うんだろー？）
レインボー背景
See the Pen NoazKW by kaz (@kaz0710) on CodePen.0
レインボー背景を実装するCSSです。色が変化していきとても綺麗ですね。ただ、目がチカチカするのでご注意を！
如何でしたでしょうか？？
CSSを使って様々なパターンを表現してみました。中には絶対に使わないだろ！っていうモノもありましたが・・・。
これからもHTML・CSSでお役に立ちそうな情報をお送りしていきたいと思います。
この記事がどなたかのお役にたてれば幸いです。
最後まで読んでいただきありがとうございました。
ちゃーちでした！
-
前の記事
出雲の観光名所！出雲大社の穴場パワースポット北島国造館の白いお守り 2019.02.05
-
次の記事
それ、「冬期うつ」じゃない？！誰もがなりうる鬱をチェックシートで診断 2019.02.07