この記事は巷であふれている「flex: 1; + text-overflow: ellipsis; の組み合わせが罠だから min-width: 0; をつけよ」という記事になります。 それを知った今検索すると、嫌でも目に付く内容なのですが、実装しているときはまったく気づくことができず沼っ…

スプライト画像をアニメーションさせながら、座標移動も適応する方法に単純ながら四苦八苦したので記録に残します。 前準備 <div class='img-container'> </div> .img-container { width: 700px; height: 100px; margin: 100px auto 0; border: 1px solid #000000; font-size: 0; } 上のボーダ…

flexboxで解決できる話ですが、自分のGoogle力が低くてなかなか解決方法にたどり着けませんでした。flexboxの使い方ではなくこのシチュエーションの解決方法としてまとめておきます。 前準備 <div class='img-container'> <img src='img/large.png' alt=''> <img src='img/small.png' alt=''> </div> .img-container { width:700px; margin: 100px auto 0; borde…