on:2019年12月3日sponsorsCSSの疑似要素は非常に便利です。疑似要素:beforeと:afterを使用したUI要素を実装する便利なテクニックを紹介します。Webページやスマホアプリで使えるUI要素をはじめ、クリック・タップ可能領域を広げたり、:afterと:beforeのどちらを使うべきかなど、知っておくと役立つ疑似要素のテクニックです。Shadeed下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。終わりに疑似要素で、親子のホバーエフェクト疑似要素はその親要素に属しているため、それを利用したテクニックがいくつかあります。分かりやすい例を使用して説明します。Title)があり、その左に小さな円があります。見出しにカーソルを合わせると、この小さな円は大きくなります。これは、下記のCSSで実現できます。scale(1.2);}CSSは簡単で分かりやすいと思います。このコンセプトをより有用な使用例に拡張してみます。一覧のリスト私のWebサイトには、プロジェクトの一覧があります。プロジェクトごとにサムネイルを追加したかったのですが、最優先事項ではありませんでした。重要だったのは、リンク自体です。Marcotteで、初めて見ました。上記のモックアップ画像は、私が適用したかったアイデアを示しています。本文のリンクには、それに対応する要素があります。子要素のリンクをホバーすると、親要素にエフェクトを適用HTMLは、下記の通りです。疑似要素のためにスペースを確保したいので、paddingを追加します。疑似要素を絶対配置にする絶対配置にするには、どの親が相対的な親であるかを定義する必要があります。この場合は、ヒーローセクションに追加する必要があります。relativeを削除すると疑似要素にどのような影響を与えるかに確認してください。最後にホバーエフェクトとともに、擬似要素を追加します。1;}}これで、子要素のリンクをホバーすると、それに対応した要素にエフェクトが適用されます。完成したデモ実装のポイント疑似要素のbackgroundプロパティにcurrentColorを定義していることに注目してください。このキーワードは常に、親のカラーを継承します。そのため、リンクのカラーを変更しても問題ありません。リンクと同じカラーを常に継承する実際のデモは、下記ページでご覧ください。CodePen.もし興味があれば、私のWebサイトにも実際に使用しているので、チェックしてください。ここで紹介したテクニックを使用しています。ishadeed.com疑似要素で、クリック可能領域のサイズを広くする疑似要素をリンクに追加することで、クリック可能な領域が広くなります。これは非常に便利なテクニックで、ユーザーエクスペリエンスを向上します。クリック可能領域のサイズを広くするさらに、カードコンポーネントのクリック可能領域を広くするためにも使用できます。記事のタイトルや画像などのコンテンツは疑似要素の上にあるため、テキストの選択や画像の保存には影響しません。カードのクリック可能領域のサイズを広くするこの実装方法については、以前詳しく解説した記事をご覧ください。クリック・タップ可能な領域のサイズを広くする実装方法のまとめ疑似要素を使用したオーバーレイ背景画像を持つ要素があり、そのデザインに描画モードがカラーに設定されたグラデーションのオーバーレイがあるとします。その場合、疑似要素で実装できます!疑似要素を使用したオーバーレイCSSは、下記の通りです。color;}実際のデモは、下記ページでご覧ください。Shadows」の名称が正しいかどうか分かりませんが、私はそう認識しています。このエフェクトを実現するために、少し歪んだシャドウを作成していました、繊細なエフェクトです。疑似要素を使用するとこれも簡単に実装できます。Shadows」このエフェクトの実装方法を解説します。要素を作成まずは、div要素で矩形のスタイルを定義します。border-box;}中央に配置された矩形が実装されました。疑似要素を加える次に、widthが50%の:beforeと:afterを加えます。※説明のために、それぞれ異なる背景色をつけました。skew(x)を加え、xは2度です。1つをマイナスにすることで、目的のエフェクトが得られます。-1を加え、親の背後に移動します。