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

WebページやスマホアプリのUIに役立つCSSの小技を4つ紹介します。
例えば、YouTubeで使用されている「padding–bottom: 56.25%;」のテクニックは16:9の比率を作成するために使用されています。

サイトのキャプチャ

4 CSS tricks that will get you dirty looks from other developers
by Cyd

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

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

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

デモのキャプチャ

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

マージンを片側に与えるのではなく、アイテム間に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.

sponsors

top of page

©2020 coliss