どうも7noteです。ブロック塀をCSSだけで作る方法
完成例
複数色パターン
単色のブロック塀
index.html
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>style.css
ul{overflow:hidden;/* はみ出た部分を非表示 */border-top:solid1px#000;/* ブロックの一番上に線を記述 */}li{width:calc(100%+25px);/* 横幅を半ブロック分足す */height:20px;/* 1ブロックの高さ */background-image:repeating-linear-gradient(toright,#D2A7740%,#D2A77498%,#00098%,#000);/* ブロック、区切り線を記述 */background-size:50px100%;/* ブロックの横幅を指定 */border-bottom:solid1px#000;/* ブロックの下に線を記述 */}li:nth-child(even){position:relative;/* leftを指定するために必要 */left:-25px;/* 偶数行目のみ左に半ブロックずらす */}複数色ならCSSはこんなかんじ
style.css
ul{overflow:hidden;/* はみ出た部分を非表示 */border-top:solid1px#000;/* ブロックの一番上に線を記述 */}li{width:calc(100%+200px);/* 1ループ分ずらす */height:20px;/* 1ブロックの高さ */background-image:repeating-linear-gradient(toright,#CA9064,#CA906449px,#00049px,#00050px,#E1C09650px,#E1C09699px,#00099px,#000100px,#D0C5A6100px,#D0C5A6149px,#000149px,#000150px,#D7DAD7150px,#D7DAD7199px,#000199px,#000);/* ブロック、区切り線を記述 */background-size:200px100%;/* ブロックの横幅を指定 */border-bottom:solid1px#000;/* ブロックの下に線を記述 */position:relative;/* leftを指定するために必要 */}li:nth-child(2){left:-125px;}li:nth-child(3){left:-50px;}li:nth-child(4){left:-175px;}li:nth-child(5){left:-100px;}li:nth-child(6){left:-25px;}li:nth-child(7){left:-150px;}li:nth-child(8){left:-75px;}解説
横一列を<li>で作成し、そのなかでbackgroundをリピートさせて表現しています。
1ブロックの横幅と高さを決めてheightとbackground-sizeに指定。
あとは好きな色をbackground-image: repeating-linear-gradient()に指定して再現しています。
あまり使い所はないかもしれませんが思いついたので記事にしました。
お役に立ったのであれば幸いです。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ
