プログラマなら間違い探しもプログラミングで作っちゃうよね？

この記事はだいぶ前に書かれたものなので情報が古いかもしれません

この記事を三行にまとめると

CSSで間違い探し
左のCSS
右のCSS

この記事は以下の動画の中に出てきたサンプルコードを載せたものです。コピペなどが必要なときに使ってください。

HTML部分

<div class="block">
  <div class="title">CSSで間違い探し</div>
  <div class="body">
    <img src="icon.png" />
    <span>あかつきのお宿</span>
  </div>
</div>

HTML部分は左と右で全く同じです。

左のCSS

.block {
  border: 5px #51b9d9 solid;
}

.title {
  font-size: 64px;
  color: #fff;
  background: #51b9d9;
  padding: 5px 10px;
}

.body {
  font-size: 96px;
  color: #444;
  margin: 30px;
}

span {
  font-family: "ＭＳ ゴシック";
}

img {
  width: 96px;
  vertical-align: text-bottom;
  animation:3s linear infinite rotation;
}

@keyframes rotation {
  0%{ transform:rotate(0) }
  100%{ transform:rotate(360deg) }
}

右のCSS

.block {
  border: 5px #51b9d9 dotted;
}

.title {
  font-size: 64px;
  color: #fff;
  background: #51b9d9;
  padding: 5px 10px;
  text-align: right;
}

.body {
  font-size: 96px;
  color: #444;
  padding: 30px;
}

span {
  font-family: "ＭＳ 明朝";
}

img {
  width: 96px;
  vertical-align: text-bottom;
  animation:3s linear infinite rotation;
  animation-direction: reverse;
}

@keyframes rotation {
  0%{ transform:rotate(0) }
  100%{ transform:rotate(360deg) }
}