on:2020年1月30日sponsorsWebページやスマホアプリのUIに役立つCSSの小技を4つ紹介します。56.25%;」のテクニックは16:9の比率を作成するために使用されています。Cyd下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。最小マージンを使ったテクニッククリック可能領域を広げるテクニックwriting-modeを使ったテクニックpadding-bottomを使ったテクニック最小マージンを使ったテクニック幅の異なるアイテムを行に配置し、その間に(かなり大きな)ギャップがある場合、それらのアイテムが同じ行に収まらなくなるタイミングを判断するのが非常に難しい場合があります。片側だけにマージンを与えると、揃えが破綻したり、アイテムが不規則に配置されているように見えるかもしれません。items}マージンを片側に与えるのではなく、アイテム間に4remのギャップを確保するように実装すると期待通りに配置できます。CodePen.クリック可能領域を広げるテクニックこれについては以前にも説明しましたが、アンカータグ(<a>)に::beforeのような疑似要素を加えると、親のクリック機能を継承するため、クリック可能領域を広げることができます。relative;を必ず追加してください。100%;に設定しています。CodePen.デベロッパーの中には、リストアイテム全体にアンカーリンクを加える人もいますが、これはスクリーンリーダーを使用しているユーザーには非常に迷惑となります。text-transformプロパティとcolorプロパティを定義して、すべてのテキストの標準リンクのスタイルを上書きする必要があるため、スタイル定義も面倒です。modeは、文字の表示方向を設定するために使用されるCSSのプロパティです。左から右に書く方向とは異なる言語を使用する場合はもちろんですが、90度回転させたテキストを使用する場合にも非常に便利です。rotate(90deg);でも90度回転させることができますが、コンテナの幅がおかしくなります。下記のデモを見てみてください。テキストをクリックすると、回転します。CodePen.ピンクのボーダーがコンテナの幅です。transformとwriting-modeのどちらが期待するコンテナですか?ただし、transformの代わりにwriting-modeを使用する場合の大きな欠点は、2つのwriting-mode間の回転をアニメーションできないことです。padding-bottomを使ったテクニックなぜか、padding-bottomに%を使用すると、要素の高さではなく幅が基準になります。これはおそらく利用可能な幅の100%を占めるようにしたいので、YouTubeを埋め込む時のスタイルに非常に役立ちます。56.25%;の「56.25%」の値は、100%の幅に対して56.25%、つまり「16:9」の比率になります。