gazza069のブックマーク - はてなブックマーク

【CSS】 <table>タグをCSS gridで実現する

<table>タグは表を表示するのに使うHTMLタグですが、表示のレイアウト挙動が独特です。例えばheightプロパティがmin-heightっぽく振る舞ったり、table-layoutプロパティの値をfixedにしないとwidthが効かなかったりと慣れが必要です。ほかにもcolspan属性やrowspan属性によってセルの結合ができるので、レイアウトがHTMLとも密接した関係があります。かつてはページレイアウトに必須だった時代もある歴史のあるタグですが、現代においては少し使いづらい点があります。一方でCSS Gridが登場し、柔軟なグリッドレイアウトが可能になっています。そこで<table>タグを利用しつつもCSS Gridでレイアウトを実現する方法を紹介します。 ▼実際のサンプル以下のHTMLをもとに解説していきます。 <table> <thead> <th>見出し</th> <

gazza069 2023/04/19

css

リンク

【CSS】bodyにletter-spacingを指定するのは避けた方がいい

失敗談です。例えばデザインで文字に対して一律に文字間（トラッキング）が10%かかっていた場合に、<body>タグにletter-spacing:0.1emと指定すると意図しないものになる可能性があります。 bodyタグでの指定は全ての文字間を一括で0.1emにならない <body>タグにletter-spacing: 0.1emを指定するとbodyのフォントサイズ（例:16px）に対する0.1em、つまり例のパターンだと1.6pxという固定値が一括でかかります。この場合、小さい文字では文字間が空きすぎ、大きな文字ではイマイチ空かなくなります。デザインではその文字サイズの10%を文字間を意図しているはずなので、固定値では当然ズレてきます。面倒でも個別に指定しよう letter-spacingが固定値ではなく、文字サイズに対する割合の場合、面倒でも都度指定するのが安全です。

gazza069 2022/07/26

リンク

background-imageの表示ラグ問題を（ほぼ）CSSのみで実装するCSS遅延読み込みで解決

ベストプラクティスとも限らないですが、プレーンなHTML・CSSサイトでも手軽に実装できる方法を紹介します。 background-imageの一瞬表示されない問題 CSSのbackground-imageはその画像が表示されるまで読み込まれません。例えばユーザーのアクションに応じてbackground-imageを変える場合、変更後の画像はユーザーアクションが行われてから初めて読み込まれます。（この読み込みは初回のみ行われるので、2回目以降は発生しません）遅延表示のサンプルより具体的な現象としては、独自デザインのラジオボタンやチェックボックスをクリックした時、初回のみ一瞬遅れて表示される、というのがあります。他にもdisplay: noneで非表示にしている要素を表示させた場合でも同様の表示ラグが発生します。 ▼初回のみ表示が遅くなっている様子（分かりやすくするためにネットワーク速度