CSS

レスポンシブサイトでlazysizesを使い画像遅延読み込みをした時のCore Web Vitals CLS対策

Core Web Vitalsの値、気にしてますか? レスポンシブでCLS対策をする時の対応を書きます。 CLSとは? Cumulative Layout Shift は、ページがどのくらい安定しているように感じられるかを表します。視覚的な安定性を測定し、表示されるページ コンテンツにお…

IEでflex-basisにbox-sizing: border-boxが効かない

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…

iOS Safariでz-indexの親に -webkit-overflow-scrolling: touch; overflow: auto; が設定されているとz-indexが正しく効かないバグ

CSS

モーダルやチュートリアルなどを実装していてiOS Safariだけ z-index が正しく効いていない状況があった。 簡単なサンプル codepen.io z-index の大きい要素の親に以下が設定されていると z-index が前面に来てくれないよう。 -webkit-overflow-scrolling: t…

CSS Transform Scaleを使うと画像や文字がちらつく問題

参考ソース 参考ではちらつかないのですが… ホバーしたら大きくなる仕様 <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>

CSSで高さを可変にして縦横比(アスペクト比)を維持する

CSSで高さを可変にして縦横比(アスペクト比)を維持する方法です。 縦横比(アスペクト比)1:1のサイズで幅に合わせて高さを可変にしたい時などに使えます。 paddingの特性を使って実現しています。さっそく使い方から。 CSSで高さを可変にして縦横比(アスペク…

SCSSで.sass-cacheを作らないようにする方法

SCSSをコマンドラインからコンパイルしていると.sass-cacheが作られて邪魔だったので作らない方法です。 使うのはオプションの--no-cache scss --no-cache style.css.scss > style.css sassの使い方はこちらにまとまっています。 Sassコマンドの使い方を覚え…

'Resource interpreted as Image but transferred with MIME type text/html'とコンソールに出るときの対応

コンソールで以下の様な表示が 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の場合は対象…

mixinでclearfixを使う

mixinでclearfixを使う方法です。 @mixin clearfix { zoom: 1; &:before, &:after { content: ""; display: table; } &:after { clear: both; } } header { @include clearfix; } clearfixはmicro clearfixを参考にしています。 A new micro clearfix hack –…

Firefoxにおいてtable系でposition:relativeが効かない問題

Firefoxにおいてtable系でposition:relativeが効かない問題についてFirefoxのバグではなくその他ブラウザのrelativeが効いてしまうというバグらしいです。 問題の細かい話についてはこちらのブログを参照してください table系にはposition:relativeが効かな…