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

Post on:2020年1月30日

最小マージンを使ったテクニック

幅の異なるアイテムを行に配置し、その間に（かなり大きな）ギャップがある場合、それらのアイテムが同じ行に収まらなくなるタイミングを判断するのが非常に難しい場合があります。

片側だけにマージンを与えると、揃えが破綻したり、アイテムが不規則に配置されているように見えるかもしれません。

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -2rem;
}

.column {
  margin: 10px 2rem 0; // ensures a 4rem gap between items
}

.row {

display: flex;

flex-wrap: wrap;

margin: 0 -2rem;

}

.column {

margin: 10px 2rem 0; // ensures a 4rem gap between items

}

マージンを片側に与えるのではなく、アイテム間に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: 100%; height: 100%;に設定しています。

See the Pen
Extending clickable area with ::before pseudo element by Cyd Stumpel (@Sidstumple)
on CodePen.

デベロッパーの中には、リストアイテム全体にアンカーリンクを加える人もいますが、これはスクリーンリーダーを使用しているユーザーには非常に迷惑となります。また、text-transformプロパティとcolorプロパティを定義して、すべてのテキストの標準リンクのスタイルを上書きする必要があるため、スタイル定義も面倒です。

このテクニックはボタンでも機能します🤓

writing-modeを使ったテクニック

writing modeは、文字の表示方向を設定するために使用されるCSSのプロパティです。左から右に書く方向とは異なる言語を使用する場合はもちろんですが、90度回転させたテキストを使用する場合にも非常に便利です。

テキストの回転はtransform: rotate(90deg);でも90度回転させることができますが、コンテナの幅がおかしくなります。下記のデモを見てみてください。テキストをクリックすると、回転します。

See the Pen
Writing mode by Cyd Stumpel (@Sidstumple)
on CodePen.

ピンクのボーダーがコンテナの幅です。transformとwriting-modeのどちらが期待するコンテナですか？
ただし、transformの代わりにwriting-modeを使用する場合の大きな欠点は、2つのwriting-mode間の回転をアニメーションできないことです。

padding-bottomを使ったテクニック

なぜか、padding-bottomに%を使用すると、要素の高さではなく幅が基準になります。これはおそらく利用可能な幅の100%を占めるようにしたいので、YouTubeを埋め込む時のスタイルに非常に役立ちます。height: 56.25%;では機能しませんが、padding-bottom: 56.25%;だとうまくいきます！

padding-bottom: 56.25%;の「56.25%」の値は、100%の幅に対して56.25%、つまり「16:9」の比率になります。

See the Pen
Using padding bottom to create 16:9 by Cyd Stumpel (@Sidstumple)
on CodePen.