CSS のレイアウトや表示の不具合と、その仕組みを扱います。古い Internet Explorer 向けの対策 (いわゆる CSS ハック) が必要だった理由と、今の CSS での書き方もあわせて説明します。
カテゴリー
CSS
記事 (8 件)
- zoom: 1 の落とし穴 ── hasLayout と番号付きリスト 古い Internet Explorer 向けに使われた zoom: 1 と hasLayout の仕組み、すべての要素に付けたときに番号付きリストの番号が崩れる理由、今の CSS での考え方を説明します。
- overflow の基本と float を囲む効果 ── IE6 との違いと display: flow-root overflow の各値の意味と、visible 以外にするとブロック整形文脈ができて中の float を囲める仕組み、古い IE でこの効果が出なかった理由、今の display: flow-root を使った書き方を説明します。
- よく書く CSS を VS Code のユーザースニペットに登録する メディアクエリやレイアウトのひな形など、よく書く CSS を VS Code のユーザースニペットに登録する方法を説明します。prefix・body・description の書き方と、$1 や ${1:既定値}、$0 によるカーソル位置の指定も扱います。
- IE6 の透過 PNG 対策と、DD_belatedPNG で画像がずれる理由 IE6 で透過 PNG を表示するために使われた AlphaImageLoader と DD_belatedPNG の仕組み、描き直した画像の位置がずれる理由、今の画像形式 (PNG、WebP、AVIF、SVG) の選び方を説明します。
- iframe の中のページには、親ページのスクリプトや CSS が効かない iframe で読み込んだページは別の文書なので、親ページの CSS やスクリプトは効きません。古い IE 向けの補正スクリプトの例を入口に、その仕組みと、今の iframe で気をつけること (title、loading、sandbox、同一オリジンポリシー) を説明します。
- data URI で小さな画像を埋め込む ── スマートフォンで効いた理由と今の使いどころ data URI で小さな画像を CSS や HTML に埋め込む書き方と、回線の遅いスマートフォンで効果が大きかった理由、サイズやキャッシュの欠点、HTTP/2 以降での使いどころを説明します。
- メディアクエリの orientation は、端末の向きではなく表示領域の形で決まる メディアクエリの orientation は、端末の向きではなくビューポートの幅と高さで決まります。デバッグ用の表示やキーボードで縦向きのまま landscape になる理由と、端末の向きの調べ方、今の iPhone のデバッグ方法を説明します。
- iOS 5 の position: fixed から考える、スマートフォンの固定表示とスクロール iOS 5 の Safari で position: fixed と、要素の中の 1 本指のスクロールが使えるようになったことを入口に、今のスマートフォン向けの固定表示とスクロールの書き方 (sticky、dvh、safe-area) を説明します。