プログラミングでスライムを作ってみました！

スライムがあらわれた！

みなさんこんにちわ！今日はプログラムでこのスライムを作りあげました（笑）

これ実は縦・横それぞれ20pxの、長方形のdiv要素を集めたものです

この前のプログラミングの授業の時にcssを使いdivの練習をしていたのですが、苦手意識が高いのでこれも練習だ！！とトレーニングとしてやってみたものです。

吹き出しとスライムのバランスが悪いのは許して下さいねw

これより先にソースコードを載せて行きますので、分かる方は解読してみてくださいwスマホだとだらだらと長くなるので、ちょっと見づらいかもです(^_^;)

    
.box10{width:360px; height:300px; background:#90ee90; position:absolute;}

.a{width:20px; height:20px; background:black; position:absolute; left:180px; top:px;}
.b{width:20px; height:20px; background:black; position:absolute; left:160px; top:20px;}
.c{width:20px; height:20px; background:#5ddffe; position:absolute; left:180px; top:20px;}
.d{width:20px; height:20px; background:black; position:absolute; left:200px; top:20px;}
.e{width:20px; height:20px; background:black; position:absolute; left:160px; top:40px;}
.f{width:20px; height:20px; background:#5ddffe; position:absolute; left:180px; top:40px;}
.g{width:20px; height:20px; background:black; position:absolute; left:200px; top:40px;}
.h{width:20px; height:20px; background:black; position:absolute; left:120px; top:60px;}
.i{width:20px; height:20px; background:black; position:absolute; left:140px; top:60px;}
.j{width:20px; height:20px; background:#5ddffe; position:absolute; left:160px; top:60px;}
.k{width:20px; height:20px; background:#5ddffe; position:absolute; left:180px; top:60px;}
.l{width:20px; height:20px; background:#5ddffe; position:absolute; left:200px; top:60px;}
.m{width:20px; height:20px; background:black; position:absolute; left:220px; top:60px;}
.n{width:20px; height:20px; background:black; position:absolute; left:240px; top:60px;}
.o{width:20px; height:20px; background:black; position:absolute; left:80px; top:80px;}
.p{width:20px; height:20px; background:black; position:absolute; left:100px; top:80px;}
.q{width:20px; height:20px; background:white; position:absolute; left:120px; top:80px;}
.r{width:20px; height:20px; background:white; position:absolute; left:140px; top:80px;}
.s{width:20px; height:20px; background:white; position:absolute; left:160px; top:80px;}
.t{width:20px; height:20px; background:#5ddffe; position:absolute; left:180px; top:80px;}
.u{width:20px; height:20px; background:#02a6fd; position:absolute; left:200px; top:80px;}
.v{width:20px; height:20px; background:#5ddffe; position:absolute; left:220px; top:80px;}
.w{width:20px; height:20px; background:#5ddffe; position:absolute; left:240px; top:80px;}
.x{width:20px; height:20px; background:black; position:absolute; left:260px; top:80px;}
.y{width:20px; height:20px; background:black; position:absolute; left:280px; top:80px;}
.z{width:20px; height:20px; background:black; position:absolute; left:60px; top:100px;}
.aa{width:20px; height:20px; background:white; position:absolute; left:80px; top:100px;}
.ab{width:20px; height:20px; background:white; position:absolute; left:100px; top:100px;}
.ac{width:20px; height:20px; background:white; position:absolute; left:120px; top:100px;}
.ad{width:20px; height:20px; background:#5ddffe; position:absolute; left:140px; top:100px;}
.ae{width:20px; height:20px; background:#5ddffe; position:absolute; left:160px; top:100px;}
.af{width:20px; height:20px; background:#5ddffe; position:absolute; left:180px; top:100px;}
.ag{width:20px; height:20px; background:#5ddffe; position:absolute; left:200px; top:100px;}
.ah{width:20px; height:20px; background:#02a6fd; position:absolute; left:220px; top:100px;}
.ai{width:20px; height:20px; background:#5ddffe; position:absolute; left:240px; top:100px;}
.aj{width:20px; height:20px; background:#5ddffe; position:absolute; left:260px; top:100px;}
.ak{width:20px; height:20px; background:#5ddffe; position:absolute; left:280px; top:100px;}
.al{width:20px; height:20px; background:black; position:absolute; left:300px; top:100px;}
.am{width:20px; height:20px; background:black; position:absolute; left:40px; top:120px;}
.an{width:20px; height:20px; background:#5ddffe; position:absolute; left:60px; top:120px;}
.ao{width:20px; height:20px; background:white; position:absolute; left:80px; top:120px;}
.ap{width:20px; height:20px; background:#5ddffe; position:absolute; left:100px; top:120px;}
.aq{width:20px; height:20px; background:#5ddffe; position:absolute; left:120px; top:120px;}
.ar{width:20px; height:20px; background:#5ddffe; position:absolute; left:140px; top:120px;}
.as{width:20px; height:20px; background:#5ddffe; position:absolute; left:160px; top:120px;}
.at{width:20px; height:20px; background:#5ddffe; position:absolute; left:180px; top:120px;}
.au{width:20px; height:20px; background:#5ddffe; position:absolute; left:200px; top:120px;}
.av{width:20px; height:20px; background:#02a6fd; position:absolute; left:220px; top:120px;}
.aw{width:20px; height:20px; background:#02a6fd; position:absolute; left:240px; top:120px;}
.ax{width:20px; height:20px; background:#02a6fd; position:absolute; left:260px; top:120px;}
.ay{width:20px; height:20px; background:#5ddffe; position:absolute; left:280px; top:120px;}
.az{width:20px; height:20px; background:#5ddffe; position:absolute; left:300px; top:120px;}
.ba{width:20px; height:20px; background:black; position:absolute; left:20px; top:140px;}
.bb{width:20px; height:20px; background:#5ddffe; position:absolute; left:40px; top:140px;}
.bc{width:20px; height:20px; background:#5ddffe; position:absolute; left:60px; top:140px;}
.bd{width:20px; height:20px; background:#5ddffe; position:absolute; left:80px; top:140px;}
.be{width:20px; height:20px; background:#5ddffe; position:absolute; left:100px; top:140px;}
.bf{width:20px; height:20px; background:#5ddffe; position:absolute; left:120px; top:140px;}
.bg{width:20px; height:20px; background:white; position:absolute; left:140px; top:140px;}
.bh{width:20px; height:20px; background:#5ddffe; position:absolute; left:160px; top:140px;}
.bi{width:20px; height:20px; background:#5ddffe; position:absolute; left:180px; top:140px;}
.bj{width:20px; height:20px; background:#02a6fd; position:absolute; left:200px; top:140px;}
.bk{width:20px; height:20px; background:white; position:absolute; left:220px; top:140px;}
.bl{width:20px; height:20px; background:#02a6fd; position:absolute; left:240px; top:140px;}
.bm{width:20px; height:20px; background:#02a6fd; position:absolute; left:260px; top:140px;}
.bn{width:20px; height:20px; background:#02a6fd; position:absolute; left:280px; top:140px;}
.bo{width:20px; height:20px; background:#5ddffe; position:absolute; left:300px; top:140px;}
.bp{width:20px; height:20px; background:#5ddffe; position:absolute; left:320px; top:140px;}
.bq{width:20px; height:20px; background:black; position:absolute; left:320px; top:120px;}
.br{width:20px; height:20px; background:black; position:absolute; left:340px; top:140px;}
.bs{width:20px; height:20px; background:black; position:absolute; left:20px; top:160px;}
.bt{width:20px; height:20px; background:#5ddffe; position:absolute; left:40px; top:160px;}
.bu{width:20px; height:20px; background:#5ddffe; position:absolute; left:60px; top:160px;}
.bv{width:20px; height:20px; background:#02a6fd; position:absolute; left:80px; top:160px;}
.bw{width:20px; height:20px; background:#5ddffe; position:absolute; left:100px; top:160px;}
.bx{width:20px; height:20px; background:white; position:absolute; left:120px; top:160px;}
.by{width:20px; height:20px; background:black; position:absolute; left:140px; top:160px;}
.bz{width:20px; height:20px; background:white; position:absolute; left:160px; top:160px;}
.ca{width:20px; height:20px; background:#02a6fd; position:absolute; left:180px; top:160px;}
.cb{width:20px; height:20px; background:white; position:absolute; left:200px; top:160px;}
.cc{width:20px; height:20px; background:black; position:absolute; left:220px; top:160px;}
.cd{width:20px; height:20px; background:white; position:absolute; left:240px; top:160px;}
.ce{width:20px; height:20px; background:#02a6fd; position:absolute; left:260px; top:160px;}
.cf{width:20px; height:20px; background:#02a6fd; position:absolute; left:280px; top:160px;}
.cg{width:20px; height:20px; background:#5ddffe; position:absolute; left:300px; top:160px;}
.ch{width:20px; height:20px; background:#5ddffe; position:absolute; left:320px; top:160px;}
.ci{width:20px; height:20px; background:black; position:absolute; left:340px; top:160px;}
.cj{width:20px; height:20px; background:black; position:absolute; left:20px; top:180px;}
.ck{width:20px; height:20px; background:#5ddffe; position:absolute; left:40px; top:180px;}
.cl{width:20px; height:20px; background:#02a6fd; position:absolute; left:60px; top:180px;}
.cm{width:20px; height:20px; background:#02a6fd; position:absolute; left:80px; top:180px;}
.cn{width:20px; height:20px; background:#02a6fd; position:absolute; left:100px; top:180px;}
.co{width:20px; height:20px; background:#02a6fd; position:absolute; left:120px; top:180px;}
.cp{width:20px; height:20px; background:white; position:absolute; left:140px; top:180px;}
.cq{width:20px; height:20px; background:#02a6fd; position:absolute; left:160px; top:180px;}
.cr{width:20px; height:20px; background:#02a6fd; position:absolute; left:180px; top:180px;}
.cs{width:20px; height:20px; background:#02a6fd; position:absolute; left:200px; top:180px;}
.ct{width:20px; height:20px; background:white; position:absolute; left:220px; top:180px;}
.cu{width:20px; height:20px; background:#02a6fd; position:absolute; left:240px; top:180px;}
.cv{width:20px; height:20px; background:#02a6fd; position:absolute; left:260px; top:180px;}
.cw{width:20px; height:20px; background:#02a6fd; position:absolute; left:280px; top:180px;}
.cx{width:20px; height:20px; background:#5ddffe; position:absolute; left:300px; top:180px;}
.cy{width:20px; height:20px; background:#5ddffe; position:absolute; left:320px; top:180px;}
.cz{width:20px; height:20px; background:black; position:absolute; left:340px; top:180px;}
.da{width:20px; height:20px; background:black; position:absolute; left:340px; top:180px;}
.db{width:20px; height:20px; background:black; position:absolute; left:20px; top:200px;}
.dc{width:20px; height:20px; background:#5ddffe; position:absolute; left:40px; top:200px;}
.dd{width:20px; height:20px; background:#02a6fd; position:absolute; left:60px; top:200px;}
.de{width:20px; height:20px; background:#02a6fd; position:absolute; left:80px; top:200px;}
.df{width:20px; height:20px; background:#02a6fd; position:absolute; left:100px; top:200px;}
.dg{width:20px; height:20px; background:red; position:absolute; left:120px; top:200px;}
.dh{width:20px; height:20px; background:#02a6fd; position:absolute; left:140px; top:200px;}
.di{width:20px; height:20px; background:#02a6fd; position:absolute; left:160px; top:200px;}
.dj{width:20px; height:20px; background:#02a6fd; position:absolute; left:180px; top:200px;}
.dk{width:20px; height:20px; background:#02a6fd; position:absolute; left:200px; top:200px;}
.dl{width:20px; height:20px; background:#02a6fd; position:absolute; left:220px; top:200px;}
.dm{width:20px; height:20px; background:red; position:absolute; left:240px; top:200px;}
.dn{width:20px; height:20px; background:#02a6fd; position:absolute; left:260px; top:200px;}
.do{width:20px; height:20px; background:#02a6fd; position:absolute; left:280px; top:200px;}
.dp{width:20px; height:20px; background:#5ddffe; position:absolute; left:300px; top:200px;}
.dq{width:20px; height:20px; background:#5ddffe; position:absolute; left:320px; top:200px;}
.dr{width:20px; height:20px; background:black; position:absolute; left:340px; top:200px;}
.ds{width:20px; height:20px; background:black; position:absolute; left:40px; top:220px;}
.dt{width:20px; height:20px; background:#5ddffe; position:absolute; left:60px; top:220px;}
.du{width:20px; height:20px; background:#02a6fd; position:absolute; left:80px; top:220px;}
.dv{width:20px; height:20px; background:#02a6fd; position:absolute; left:100px; top:220px;}
.dw{width:20px; height:20px; background:#02a6fd; position:absolute; left:120px; top:220px;}
.dx{width:20px; height:20px; background:red; position:absolute; left:140px; top:220px;}
.dy{width:20px; height:20px; background:red; position:absolute; left:160px; top:220px;}
.dz{width:20px; height:20px; background:red; position:absolute; left:180px; top:220px;}
.ea{width:20px; height:20px; background:red; position:absolute; left:200px; top:220px;}
.eb{width:20px; height:20px; background:red; position:absolute; left:220px; top:220px;}
.ec{width:20px; height:20px; background:#02a6fd; position:absolute; left:240px; top:220px;}
.ed{width:20px; height:20px; background:#02a6fd; position:absolute; left:260px; top:220px;}
.ee{width:20px; height:20px; background:#02a6fd; position:absolute; left:280px; top:220px;}
.ef{width:20px; height:20px; background:#5ddffe; position:absolute; left:300px; top:220px;}
.eg{width:20px; height:20px; background:black; position:absolute; left:320px; top:220px;}
.eh{width:20px; height:20px; background:black; position:absolute; left:60px; top:240px;}
.ei{width:20px; height:20px; background:#5ddffe; position:absolute; left:80px; top:240px;}
.ej{width:20px; height:20px; background:#02a6fd; position:absolute; left:100px; top:240px;}
.ek{width:20px; height:20px; background:#02a6fd; position:absolute; left:120px; top:240px;}
.el{width:20px; height:20px; background:#02a6fd; position:absolute; left:140px; top:240px;}
.em{width:20px; height:20px; background:#02a6fd; position:absolute; left:160px; top:240px;}
.en{width:20px; height:20px; background:#02a6fd; position:absolute; left:180px; top:240px;}
.eo{width:20px; height:20px; background:#02a6fd; position:absolute; left:200px; top:240px;}
.ep{width:20px; height:20px; background:#02a6fd; position:absolute; left:220px; top:240px;}
.eq{width:20px; height:20px; background:#02a6fd; position:absolute; left:240px; top:240px;}
.er{width:20px; height:20px; background:#02a6fd; position:absolute; left:260px; top:240px;}
.es{width:20px; height:20px; background:#5ddffe; position:absolute; left:280px; top:240px;}
.et{width:20px; height:20px; background:black; position:absolute; left:300px; top:240px;}
.eu{width:20px; height:20px; background:black; position:absolute; left:80px; top:260px;}
.ev{width:20px; height:20px; background:black; position:absolute; left:100px; top:260px;}
.ew{width:20px; height:20px; background:#02a6fd; position:absolute; left:120px; top:260px;}
.ex{width:20px; height:20px; background:#02a6fd; position:absolute; left:140px; top:260px;}
.ey{width:20px; height:20px; background:#02a6fd; position:absolute; left:160px; top:260px;}
.ez{width:20px; height:20px; background:#02a6fd; position:absolute; left:180px; top:260px;}
.fm{width:20px; height:20px; background:#02a6fd; position:absolute; left:200px; top:260px;}
.fb{width:20px; height:20px; background:#02a6fd; position:absolute; left:220px; top:260px;}
.fc{width:20px; height:20px; background:#02a6fd; position:absolute; left:240px; top:260px;}
.fd{width:20px; height:20px; background:black; position:absolute; left:260px; top:260px;}
.fe{width:20px; height:20px; background:black; position:absolute; left:280px; top:260px;}
.ff{width:20px; height:20px; background:black; position:absolute; left:120px; top:280px;}
.fg{width:20px; height:20px; background:black; position:absolute; left:140px; top:280px;}
.fh{width:20px; height:20px; background:black; position:absolute; left:160px; top:280px;}
.fi{width:20px; height:20px; background:black; position:absolute; left:180px; top:280px;}
.fj{width:20px; height:20px; background:black; position:absolute; left:200px; top:280px;}
.fk{width:20px; height:20px; background:black; position:absolute; left:220px; top:280px;}
.fl{width:20px; height:20px; background:black; position:absolute; left:240px; top:280px;}

こんな具合にcssを記述し、あとはdivにclassの名前を付けていきます。今回の場合は分かりやすく、a,b,c,d....という風にアルファベット順にしてあります。

cssの説明は以下の通りです。

div style="border-style: dashed;"=スライムがあらわれた！の周りにあるボーダーの種類です。破線は「dashed」で記述できます。

box10=スライムの背景にある大きな背景のように見えるdiv（箱）です。

width=横の長さ20px

height=縦の長さ20px

background=背景色

position:absolute;=絶対値からの位置変更

left=右へ移動

top=上から下へ移動

このように長方形のdiv（箱）を右、下に移動させる事でイラストを描いたように見せて居ます。

divやclassの練習にはなるかと思い、時間は掛かりましたがやってみましたw