【HTML5でお絵かき】サイズ変更一行追加で出来るやんと気づいた夏の終わり
｜
以前公開したHTML5とCSS3で描いたモクローさん。
↓モクロー制作はコチラ
サイズに関しては各パーツの数字をちまちま変更してたわけですが、そういや縮小・拡大するコードがあるんですよね。
……あれ？ モクロー全体囲んでるボックスにコレ追加すりゃ、パーツごとに数字いじらんでもよくね？
実際にやってみた。
CSSに追加したソース
transform: scale(数字)
これを、モクローのパーツを囲んでいるコードに加えるだけ。
↓このパーツに……
.mokuro {
margin: 15px;
padding: 20px;
position: relative;
z-index: 0;
}
↓一行加えるだけ！
.mokuro {
margin: 100px 200px;
padding: 20px;
position: relative;
z-index: 0;
transform: scale(数字)/*←追加！/*
}
()内の数字は
transform: scale(0.5)
transform: scale(2)
といった具合に入力します。(1)が元のサイズなので、小さくしたければ(1)より数字を小さく（0.8とか0.5とか）、大きくしたい時は(1)より大きな数字（1.5とか2とか）に変更しましょう。
コンパクトにひっそり佇むもよし。
無駄にでかく飾るもよし。（どこで使うかは知らん）
パーツごとに数字いじらんでも一瞬で拡大・縮小可能に！
…………
……なぜ気付かんかったし……
※大きさ変えると配置位置もずれるんでmarginもいじってください。
これを使えば、わざわざミニサイズ用のソースコードを用意しなくてもお手軽変更可能。PCとスマホでサイズ変えるのも簡単ですね。
ミニローのソースコードなんていらんかったんや……