ロールオーバーのいろいろなやり方
ちょっとした勉強会で発表することになった。
テーマは『スマホでタップしたらボタン変わるのどうやってるの？なんかjQuery使ってるぽいんだけど教えて』らしい。すごいピンポイント。困る。
資料はなしで、適当にホワイトボード使ったり、ネットに転がっているサンプル見ながら話してねと言われたけれども、いちいちホワイトボードに書くの面倒だし、説明に適したデモをネットで探すほうが手間な気がしたので、話に必要そうなソースをぺろっとはっておく。
たまたまググったら自分のブログが引っかかってしまった体で。
調子に載ってスライドまで作ってるけど、「やさしさゴシック」を使いたかっただけで中身はすっからかんなので見なくても全然問題ない。
このフォントのやさしさあふれてる感半端ないのでまた使いたいな。
話すこと
テーマがちょっとピンポイント過ぎるのでもっとざっくりした話をしたい。
ということで、『ロールオーバーの色々なやりかた』みたいな感じの話をする。
まず最初に思いつくこと
まず最初に「ロールオーバーしたい」って言われて思いつくのはこれだと思う。
on, offの画像(300x100)を縦に並べた一つの画像(300x200)を用意して、背景画像として表示。テキストはtext-indentで逃がしつつ、疑似クラス::hoverで背景画像positionをずらしてる。
HTML:
<a href="#" class="hoge">link</a>
CSS:
.hoge { display: block; width: 300px; height: 100px; background: url('hoge.png') no-repeat 0 0; text-indent: -9999px; } .hoge:hover { background-position: 0 -100px; }
ただ最近は
-9999pxが無駄に領域確保するからパフォーマンス悪いという話があって、
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
とか
height: 0; padding-top: 100px; overflow: hidden;
みたいに画像置換するのが増えてきている。
ほかにも
「CSSをONにしているけど画像をOFFにしていると何も見えない」みたいな文句を言う人がいて、それに対抗するために、
HTML:
<a href="#" class="hoge"><span></span>link</a>
CSS:
.hoge { display: block; position: relative; width: 300px; height: 100px; } .hoge span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
みたいにz-index使う方法もあるけど、空spanが気持ち悪いよねーという意見が多い気がする。
ちなみに
display:noneを使う方法もあるけど、音声ブラウザで読まれないのでナシ。
HTML:
<a href="#" class="hoge"><span>link</span></a>
CSS:
.hoge { display: block; width: 300px; height: 100px; background: url('hoge.png') no-repeat 0 0; } .hoge span { display: none; }
次に思いつくこと
そもそも、スマホ対応とか考えると画像はできるだけ使いたくないし、ある程度の画像ならCSSでがんばれる。
ということで、背景画像をやめてみる。
HTML:
<a href="#" class="hoge">link</a>
CSS:
.hoge { display: block; width: 300px; height: 100px; /* 良い感じにフォントをデザインすること */ font-size: 64px; text-align: center; text-decoration: none; /* ボタン自体も良い感じにする */ /* border-radius, linear-gradient, box-shadowなど */ } .hoge:hover { /* 良い感じに表示を変える */ }
本気でスマホに対応させる場合
iPhoneやAndroidはデフォルトでタップしたリンクをハイライトしてくれるので、それを消してあげる。
a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
次に、指を離してもhover状態のままだったり、ページを戻ったときにhoverのままだったりする端末があるので、疑似クラスを使うのをやめる。
.hoge.hover { /* 良い感じに表示を変える */ }
で疑似クラスではなくクラス名に変えて
$('a') .on('touchstart', function(){ $(this).addClass('hover'); }) .on('touchend', function(){ $(this).removeClass('hover'); });
のようにjsでクラス名をあてたり消したりする。
最終結果
ということで、今までのもろもろを考えると、こんな感じになるのではないかなー。
もっとイケてるやりかたあったら教えてください。
HTML:
<a href="#" class="hoge">link</a>
CSS:
a{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .hoge { display: block; width: 300px; height: 100px; /* 良い感じにフォントをデザインすること */ font-size: 64px; text-align: center; text-decoration: none; /* ボタン自体も良い感じにする */ /* border-radius, linear-gradient, box-shadowなど */ } .hoge.hover { /* 良い感じに表示を変える */ }
$('a') .on('touchstart', function(){ $(this).addClass('hover'); }) .on('touchend', function(){ $(this).removeClass('hover'); });
