CodePenネタです。
CSSだけでマリオを描く方法です。
HTMLとCSSはSCSSを使っています。

サンプル

元のサイズが少々大きいです。

See the Pen gridMario by ebifly (@ebifly) on CodePen.

HTML

<div class="bl_mario">
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>

  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item"></div>

  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>

  <div class="bl_mario_item"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item"></div>

  <div class="bl_mario_item"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>

  <div class="bl_mario_item"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item"></div>

  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>

  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>

  <div class="bl_mario_item"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item"></div>

  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>

  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>

  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>

  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>
  <div class="bl_mario_item bl_mario_item--yellow"></div>

  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item bl_mario_item--red"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>

  <div class="bl_mario_item"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item"></div>

  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
  <div class="bl_mario_item bl_mario_item--green"></div>
</div>

CSS(SCSS)

heightwidthを同比率で調整すればサイズを変更できます。

.bl_mario{
  display: grid;
  height:1600px;
  width:1200px;
  margin:0 auto;
  grid-template-rows: 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25%;
  grid-template-columns: 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33%;
  &_item{
    &--red{
      background-color: #db2900;
    }
    &--green{
      background-color: #8a7301;
    }
    &--yellow{
      background-color: #ffa33c;
    }
  }
}

一言

動かしたら面白そう。

コメントを投稿する

* が付いている項目は必須です。
メールアドレスが公開されることはありません。