【css3】縞（シマ）模様や、チェック、ストライプなどの背景を簡単に表現できる便利なジェネレーター

2016年9月25日

コーディング作業に入る前にデザインを確認していると、
ん？背景色がなんかベタ塗りじゃないぞ？斜めにシマシマ模様になっている。。。
なんじゃこりゃー！と思ったことがあったのですが、css3のlinear-gradientを使ったら表現できる内容でした！笑
いやー色んな技術がありますね！

早速、どう書けばいいかサンプルサイトのcss記述を確認してみると下記のようになっていました。

.sample {
background: linear-gradient(-45deg, #1e5c22, #1e5c22 25%, #356d39 25%, #356d39 50%,
#1e5c22 50%, #1e5c22 75%, #356d39 75%,#356d39);
background-size: 4px 4px;
}

.sample {

background: linear-gradient(-45deg, #1e5c22, #1e5c22 25%, #356d39 25%, #356d39 50%,

#1e5c22 50%, #1e5c22 75%, #356d39 75%,#356d39);

background-size: 4px 4px;

}

これを手書きで書いていくのは面倒くさいなーと思って調べたら、すぐに見つかりました、ジェネレーター！

縞（シマ）模様、チェック、ストライプなどを作成できるジェネレーター

http://www.horihavalabo.jp/cssgen/

サイト内は上記のようなインターフェースになっていて、直感的に操作がしやすくなっていました。
背景色、ストライプ、幅を入力すると自動でコードが生成されるので、コピペでcssファイルに貼り付けます。
あとは、コーディングしているサイトの検証端末、ブラウザに必要な記述のみを残して不要な記述を削除すればOK！

簡単ですね♪