z-indexの値は「無限」と「2147483647」どちらが強いの？
先日、前面に必ず出したい要素のz-indexにはcalc(infinity)をつけるとよい旨の情報を見ました。 確かに「無限」を指定すれば単純なz-indexの値の勝負では勝てそうな気がします。一方でz-indexマニアの間ではz-indexの上限値は2147483647[1]というのが常識になっています。ではこの「無限」と「2147483647」のどちらが強いのか検証しました。 結果 結論から言うとどちらも同じ値の扱いでした。calc(infinity)を指定しても上限値の2147483647でカンストするようです。 右の図のようにHTMLの順において後に書けば、「2147483647」が「無限」の上に来ました。 検証方法の説明 ここからは検証方法について軽く説明します。z-indexの強さは同一スタッキングコンテキスト上にある必要があります。そしてその中でz-indexが同じ値の場合は
【CSS】自分が余白のための空タグ容認派になった理由
以前は余白のための空タグはナシだったのですが最近は容認派に変わってきました。何故そのような変節を経たのか書きます。 余白用の空タグ容認派になった理由 以前は「余白用のためだけの空タグなんて！」と否定派ではあったのですが、最近は心境に変化がありました。1つはコンポーネントの限界という設計とCSSの仕様上の問題、1つはデザインの意図と実装のズレの差を埋めたいという思い、そして、余白に限らずなんだかんだで装飾用の空タグは使っている現実、この3つがあって空タグ容認派になりました。 余白とCSS設計 BEMを始めとするCSS設計においては、コンポーネント志向的アプローチで要素を分け、CSSの影響をコンポーネント内に閉じるようにし、再利用性を上げることを是としています。CSS設計がないと同じスタイリングがいくつも出てきたり、他のスタイルに依存した書き方が出てきたりとカオスになりがちなので、CSS設計は
background-imageの表示ラグ問題を（ほぼ）CSSのみで実装するCSS遅延読み込みで解決
ベストプラクティスとも限らないですが、プレーンなHTML・CSSサイトでも手軽に実装できる方法を紹介します。 background-imageの一瞬表示されない問題 CSSのbackground-imageはその画像が表示されるまで読み込まれません。例えばユーザーのアクションに応じてbackground-imageを変える場合、変更後の画像はユーザーアクションが行われてから初めて読み込まれます。（この読み込みは初回のみ行われるので、2回目以降は発生しません） 遅延表示のサンプル より具体的な現象としては、独自デザインのラジオボタンやチェックボックスをクリックした時、初回のみ一瞬遅れて表示される、というのがあります。他にもdisplay: noneで非表示にしている要素を表示させた場合でも同様の表示ラグが発生します。 ▼初回のみ表示が遅くなっている様子（分かりやすくするためにネットワーク速度
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
