HTML
Core Web Vitalsの値、気にしてますか？ レスポンシブでCLS対策をする時の対応を書きます。 CLSとは？ Cumulative Layout Shift は、ページがどのくらい安定しているように感じられるかを表します。視覚的な安定性を測定し、表示されるページ コンテンツにお…
Flex便利ですよね。 固定幅の横並びを実装したところIE11で崩れたので解決策です。 ul { display: flex; flex-wrap: wrap; outline: 1px solid #00f; margin: 10px auto; width: 200px; } li { box-sizing: border-box; flex-basis: 100px; outline: 1px sol…
参考ソース 参考ではちらつかないのですが… ホバーしたら大きくなる仕様 <div class="cf"> <div class="image-container"> <img class="image" src="http://via.placeholder.com/350x150"> </div> <div class="image-container"> <img class="image" src="http://via.placeholder.com/350x150"> </div> <div class="image-container"> </div></div>
<br /> を出力したくて content_tag(:br) とやったら <br></br> と出力されてしまった… content_tagじゃなくてtagを使うとのこと なるほどcontentがあるかないかの単純な話だったらしい tag知らなかった… 結果 無事brタグが出力されました tag(:br) ↓ <br />
CSSで高さを可変にして縦横比(アスペクト比)を維持する方法です。 縦横比(アスペクト比)1:1のサイズで幅に合わせて高さを可変にしたい時などに使えます。 paddingの特性を使って実現しています。さっそく使い方から。 CSSで高さを可変にして縦横比(アスペク…
コンソールで以下の様な表示が Resource interpreted as Image but transferred with MIME type text/html Resource interpreted as Image but transferred with MIME type text/css MIME type text/htmlの場合は対象のhtml MIME type text/cssの場合は対象…
Firefoxにおいてtable系でposition:relativeが効かない問題についてFirefoxのバグではなくその他ブラウザのrelativeが効いてしまうというバグらしいです。 問題の細かい話についてはこちらのブログを参照してください table系にはposition:relativeが効かな…
