

背景パターン / 方眼紙 ver.1
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Paper" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffe9a7 ; opacity : 0.4 ; z-index : -1 ; } .Paper { background-image : linear-gradient ( #ffc107 4px , transparent 4px ), linear-gradient ( 90 deg, #ffc107 4px , transparent 4px ), linear-gradient ( #ffc107 2px , transparent 2px ), linear-gradient ( 90 deg, #ffc107 2px , #ffe9a7 2px ); background-size : 100px 100px , 100px 100px , 20px 20px , 20px 20px ; background-position : -4px -4px , -4px -4px , -2px -2px , -2px -2px ; } |
背景パターン / 方眼紙 ver.2
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Paper_v2" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #fff ; z-index : -1 ; } .Paper_v 2 { background-image : repeating- linear-gradient (to bottom , transparent 25px , rgba ( 0 , 0 , 0 , 0.04 ) 26px , rgba ( 0 , 0 , 0 , 0.04 ) 26px , transparent 27px , transparent 51px , rgba ( 0 , 0 , 0 , 0.04 ) 52px , rgba ( 0 , 0 , 0 , 0.04 ) 52px , transparent 53px , transparent 77px , rgba ( 0 , 0 , 0 , 0.04 ) 78px , rgba ( 0 , 0 , 0 , 0.04 ) 78px , transparent 79px , transparent 103px , rgba ( 0 , 0 , 0 , 0.04 ) 104px , rgba ( 0 , 0 , 0 , 0.04 ) 104px , transparent 105px , transparent 129px , rgba ( 0 , 0 , 0 , 0.04 ) 130px , rgba ( 0 , 0 , 0 , 0.04 ) 130px ), repeating- linear-gradient (to right , transparent 25px , rgba ( 0 , 0 , 0 , 0.04 ) 26px , rgba ( 0 , 0 , 0 , 0.04 ) 26px , transparent 27px , transparent 51px , rgba ( 0 , 0 , 0 , 0.04 ) 52px , rgba ( 0 , 0 , 0 , 0.04 ) 52px , transparent 53px , transparent 77px , rgba ( 0 , 0 , 0 , 0.04 ) 78px , rgba ( 0 , 0 , 0 , 0.04 ) 78px , transparent 79px , transparent 103px , rgba ( 0 , 0 , 0 , 0.04 ) 104px , rgba ( 0 , 0 , 0 , 0.04 ) 104px , transparent 105px , transparent 129px , rgba ( 0 , 0 , 0 , 0.04 ) 130px , rgba ( 0 , 0 , 0 , 0.04 ) 130px ); } |
背景パターン / ひし形
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Rhombus" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffe9a7 ; opacity : 0.4 ; z-index : -1 ; } .Rhombus { background-image : linear-gradient ( 135 deg, #ffc107 25% , transparent 25% ), linear-gradient ( 225 deg, #ffc107 25% , transparent 25% ), linear-gradient ( 45 deg, #ffc107 25% , transparent 25% ), linear-gradient ( 315 deg, #ffc107 25% , #ffe9a7 25% ); background-position : 20px 0 , 20px 0 , 0 0 , 0 0 ; background-size : 20px 20px ; background-repeat : repeat ; } |
背景パターン / ジグザグ
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern ZigZag" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffe9a7 ; opacity : 0.4 ; z-index : -1 ; } .ZigZag { background-image : linear-gradient ( 135 deg, #ffc107 25% , transparent 25% ), linear-gradient ( 225 deg, #ffc107 25% , transparent 25% ), linear-gradient ( 45 deg, #ffc107 25% , transparent 25% ), linear-gradient ( 315 deg, #ffc107 25% , #ffe9a7 25% ); background-position : 20px 0 , 20px 0 , 0 0 , 0 0 ; background-size : 40px 40px ; background-repeat : repeat ; } |
背景パターン / ジグザグ 3D
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern ZigZag_3D" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffe9a7 ; opacity : 0.4 ; z-index : -1 ; } .ZigZag_ 3 D { background : linear-gradient ( 135 deg, #ffc107 55 25% , transparent 25% ) -20px 0 / 40px 40px , linear-gradient ( 225 deg, #ffc107 25% , transparent 25% ) -20px 0 / 40px 40px , linear-gradient ( 315 deg, #ffc107 55 25% , transparent 25% ) 0px 0 / 40px 40px , linear-gradient ( 45 deg, #ffc107 25% , #ffe9a7 25% ) 0px 0 / 40px 40px ; } |
背景パターン / 月
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Moon" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffe9a7 ; opacity : 0.4 ; z-index : -1 ; } .Moon { background-image : radial-gradient( ellipse farthest-corner at 20px 20px , #ffc107 , #ffc107 50% , #ffe9a7 50% ); background-size : 20px 20px ; } |
背景パターン / サークル
※ iOSのSafariだと少し見た目が変わる(改良が必要、宿題)
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Circles" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffe9a7 ; opacity : 0.4 ; z-index : -1 ; } .Circles { background-image : radial-gradient( circle at center center , #ffc107 , #ffe9a7 ), repeating-radial-gradient( circle at center center , #ffc107 , #ffc107 , 20px , transparent 40px , transparent 20px ); background-blend-mode: multiply; } |
背景パターン / 波状
※ iOSのSafariだと少し見た目が変わる(改良が必要、宿題)
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Wavy" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffe9a7 ; opacity : 0.4 ; z-index : -1 ; } .Wavy { background-image : repeating-radial-gradient( circle at 0 0 , transparent 0 , #ffe9a7 20px ), repeating- linear-gradient ( #ffc107 55, #ffc107 ); } |
背景パターン / アイソメトリック
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Isometric" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffe9a7 ; opacity : 0.4 ; z-index : -1 ; } .Isometric { background-image : linear-gradient ( 30 deg, #ffc107 12% , transparent 12.5% , transparent 87% , #ffc107 87.5% , #ffc107 ), linear-gradient ( 150 deg, #ffc107 12% , transparent 12.5% , transparent 87% , #ffc107 87.5% , #ffc107 ), linear-gradient ( 30 deg, #ffc107 12% , transparent 12.5% , transparent 87% , #ffc107 87.5% , #ffc107 ), linear-gradient ( 150 deg, #ffc107 12% , transparent 12.5% , transparent 87% , #ffc107 87.5% , #ffc107 ), linear-gradient ( 60 deg, #ffc107 77 25% , transparent 25.5% , transparent 75% , #ffc107 77 75% , #ffc107 77), linear-gradient ( 60 deg, #ffc107 77 25% , transparent 25.5% , transparent 75% , #ffc107 77 75% , #ffc107 77); background-size : 40px 70px ; background-position : 0 0 , 0 0 , 20px 35px , 20px 35px , 0 0 , 20px 35px ; } |
背景パターン / 水玉模様
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Polka" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffffff ; opacity : 0.4 ; z-index : -1 ; } .Polka { background-image : radial-gradient( #ffc107 2px , #ffffff 2px ); background-size : 20px 20px ; } |
背景パターン / 水玉模様 ver.2
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Polka_v2" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #fffff ; opacity : 0.4 ; z-index : -1 ; } .Polka_v 2 { background-image : radial-gradient( #ffc107 2px , transparent 2px ), radial-gradient( #ffc107 2px , #ffffff 2px ); background-size : 40px 40px ; background-position : 0 0 , 20px 20px ; } |
背景パターン / ボーダー ver.1
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Lines" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffe9a7 ; opacity : 0.4 ; z-index : -1 ; } .Lines { background-image : linear-gradient ( 0 deg, #ffe9a7 50% , #ffc107 50% ); background-size : 20px 20px ; } |
背景パターン / ボーダー ver.2
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Lines_v3" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffe9a7 ; opacity : 0.4 ; z-index : -1 ; } .Lines_v 3 { background-size : 40px 40px ; background-image : repeating- linear-gradient ( 0 deg, #ffc107 , #ffc107 2px , #ffe9a7 2px , #ffe9a7 ); } |
背景パターン / ストライプ ver.1
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Lines_v2" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffe9a7 ; opacity : 0.4 ; z-index : -1 ; } .Lines_v 2 { background-image : linear-gradient (to right , #ffc107 , #ffc107 10px , #ffe9a7 10px , #ffe9a7 ); background-size : 20px 100% ; } |
背景パターン / ストライプ ver.2
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Lines_v4" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffe9a7 ; opacity : 0.4 ; z-index : -1 ; } .Lines_v 4 { background-size : 40px 40px ; background-image : repeating- linear-gradient (to right , #ffc107 , #ffc107 2px , #ffe9a7 2px , #ffe9a7 ); } |
背景パターン / 斜線
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Diagonal" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffe9a7 ; opacity : 0.4 ; z-index : -1 ; } .Diagonal { background : repeating- linear-gradient ( 45 deg, #ffc107 , #ffc107 10px , #ffe9a7 10px , #ffe9a7 50px ); } |
背景パターン / 斜線 ver.2
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Diagonal_v2" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffe9a7 ; opacity : 0.4 ; z-index : -1 ; } .Diagonal_v 2 { background : repeating- linear-gradient ( -45 deg, #ffc107 , #ffc107 10px , #ffe9a7 10px , #ffe9a7 50px ); } |
背景パターン / 斜線 ver.3
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Diagonal_v3" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffe9a7 ; opacity : 0.4 ; z-index : -1 ; } .Diagonal_v 3 { background-size : 20px 20px ; background-image : repeating- linear-gradient ( 45 deg, #ffc107 0 , #ffc107 2px , #ffe9a7 0 , #ffe9a7 50% ); } |
背景パターン / 三角形
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Triangle" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffe9a7 ; opacity : 0.4 ; z-index : -1 ; } .Triangle { background-image : linear-gradient ( 45 deg, #ffc107 50% , #ffe9a7 50% ); background-size : 20px 20px ; } |
背景パターン / 三角形 ver.2
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Triangle_v2" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffe9a7 ; opacity : 0.4 ; z-index : -1 ; } .Triangle_v 2 { background-image : linear-gradient ( -45 deg, #ffe9a7 , #ffe9a7 50% , #ffc107 50% , #ffc107 ); background-size : 20px 20px ; } |
背景パターン / 三角形 ver.3
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Triangle_v3" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffe9a7 ; opacity : 0.4 ; z-index : -1 ; } .Triangle_v 3 { background-image : linear-gradient ( 45 deg, #ffc107 25% , transparent 25% ), linear-gradient ( 315 deg, #ffc107 25% , #ffe9a7 25% ); background-position : 0 0 , 20px 0 , 0 0 , 0 0 ; background-size : 20px 20px ; background-repeat : repeat ; } |
背景パターン / 三角形 ver.4
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Triangle_v4" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffe9a7 ; opacity : 0.4 ; z-index : -1 ; } .Triangle_v 4 { background-image : linear-gradient ( 135 deg, #ffc107 25% , transparent 25% ), linear-gradient ( 225 deg, #ffc107 25% , transparent 25% ); background-position : 0 0 , 20px 0 , 0 0 , 0 0 ; background-size : 20px 20px ; background-repeat : repeat ; } |
背景パターン / ボックス
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Boxes" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffe9a7 ; opacity : 0.4 ; z-index : -1 ; } .Boxes { background-image : linear-gradient ( #ffc107 2px , transparent 2px ), linear-gradient (to right , #ffc107 2px , #ffe9a7 2px ); background-size : 40px 40px ; } |
背景パターン / レクタングル
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Rectangles" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffe9a7 ; opacity : 0.4 ; z-index : -1 ; } .Rectangles { background-image : repeating- linear-gradient ( 45 deg, #ffc107 25% , transparent 25% , transparent 75% , #ffc107 75% , #ffc107 ), repeating- linear-gradient ( 45 deg, #ffc107 25% , #ffe9a7 25% , #ffe9a7 75% , #ffc107 75% , #ffc107 ); background-position : 0 0 , 20px 20px ; background-size : 40px 40px ; } |
背景パターン / 十字
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Cross" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffe9a7 ; opacity : 0.4 ; z-index : -1 ; } .Cross { background : radial-gradient( circle , transparent 20% , #ffe9a7 20% , #ffe9a7 80% , transparent 80% , transparent ), radial-gradient( circle , transparent 20% , #ffe9a7 20% , #ffe9a7 80% , transparent 80% , transparent ) 50px 50px , linear-gradient ( #ffc107 4px , transparent 4px ) 0 -2px , linear-gradient ( 90 deg, #ffc107 4px , #ffe9a7 4px ) -2px 0 ; background-size : 100px 100px , 100px 100px , 50px 50px , 50px 50px ; } |
背景パターン / 王冠
HTMLとCSSはこちら
HTML
1 | < div class = "bg_pattern Crown" ></ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .bg_pattern { position : fixed ; top : 0 ; left : 0 ; width : 100 vw; height : 100 vh; background-color : #ffe9a7 ; opacity : 0.4 ; z-index : -1 ; } .Crown { background-image : linear-gradient ( 45 deg, #ffc107 25% , transparent 25% ), linear-gradient ( 315 deg, #ffc107 25% , #ffe9a7 25% ); background-position : 10px 0 , 20px 0 , 0 0 , 0 0 ; background-size : 20px 20px ; background-repeat : repeat ; } |
さいごに

