クリック領域を広げてスマホのタップ操作に優しくするためのスタイルシート


公開日:   〇年前のこの日、何してた?
Categories: Works | Tags: , , | 閲覧数:853 | Leave a comment

スマートフォンでのアクセスもパソコン版と同じCSS(カスケード・スタイル・シート)でレスポンシブ対応しているのですが、最近気になっていることがあって・・・

今日やっと重い腰を上げました(= ̄∇ ̄=) ニィ

スマホに優しく。タップ領域を拡大する

それは、タップできる領域が小さくてタップしにくいのではないかな?ということ。

例えば、トップページやアーカイブなどの投稿一覧。
タイトルやアイキャッチ画像、それに「つづきをよむ」はクリック(タップ)できるけども、抜粋が表示されているところはクリック(タップ)できない。↓

クリックできない

 

それを、全ての領域をクリック(タップ)できるようにしたい。

↓破線の範囲をクリック(タップ)できるようにしてみる。

 クリックできる

HTML構造の記述

クリック(タップ)できるようにする領域(ここでは”div”)にクラス”alllinkarea”を付加。
一番のミソは「見えなくなってもいい”a要素”」をつくり、クラス”linkarea”を付加。
このa要素を領域全体に広げるという手法。

CSS(スタイルシート)の記述

注意点としては、div要素に背景色を設定しないと今回のこの手法は効かないらしい。

応用で、サイドバーの最新記事などにも適応してみた。
wordpress popular postsがどうしてもタグが効かず、「なんちゃって領域拡大」になってるけど、いつかどーにかしたい。

参考はこちらのサイト↓。
とても丁寧でわかりやすい解説ですが、CSSの記述も全部が画像だったのでコピペできなかった(≡д≡) ガーン
Lesson 08 ブロック要素の全体をリンク領域に設定する- Webデザイン表現&技法の新・スタンダード・インタラクション編 – MdN Design Interactive

もし、気に入っていただけたらシェアしていただけると嬉しいです♪ この記事へのリンクはこちら↓コピーしてHTML編集画面に貼り付けでお使いください。

ブログの更新情報はこちらで配信中~
Feedlyで購読
follow us in feedly
更新をメールでお知らせ 配信: FeedBurner

sponsored


公開日:   〇年前のこの日、何してた?
Categories: Works | Tags: , , | 閲覧数:853 | Leave a comment

著者 ねこもりや

どうぶつ占いは「コアラ」。ボーっとする時間が常に必要。”猫になりたい”とひたすら願う怠けもの。

My Photos

Leave a Reply

Required fields are marked *


CAPTCHA