ロールオーバーのいろいろなやり方

8,225 views
8,225 views

Published on

「やさしさゴシック」を使いたかっただけなんです!

"ロールオーバーのいろいろなやり方 - しるろぐ" http://ofsilvers.hatenablog.com/entry/rollover-coding

Published in: Technology
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,225
On SlideShare
0
From Embeds
0
Number of Embeds
3,881
Actions
Shares
0
Downloads
13
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

ロールオーバーのいろいろなやり方

  1. 1. ユーザのタップに合わせて 表示を変えるの術 2012/11/28 silvers
  2. 2. 今日のテーマ
  3. 3. 今日のテーマ jQueryでなんか タップするとボタンのデザインが変わるやつが知りたい
  4. 4. 今日のテーマ jQueryでなんか タップするとボタンのデザインが変わるやつが知りたいいろんなやりかたあるよ!
  5. 5. 自己紹介• @silver_s / silvers• ソーシャルアプリの開発• perl / mysql• HTML5 / CSS3 / UX• http://www.ofsilvers.com
  6. 6. やりたいこと ふつうのとき マウスが乗った
  7. 7. やりかた• やりかたはいろいろある • 画像を使う / 使わない • 画像を分ける / 分けない • JSで切り替える / CSSで切り替える • 擬似クラスを使う / 使わない• 組み合わせなので全部は紹介しない
  8. 8. ぼくの最強
  9. 9. ぼくの最強HTML:<a href=”#” class=”hoge”>link</a>
  10. 10. ぼくの最強HTML:<a href=”#” class=”hoge”>link</a>CSS:.hoge { display: block; width: 300px; height: 100px; background-color: #6d7472; color: #fff; -webkit-tap-highlight-color:rgba(0,0,0,0);}.hoge.hover { background-color: #2e6ffd;}
  11. 11. ぼくの最強HTML:<a href=”#” class=”hoge”>link</a>CSS: javascript:.hoge { $(‘a’) display: block; .on(‘touchstart’, function(){ width: 300px; $(this).addClass(‘hover’); height: 100px; }) background-color: #6d7472; .on(‘touchend’, function(){ color: #fff; $(this).removeClass(‘hover’); -webkit-tap-highlight- });color:rgba(0,0,0,0);}.hoge.hover { background-color: #2e6ffd;}
  12. 12. ぼくの最強HTML: 1 img は使わない<a href=”#” class=”hoge”>link</a>CSS: javascript:.hoge { $(‘a’) display: block; .on(‘touchstart’, function(){ width: 300px; $(this).addClass(‘hover’); height: 100px; }) background-color: #6d7472; .on(‘touchend’, function(){ color: #fff; $(this).removeClass(‘hover’); -webkit-tap-highlight- });color:rgba(0,0,0,0);}.hoge.hover { background-color: #2e6ffd;}
  13. 13. ぼくの最強HTML: 1 img は使わない<a href=”#” class=”hoge”>link</a>CSS: javascript: 2 背景画像は使わない.hoge { $(‘a’) display: block; .on(‘touchstart’, function(){ width: 300px; $(this).addClass(‘hover’); height: 100px; }) background-color: #6d7472; .on(‘touchend’, function(){ color: #fff; $(this).removeClass(‘hover’); -webkit-tap-highlight- });color:rgba(0,0,0,0);}.hoge.hover { background-color: #2e6ffd;}
  14. 14. ぼくの最強HTML: 1 img は使わない<a href=”#” class=”hoge”>link</a>CSS: javascript: 2 背景画像は使わない.hoge { $(‘a’) display: block; .on(‘touchstart’, function(){ width: 300px; $(this).addClass(‘hover’); height: 100px; }) background-color: #6d7472; .on(‘touchend’, function(){ color: #fff; $(this).removeClass(‘hover’); -webkit-tap-highlight- });color:rgba(0,0,0,0);}.hoge.hover { background-color: #2e6ffd;}3 擬似クラスは使わない
  15. 15. ぼくの最強HTML: 1 img は使わない<a href=”#” class=”hoge”>link</a>CSS: javascript: 2 背景画像は使わない.hoge { $(‘a’) display: block; .on(‘touchstart’, function(){ width: 300px; $(this).addClass(‘hover’); height: 100px; }) background-color: #6d7472; .on(‘touchend’, function(){ color: #fff; $(this).removeClass(‘hover’); -webkit-tap-highlight- });color:rgba(0,0,0,0);} 4 jsでclass名をあてる.hoge.hover { background-color: #2e6ffd;}3 擬似クラスは使わない
  16. 16. ぼくの最強HTML: 1 img は使わない<a href=”#” class=”hoge”>link</a>CSS: javascript: 2 背景画像は使わない.hoge { $(‘a’) display: block; .on(‘touchstart’, function(){ width: 300px; $(this).addClass(‘hover’); height: 100px; }) background-color: #6d7472; .on(‘touchend’, function(){ color: #fff; $(this).removeClass(‘hover’); -webkit-tap-highlight- });color:rgba(0,0,0,0);} 4 jsでclass名をあてる.hoge.hover {}3 background-color: #2e6ffd; 擬似クラスは使わない なぜ? →
  17. 17. <img>を使うやりかた
  18. 18. <img>を使うやりかたhoge_off.pnghoge_on.png
  19. 19. <img>を使うやりかた HTML: <a href=”#”><img src=”hoge_off.png” /></a>hoge_off.pnghoge_on.png
  20. 20. <img>を使うやりかた HTML: <a href=”#”><img src=”hoge_off.png” /></a>hoge_off.png javascript: $(‘img’) .on(‘touchstart’, function(){ $(this).attr(‘src’).replace(‘_off’, ‘_on’); }).hoge_on.png .on(‘touchend’, function(){ $(this).attr(‘src’).replace(‘_on’, ‘_off’); });
  21. 21. <img>を使うやりかた HTML: <a href=”#”><img src=”hoge_off.png” /></a> hoge_off.png javascript: $(‘img’) .on(‘touchstart’, function(){ $(this).attr(‘src’).replace(‘_off’, ‘_on’); }). hoge_on.png .on(‘touchend’, function(){ $(this).attr(‘src’).replace(‘_on’, ‘_off’); });• 切り替えにjavascriptが必要• preloadしないと初回にチラつく
  22. 22. ぼくの最強HTML: 1 img は使わない<a href=”#” class=”hoge”>link</a>CSS: javascript: 2 背景画像は使わない.hoge { $(‘a’) display: block; .on(‘touchstart’, function(){ width: 300px; $(this).addClass(‘hover’); height: 100px; }) background-color: #6d7472; .on(‘touchend’, function(){ color: #fff; $(this).removeClass(‘hover’); -webkit-tap-highlight- });color:rgba(0,0,0,0);} 4 jsでclass名をあてる.hoge.hover {}3 background-color: #2e6ffd; 擬似クラスは使わない なぜ? →
  23. 23. 背景画像を使うやりかた
  24. 24. 背景画像を使うやりかたhoge.pngひとつの画像
  25. 25. 背景画像を使うやりかた HTML: <a href=”#” class=”hoge”>link</a>hoge.pngひとつの画像
  26. 26. 背景画像を使うやりかた HTML: <a href=”#” class=”hoge”>link</a> CSS:hoge.png .hoge { display: block; width: 300px; height: 100px; background: url(‘hoge.png’) no-repeat 0 0;ひとつの画像 text-indent: 100%; overflow: hidden; } .hoge:hover { background-position: 0 -100px; }
  27. 27. 背景画像を使うやりかた HTML: <a href=”#” class=”hoge”>link</a> CSS: hoge.png .hoge { display: block; width: 300px; height: 100px; background: url(‘hoge.png’) no-repeat 0 0; ひとつの画像 text-indent: 100%; overflow: hidden; } .hoge:hover { background-position: 0 -100px; }• いわゆる画像置換
  28. 28. 画像置換• 画像置換の方法はいろいろある • display: none; • text-indent: -99999px; • z-index • overflow: hidden;• でも最近のCSSはリッチなので画像なくてもそこそこできる
  29. 29. ぼくの最強HTML: 1 img は使わない<a href=”#” class=”hoge”>link</a>CSS: javascript: 2 背景画像は使わない.hoge { $(‘a’) display: block; .on(‘touchstart’, function(){ width: 300px; $(this).addClass(‘hover’); height: 100px; }) background-color: #6d7472; .on(‘touchend’, function(){ color: #fff; $(this).removeClass(‘hover’); -webkit-tap-highlight- });color:rgba(0,0,0,0);} 4 jsでclass名をあてる.hoge.hover {}3 background-color: #2e6ffd; 擬似クラスは使わない なぜ? →
  30. 30. :hover• 擬似クラス• スマホで何かがおかしい• 指を話しても消えないとか• 「戻る」とそのままとか
  31. 31. ぼくの最強HTML: 1 img は使わない<a href=”#” class=”hoge”>link</a>CSS: javascript: 2 背景画像は使わない.hoge { $(‘a’) display: block; .on(‘touchstart’, function(){ width: 300px; $(this).addClass(‘hover’); height: 100px; }) background-color: #6d7472; .on(‘touchend’, function(){ color: #fff; $(this).removeClass(‘hover’); -webkit-tap-highlight- });color:rgba(0,0,0,0);} 4 jsでclass名をあてる.hoge.hover {}3 background-color: #2e6ffd; 擬似クラスは使わない なぜ? →
  32. 32. DEMO
  33. 33. おわり• 今日あげたのは、一例で• もっと色々やり方はある• ので、いろいろ試してみてください

×