紙媒体だとよく使う方眼背景をCSSで実装。linear-gradientを使う場合とrepeating-linear-gradient()を使う場合を考える。
どちらも縦ストライプと横ストライプをbackground-imageに指定するのは同じ。
「linear-gradient」で方眼サイズを描いてみる
方眼サイズが32px四方、線は1pxの方眼を描くなら、
縦ストライプ：linear-gradient(90deg, transparent 31px, #333 32px)
横ストライプ：linear-gradient(0deg, transparent 31px, #333 32px)
これらを,（カンマ）区切りでbackground-imageに指定し、
background-sizeで方眼サイズを指定する。
.stripe-stripe{
background-size: 32px 32px ;
background-color: rgba(251, 215, 74, 1);
background-image: linear-gradient(90deg, transparent 31px, #333 32px), linear-gradient(0deg, transparent 31px, #333 32px);
}
サンプル１
「repeating-linear-gradient」で方眼サイズを描いてみる
.stripe-stripe2{
background-color: rgba(251, 215, 74, 1);
background-image: repeating-linear-gradient(90deg, transparent, transparent 31px, #333 31px, #333 32px), repeating-linear-gradient(0deg, transparent, transparent 31px, #333 31px, #333 32px);
}
サンプル2
両者の違いをどう考え、使い分けるか
考え中（というか時間切れ・・・）
