WebページやスマホアプリのUIに役立つ、知っておくと便利なCSSの小技

マージンを片側に与えるのではなく、アイテム間に4remのギャップを確保するように実装すると期待通りに配置できます。 See the Pen Using min margins by Cyd Stumpel (@Sidstumple) on CodePen. クリック可能領域を広げるテクニック これについては以前にも説明しましたが、アンカータグ（<a>）に::beforeのような疑似要素を加えると、親のクリック機能を継承するため、クリック可能領域を広げることができます。 クリック可能領域の参照として使用する要素には、position: relative;を必ず追加してください。 下記のデモでは、.list-item全体にposition: relative;を、疑似要素にposition: absolute;を使用し、top, left, right, bottomを0またはwidth: 1

[coliss]

WebページやスマホアプリのUIに役立つCSSの小技集。

[bleu-bleut]

3. クリック可能領域を広げるテクニック。

[sigwyg]

“eight: 56.25%;では機能しませんが、padding-bottom: 56.25%;だとうまくいきます！ padding-bottom: 56.25%;の「56.25%」の値は、100%の幅に対して56.25%、つまり「16:9」の比率になります”

[Funyapu]

"padding-bottomに%を使用すると、要素の高さではなく幅が基準になります。"