昔懐かし、HTMLの復習
pの中になぜdivタグは入れられないのか 説明するときにいまいち体系的に説明できなかったので、復習をしてみた。 概要 HTML5より前は、インライン要素とブロックレベル要素の2種類のみで、ブロックレベル要素はブロックレベ …
HTML/CSS
HTML・CSSなどのマークアップ言語やスタイルシートについて
CSSのfont-familyの指定での何気ないシーン（総称フォントの指定について）
スペースを含むフォント名を指定するときは、引用符をつける必要があるが、それ以外はつける必要がないという初心者がよくハマる罠があるが、serif、sans-serifなどを指定する際にそのミスを見たことがないのはなぜか？ …
ブラウザでなぜか cursor: pointer; の指定が効かない場合
なる人とならない人がいた。CSSで指定してみても改善されず、原因どころか、現象を確認できるようにする手順さえも不明だった。調べてみると、Adobe Photoshopを立ち上げていることが原因のよう。Photoshopを …
positon: stickyでそろそろ楽してこ
https://caniuse.com/?search=sticky 備忘録。IE以外でほぼ使えるようになっていたこと知らなかった。
imgタグには必ずwidthとheight属性を記述する
レスポンシブデザインが流行ってからすっかりwidth属性とheight属性は見なくなったが、これらは必ず記述する必要がある。 理由としては昨今各ブラウザでレイアウトシフト（一度サイズを計算してから再度計算をし直す実装をす …
ダークモード対応基礎
prefers-color-schemeを使用してCSSやJavaScriptを使って判定をする。 機能はオンオフできるようにするというアクセシビリティの原則に基づき、チェックボックスなどでダークモードをオンオフできるよ …
Chrome85でリファラを適切に取る方法
Referrer-Policy ヘッダを追加する。
ビューポートの設定は絶対書けよ！！！
初心者のコーダーのサイトでなぜかスマホでの表示が安定せず、ページ移動時にスクロール位置がずれる現象が起きていた。 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要素も指定することができる。