Chrome85でリファラを適切に取る方法
Referrer-Policy ヘッダを追加する。
HTML/CSS
HTML・CSSなどのマークアップ言語やスタイルシートについて
ビューポートの設定は絶対書けよ！！！
初心者のコーダーのサイトでなぜかスマホでの表示が安定せず、ページ移動時にスクロール位置がずれる現象が起きていた。 WordPressやCloudFlareや、さまざまなJSを使っていたが、コンソールにエラーがないし、原因 …
2020年よく使うCSS
backdrop-filter ぼかし。FireFoxとIE以外は大体使える。 background-clip、text-fill-color background-clipは背景の配置調整、text-fill-colo …
CSS clip-pathの使い方
画像の切り抜きなどをCSSで行いたい場合、clip-pathが便利。ただしIEは未対応。 SVG要素も指定することができる。
target=”_blank”の脆弱性をわかりやすく
危険な理由 「リンクを開いた先のページでのJavaScriptによって、開いた元のページを操作できてしまう」から。たいていのブラウザは「target=”_blank”」によって別タブで開かれたペー …
印刷用CSSでよく設定されているパターン
@pageディレクティブでページ全体の余白の調整。 単位はmmがよく利用される。 @media print { @page { margin: 5mm; } } 印刷では、ウェブ上での１ページが複数ページになるため、見出 …
transition・animationがスムーズじゃないと思ったら
IEやEdge、Androidの一部のブラウザでは:before、:after擬似要素にtransitionやanimationをかけると、その要素がスムーズにアニメーションしなかったり、あるいは周辺の要素に同時にアニメ …
スマホ・タブレット端末のHTML・CSSコーディングで意識すべきこと
よく知られているものは、input[type=”text”]やtextareaなどでfont-size: 16px以上でないとフォーカスしたときに拡大されてしまうということ。 さらにタブレット用の …
position:fixedについて
position:fixedが効いている要素は、スクロールするたびに固定要素のビットマップと、重なりの下にあるほかの要素のビットマップをCPU上で合成する必要があり、広範囲の再描画を必要とする。 そのため、GPUアクセラ …
Sassの便利関数まとめ
2つの色を混ぜて中間色を生成 color: mix(#000, #fff, 50%); 指定した色の明度を上げる color: lighten(#000, 50%); 指定した色の明度を下げる color: darken …