CSS text-strokeがおかしい！文字縁取りで余計な線が入る原因
-webkit-text-strokeを使って、 ↑こんな縁取り文字を作りたいのに、 ↑変な交線が入って崩れてしまったお話。 原因はフォント。Google Fontでも人気の高い、Noto Sans JPやNoto Serif JPを使って...
CSS
CSS 
CSS お手上げ？ページ内リンク位置ズレの意外な原因
どうやってもページ内リンク（アンカーリンク）のジャンプ先がズレてドはまり。 その意外な原因は、 display:inline-block でした。 ↓問題のコード <div style="max-width:768px;"> <a href...
CSS iphoneでaspect-ratioが効かない
iphoneだとsafariもChromeも効かない。PCのChromeでは問題無い。 やろうとしていることは、高さが90pxの親要素の中に正方形の子要素を作りたい。 このとき、子要素は高さをheight: 100%とし、width: au...
CSS background-blend-modeがiphoneで効かない
おそらく不具合。 回避策として、background-repeat: no-repeatにする。background-imageのサイズを241px以下にする。といったハックがあるが、そんなことはしていられない。background-ble...
CSS ページ内アンカーリンクのジャンプ位置がずれる
<a href="#price">価格</a> といったページ内リンクをすると、その途中に<img loading="lazy">があると、飛び位置がずれる。 さらに、上部のヘッダーを固定表示していると、ジャンプ後にヘッダーの下にコンテンツ...
スポンサーリンク
スポンサーリンク