どんどん文字が大きくなるブログのツイートを見ました
ブログに書いた文字がなぜかどんどん大きくなるという旨のツイートを見ました。
なんかブログの文字がどんどんデカくなるバグ起きてて怖い。https://t.co/6I1LkOM6li
— かねこゆかり「40歳ではじめて」３巻発売中✨ (@yukarikanekom) July 31, 2025
本当にどんどんデカくなっていっており、後半は画面いっぱいに文字が1つドカンと表示されていて面白かったです。面白かったが、可読性は低いですね。
文字がどんどんデカくなっていくといえば、睡蓮花の歌詞がデカくなっていく現象で話題になっていたことを思い出しました。
湘南乃風「睡蓮花」の歌詞がじわじわ巨大化する怪現象、一部の歌詞検索サイトで発生中【やじうまWatch】 - INTERNET Watch
今回なにが起きているのか気になったので、とりあえずchromeのdevtoolsを開いてHTMLを見てみました。
このサイトに画像をアップロードする機能を作っていなかったので、以下は近況報告とうなぎ : かねこゆかりの自由なメモ帳のページでdevtoolsに表示されたElementsの一部のコピペになります。
<!-- 記事本文 -->
<div class="article-body" itemprop="articleBody">
<div class="article-body-inner">
<span style="font-size: 150%;">こんにちは！
<br>
<br>親知らずの歯茎がパンパンに腫れているかねこゆかりです。
<br>
</span>
<br>疲れるとたまになります🦷
<br>
<br>
<br>
<br>
<br>
<span style="font-size: 150%;">最近はブログ更新をサボって何をしていたかというと、、</span>
<br>
<br>
<br>
<span style="font-size: 150%;">次回作の漫画制作と、
<br>新たなお仕事の制作に取り組んでおりました！
<br>
</span>
<br>
<span style="font-size: 150%;">なんとか、なんとか、、
<br>
<span>
<span style="font-size: 150%;">次のお仕事が始められそうでホッとしています。</span>
<br>
<br>
<br>
<br>
<span>
<span style="font-size: 150%;">くわしくはまた報告しますね！</span>
<br>
<br>
<br>
<br>
<span style="font-size: 150%;">あと最近のことといえば
<br>
<span style="font-size: 150%;">近所でとても良さげなうなぎ屋を発見して予約して食べに行きました！
<br>
<br>
<span style="font-size: 150%;">お店でうなぎを食べたのは3年ぶりくらい。
<br>
<br>
<br>待ちに待った焼き立ての
<br>うな重がこちら〜
<br>
<br>
<br>
<a style="font-size: x-large;" target="_blank" href="https://livedoor.blogimg.jp/kanekoyukari/imgs/6/e/6e2e0d66.jpg">
<img class="pict" id="45771987" alt="IMG_7467" height="342" width="480" src="https://livedoor.blogimg.jp/kanekoyukari/imgs/6/e/6e2e0d66-s.jpg">
</a>
<br>
<br>
<span style="font-size: 200%;">身がふわっふわ
<br>
</span>
<span style="font-size: 150%;">で最高においしかった！</span>
<br>
<br>
<span style="font-size: 150%;">歯茎が腫れる前に食べれて本当に良かった…🙏</span>
<br>
<br>
<br>
<br>
<span>
<span style="font-size: 150%;">それと最近珍しく</span>
<br>
<br>
<span style="font-size: 200%;">「あっやりたい」</span>
<br>
<br>
<br>
<span style="font-size: 150%;">と即決してやろうとしたガチャがこちら↓
<br>
<br>
<a target="_blank" href="https://livedoor.blogimg.jp/kanekoyukari/imgs/3/5/3527bede.jpg">
<img class="pict" id="45772051" alt="IMG_7468" height="562" width="480" src="https://livedoor.blogimg.jp/kanekoyukari/imgs/3/5/3527bede-s.jpg">
</a>
<br>
<br>
<br>
<span style="font-size: 150%;">
<span style="font-size: 150%;">
<span style="font-size: 150%;">
<span style="font-size: 150%;">パンどろぼう〜！！
<br>
<br>しかも実用的なやつ！
<br>
<br>
<br>残念ながら…
<br>完売だったので
<br>見つけ次第やりたいです。
<br>
<br>
<br>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
<span style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: Arial; font-size: x-large;">
<span style="font-size: 150%;">
<span style="font-size: 24px;">発売中の電子コミックスはこちら💁♀️↓</span>
<br style="font-size: 16px;">
<br style="font-size: 16px;">
</span>
</span>
<div style="font-size: 16px; margin: 0px; padding: 0px; overflow-wrap: break-word; caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: Arial; -webkit-text-size-adjust: none;" class="amazon Default">
<span style="font-size: x-large;">
<span style="font-size: 150%;">
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="pictBox" align="left">
<a style="color: rgb(0, 136, 231);" href="https://www.amazon.co.jp/dp/B0DGPWP6DF?psc=1&tag=lvdrfree-22&th=1&linkCode=osi" target="_blank">
<img style="max-width: 100%; margin: auto 10px auto 0px; padding: 12px 0px; width: auto !important;" src="https://m.media-amazon.com/images/I/512xHbaiu-L._SL160_.jpg" alt="40歳ではじめて 1 (マーガレットコミックスDIGITAL)" border="0" hspace="5" align="left" class="pict">
</a>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="itemTitle">
<a style="color: rgb(0, 136, 231);" href="https://www.amazon.co.jp/dp/B0DGPWP6DF?psc=1&tag=lvdrfree-22&th=1&linkCode=osi" target="_blank">40歳ではじめて 1 (マーガレットコミックスDIGITAL)</a>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="itemSubTxt">かねこゆかり</div>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="itemSubTxt">2024-09-25</div>
</div>
</div>
<br>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="amazon Default">
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="pictBox" align="left">
<a style="color: rgb(0, 136, 231);" href="https://www.amazon.co.jp/dp/B0DMN8SNN1?psc=1&tag=lvdrfree-22&th=1&linkCode=osi" target="_blank">
<img style="max-width: 100%; margin: auto 10px auto 0px; padding: 12px 0px; width: auto !important;" src="https://m.media-amazon.com/images/I/51hUN8QufWL._SL160_.jpg" alt="40歳ではじめて 2 (マーガレットコミックスDIGITAL)" border="0" hspace="5" align="left" class="pict">
</a>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="itemTitle">
<a style="color: rgb(0, 136, 231);" href="https://www.amazon.co.jp/dp/B0DMN8SNN1?psc=1&tag=lvdrfree-22&th=1&linkCode=osi" target="_blank">40歳ではじめて 2 (マーガレットコミックスDIGITAL)</a>
</div>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="itemSubTxt">かねこゆかり</div>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="itemSubTxt">2024-11-25</div>
</div>
<br style="clear: left;" clear="left">
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="amazon Default">
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="pictBox" align="left">
<a style="color: rgb(0, 136, 231);" href="https://www.amazon.co.jp/dp/B0F8354QT1?psc=1&tag=lvdrfree-22&th=1&linkCode=osi" target="_blank">
<img style="max-width: 100%; margin: auto 10px auto 0px; padding: 12px 0px; width: auto !important;" src="https://m.media-amazon.com/images/I/51KmP2cuRBL._SL160_.jpg" alt="40歳ではじめて 3 (マーガレットコミックスDIGITAL)" border="0" hspace="5" align="left" class="pict">
</a>
</div>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="itemTitle">
<a style="color: rgb(0, 136, 231);" href="https://www.amazon.co.jp/dp/B0F8354QT1?psc=1&tag=lvdrfree-22&th=1&linkCode=osi" target="_blank">40歳ではじめて 3 (マーガレットコミックスDIGITAL)</a>
</div>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="itemSubTxt">かねこゆかり</div>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="itemSubTxt">2025-05-23</div>
</div>
</div>
<br>
<br>
<span style="font-size: 24px;">モテない青春🧑🎓はこちら🎀
<br>
</span>
</span>
</span>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="amazon Default">
<span style="font-size: x-large;">
<span style="font-size: 150%;">
</span>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="pictBox" align="left">
<span style="font-size: 150%;">
<a style="color: rgb(0, 136, 231);" href="https://www.amazon.co.jp/dp/B01NCJVPGL?psc=1&tag=lvdrfree-22&th=1&linkCode=osi" target="_blank">
<img style="max-width: 100%; margin: auto 10px auto 0px; padding: 12px 0px; width: auto !important;" src="https://m.media-amazon.com/images/I/61KV3ibG5dL._SL160_.jpg" alt="モテないメモリー 1 (マーガレットコミックスDIGITAL)" border="0" hspace="5" align="left" class="pict">
</a>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="itemTitle">
<a style="color: rgb(0, 136, 231);" href="https://www.amazon.co.jp/dp/B01NCJVPGL?psc=1&tag=lvdrfree-22&th=1&linkCode=osi" target="_blank">モテないメモリー 1 (マーガレットコミックスDIGITAL)</a>
</div>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="itemSubTxt">かねこゆかり</div>
</span>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="itemSubTxt">
<span style="font-size: 150%;">2016-12-22
<br>
</span>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="amazon Default">
<span style="font-size: 150%;">
</span>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="pictBox" align="left">
<span style="font-size: 150%;">
<a style="color: rgb(0, 136, 231);" href="https://www.amazon.co.jp/dp/B08N6PDV67?psc=1&tag=lvdrfree-22&th=1&linkCode=osi" target="_blank">
<img style="max-width: 100%; margin: auto 10px auto 0px; padding: 12px 0px; width: auto !important;" src="https://m.media-amazon.com/images/I/51UPoFNFTXL._SL160_.jpg" alt="モテないメモリー 心惑わす○○系男子編 (マーガレットコミックスDIGITAL)" border="0" hspace="5" align="left" class="pict">
</a>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="itemTitle">
<a style="color: rgb(0, 136, 231);" href="https://www.amazon.co.jp/dp/B08N6PDV67?psc=1&tag=lvdrfree-22&th=1&linkCode=osi" target="_blank">モテないメモリー 心惑わす○○系男子編 (マーガレットコミックスDIGITAL)</a>
</div>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="itemSubTxt">かねこゆかり</div>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="itemSubTxt">2020-11-25</div>
<br>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="amazon Default">
<span style="font-size: 150%;">
</span>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="pictBox" align="left">
<span style="font-size: 150%;">
<a style="color: rgb(0, 136, 231);" href="https://www.amazon.co.jp/dp/B08N6NVJ7B?psc=1&tag=lvdrfree-22&th=1&linkCode=osi" target="_blank">
<img style="max-width: 100%; margin: auto 10px auto 0px; padding: 12px 0px; width: auto !important;" src="https://m.media-amazon.com/images/I/51Y0hgrppPL._SL160_.jpg" alt="モテないメモリー うれしはずかし黒歴史編 (マーガレットコミックスDIGITAL)" border="0" hspace="5" align="left" class="pict">
</a>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="itemTitle">
<a style="color: rgb(0, 136, 231);" href="https://www.amazon.co.jp/dp/B08N6NVJ7B?psc=1&tag=lvdrfree-22&th=1&linkCode=osi" target="_blank">モテないメモリー うれしはずかし黒歴史編 (マーガレットコミックスDIGITAL)</a>
</div>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="itemSubTxt">かねこゆかり</div>
</span>
<div style="margin: 0px; padding: 0px; overflow-wrap: break-word;" class="itemSubTxt">
<span style="font-size: 150%;">2020-11-25</span>
</div>
</div>
</div>
</span>
</div>
</div>
</div>
</div>
</span>
</div>
</div>
<span style="font-size: 150%;">
<span>
<span>
<span style="font-size: 150%;">
<span style="font-size: 150%;">
<span style="font-size: 150%;">
<span>
<span style="font-size: 150%;">
<br>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</div>
</div>
なかなか不思議な構造をしてますね。
article-body-innerというクラスのdivタグの子要素が実際の記事の中身だと思うんですが、まず改行タグを複数使うことで空白を作っていて衝撃です。
そして、spanタグがどんどんネストしてます。
<span style="font-size: 150%;">なんとか、なんとか、、
<br>
<span>
<span style="font-size: 150%;">次のお仕事が始められそうでホッとしています。</span>
<br>
<br>
<br>
<br>
<span>
<span style="font-size: 150%;">くわしくはまた報告しますね！</span>
特に段落分けしたいという意図もなさそうですが、どんどん文章が子要素にネストされていってますね。不思議な構造ですね。
そして、ネストしていくspanタグにfont-size: 150%;が付いています。
font-size - CSS: カスケーディングスタイルシート | MDN
font-sizeの指定は、smallのようなキーワードや16px、1.2remのような単位の指定もできるというのは知っていました。
あまりパーセントでの指定を見たことがなかったのです。
パーセントで指定すると、
正の
値で、親要素のフォントサイズからの相対値です。
とあるように、親要素のフォントサイズに対してそのパーセンテージのサイズになるようです。
今回のHTMLはとにかくspanタグがネストされていて、そのネストされているspanタグにfont-size: 150%;という指定があります。ところどころ200%もありますね。
つまり、ネストが深くなればなるほど(文章の後半にいけばいくほど)、相対的に文字が大きくなりますね。
150% × 150 × 150% × 150% × 150% × 150% × 150% × 150% × ... のように計算されるので、ネストが深くなればなるほど1.5倍増しされ続けていくという不思議なHTMLです。
また、HTMLの後半部分にあったこちら
<span style="font-size: 150%;">
<span>
<span>
<span style="font-size: 150%;">
<span style="font-size: 150%;">
<span style="font-size: 150%;">
<span>
<span style="font-size: 150%;">
<br>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
たぶんbrタグで作る空間の大きさを調整したくてこうなっているのだと思いますが、途中よく分からない無のspanタグもあって、ここも不思議ですね。
波動拳のやつみたいすね。
ネストの深いプログラムの if else でストリートファイターの波動拳撃ってるネタ画像を見つけるのにGoogleでキーワードを変えつつ30秒のくぐりが必要だった。 pic.twitter.com/5jGgBJZS0C
— いなうらゆうま ( 稲浦悠馬 ) (@YumaInaura) May 22, 2019
なんとなく面白かったので久々にメモがてら書きました。以上です。