この記事は最終更新日から1年以上経過して情報が古い可能性があります。
実は、何年か前から何度かやったことがあるんですが、画像を使わずHTMLタグとCSSだけでドラえもんを描いてみようというやつです。
別にどうということもないネタなんですが、まだできてなかったことが何となく気になったのでやってみました。
で、ようやくうまく描けました。
ちなみに、元ネタは10年くらい前のQiitaのこちらの記事です。
アメブロで↑この方法を使ってドラえもんを描くと、PCとスマホブラウザではちゃんと表示されますが、Amebaアプリだと↓こうなります。
「ドラちゃんのエッチ！！」と、しずかちゃんに張り手を食らったのかと思いました（笑）
ちなみに、このときの記事エディタの表示は↓こんな感じです。
これを見る限り、アメブロの記事エディタは、どうやらdivタグの背景色がデフォルトで白になっているようです。
でもまあ、ちょっとおかしなところはあるものの、レイアウトだけはうまくいっていますので、アプリでの表示とは全然違います。
というわけで、これを元に直していきます。
元ネタの記事ではHTMLとCSSを分けて書いてあるんですが、スマホやアプリではユーザーが書いたCSSを読んでくれないアメブロとは相性が悪いので、スタイルを全てHTMLタグの属性に書いていくことにします。
なお、元ネタでは横位置を％指定している部分があるのと、直径が500ピクセルあってスマホ画面の横幅に比べて大きいので、横方向に潰れてしまう理由がその辺りにありそうだと思い、直径は300ピクセルで、横位置指定は全てピクセル指定する方針でやってみました。
以下、途中経過を載せていきます。
↓縮小途中です。ちょっと怖い。
↓かなりいい感じになってきました。
↓あれ？耳が生えました。
↓うわっ！顔…
↓もう少し！！
というわけで、完成品は、↓こちら↓です。
画像に見えると思いますが、画像ではありません。
そして、アプリでもちゃんとドラえもんに見えるはず。たぶん。
↓一応、タグも載せておきます。
<div style="position:absolute;left:19px;top:51px;width:258px;height:246px;overflow:visible;border:2px solid #000;border-radius:50%;background:#fff;">
<div style="position:absolute;left:-4px;top:56px;width:262px;height:60px;border:2px solid #000;border-top-color:#fff;border-radius:99px;background:#fff;">
<div style="position:absolute;left:-2px;bottom:-2px;width:60px;height:60px;border:2px solid #000;border-right-color:#fff;border-radius:99px 99px 0 99px;"> </div>
<div style="position:absolute;right:-2px;bottom:-2px;width:60px;height:60px;border:2px solid #000;border-left-color:#fff;border-radius:99px 99px 99px 0;"> </div>
</div>
<div style="position:absolute;left:63px;top:-43px;width:63px;height:102px;border:2px solid #000;border-radius:49%;background:#fff;">
<div style="position:absolute;left:29px;top:52px;width:23px;height:35px;border-radius:48%;background:#fff;box-shadow:0 0 0 8px #000 inset;"> </div>
</div>
<div style="position:absolute;right:63px;top:-43px;width:63px;height:102px;border:2px solid #000;border-radius:49%;background:#fff;">
<div style="position:absolute;right:29px;top:52px;width:23px;height:35px;box-shadow:0 0 0 8px #000 inset;border-radius:48%;background:#fff;"> </div>
</div>
<div style="position:absolute;left:113px;top:40px;width:30px;height:30px;border:2px solid #000;border-radius:50%;background:#fff;box-shadow:-6px -3px 0 9px #e61d26 inset;"> </div>
<div style="position:absolute;left:128px;top:73px;width:2px;height:48px;background:#000;"> </div>
<div style="position:absolute;left:-5px;top:58px;background:transparent;">
<div style="width:101px;height:0;margin-bottom:24px;border:1px solid #000;transform:rotate(195deg);"> </div>
<div style="width:101px;height:0;margin-bottom:24px;border:1px solid #000;"> </div>
<div style="width:101px;height:0;margin-bottom:24px;border:1px solid #000;transform:rotate(165deg);"> </div>
</div>
<div style="position:absolute;right:-5px;top:58px;background:transparent;">
<div style="width:101px;height:0;margin-bottom:24px;border:1px solid #000;transform:rotate(165deg);"> </div>
<div style="width:101px;height:0;margin-bottom:24px;border:1px solid #000;"> </div>
<div style="width:101px;height:0;margin-bottom:24px;border:1px solid #000;transform:rotate(195deg);"> </div>
</div>
<div style="position:absolute;left:23px;bottom:19px;width:210px;height:105px;overflow:hidden;border:2px solid;border-radius:0 0 600px 600px;background:#ec2b26;">
<div style="position:absolute;left:45px;bottom:-47px;width:120px;height:105px;border:2px solid #000;border-radius:600px;background:#f17134;"> </div>
</div>
</div>
</div>
何といいますか、個人的に長く遊ばせてもらったネタですが、これで終わりですかね。
