2025年08月28日(木)
これは疑似要素の便利な使い方！ レイアウトは変えずにクリックできるエリアを広げるCSSのテクニック
ボタンやアイコンなどでクリック・タップ可能なエリアを広げたいと思ったことがあると思います。a要素をブロックにしてpaddingを加えたり、JavaScriptを使用したりといった方法がありますが、今回はレイアウトはそのまま変えずにクリック・タップ可能な領域を広げるCSSのテクニックを紹介します。
下記は、左は通常のクリックエリア、右はクリックエリアを広げたものです。デスクトップ時は小さいままで、スマホ時には44pxに広げるといったことも簡単にできます。
実際の動作は、下記でもページでご覧ください。左は通常のクリックエリア、右はクリックエリアを広げたものです。
「デバッ...
0
10
10
0author:
コリス
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログ
‹ PREV
【メタリアル・グループ】顧客企業経営陣の課題予測分析AIエージェント「Metareal エグゼクティブインサイト(Metareal EI)」8/26提供開始
NEXT ›
ニュースレターやメルマガ等を配信できるオープンソースのSubstack代替・「IndiePubStack」
Ads
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログコリスの記事『これは疑似要素の便利な使い方！ レイアウトは変えずにクリックできるエリアを広げるCSSのテクニック』についてまとめています。
この記事は特にjavascript・アイコン・SEO・twitter・LINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のコリスで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとコリスの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
