ロールオーバーのいろいろなやり方
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 3,782 views

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

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

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

Statistics

Views

Total Views
3,782
Views on SlideShare
1,472
Embed Views
2,310

Actions

Likes
0
Downloads
0
Comments
0

3 Embeds 2,310

http://ofsilvers.hatenablog.com 2304
http://webcache.googleusercontent.com 5
https://www.google.co.jp 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • ユーザのタップに合わせて 表示を変えるの術 2012/11/28 silvers
    • 今日のテーマ
    • 今日のテーマ jQueryでなんか タップするとボタンのデザインが変わるやつが知りたい
    • 今日のテーマ jQueryでなんか タップするとボタンのデザインが変わるやつが知りたいいろんなやりかたあるよ!
    • 自己紹介• @silver_s / silvers• ソーシャルアプリの開発• perl / mysql• HTML5 / CSS3 / UX• http://www.ofsilvers.com
    • やりたいこと ふつうのとき マウスが乗った
    • やりかた• やりかたはいろいろある • 画像を使う / 使わない • 画像を分ける / 分けない • JSで切り替える / CSSで切り替える • 擬似クラスを使う / 使わない• 組み合わせなので全部は紹介しない
    • ぼくの最強
    • ぼくの最強HTML:<a href=”#” class=”hoge”>link</a>
    • ぼくの最強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;}
    • ぼくの最強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;}
    • ぼくの最強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;}
    • ぼくの最強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;}
    • ぼくの最強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 擬似クラスは使わない
    • ぼくの最強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 擬似クラスは使わない
    • ぼくの最強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; 擬似クラスは使わない なぜ? →
    • <img>を使うやりかた
    • <img>を使うやりかたhoge_off.pnghoge_on.png
    • <img>を使うやりかた HTML: <a href=”#”><img src=”hoge_off.png” /></a>hoge_off.pnghoge_on.png
    • <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’); });
    • <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しないと初回にチラつく
    • ぼくの最強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; 擬似クラスは使わない なぜ? →
    • 背景画像を使うやりかた
    • 背景画像を使うやりかたhoge.pngひとつの画像
    • 背景画像を使うやりかた HTML: <a href=”#” class=”hoge”>link</a>hoge.pngひとつの画像
    • 背景画像を使うやりかた 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; }
    • 背景画像を使うやりかた 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; }• いわゆる画像置換
    • 画像置換• 画像置換の方法はいろいろある • display: none; • text-indent: -99999px; • z-index • overflow: hidden;• でも最近のCSSはリッチなので画像なくてもそこそこできる
    • ぼくの最強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; 擬似クラスは使わない なぜ? →
    • :hover• 擬似クラス• スマホで何かがおかしい• 指を話しても消えないとか• 「戻る」とそのままとか
    • ぼくの最強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; 擬似クラスは使わない なぜ? →
    • DEMO
    • おわり• 今日あげたのは、一例で• もっと色々やり方はある• ので、いろいろ試してみてください