資料はなしで、適当にホワイトボード使ったり、ネットに転がっているサンプル見ながら話してねと言われたけれども、いちいちホワイトボードに書くの面倒だし、説明に適したデモをネットで探すほうが手間な気がしたので、話に必要そうなソースをぺろっとはっておく。ググったら自分のブログが引っかかってしまった体で。調子に載ってスライドまで作ってるけど、「やさしさゴシック」を使いたかっただけで中身はすっからかんなので見なくても全然問題ない。このフォントのやさしさあふれてる感半端ないのでまた使いたいな。話すことテーマがちょっとピンポイント過ぎるのでもっとざっくりした話をしたい。いうことで、『ロールオーバーの色々なやりかた』みたいな感じの話をする。最初に思いつくことまず最初に「ロールオーバーしたい」って言われて思いつくのはこれだと思う。offの画像(300x100)を縦に並べた一つの画像(300x200)を用意して、背景画像として表示。テキストはtext-indentで逃がしつつ、疑似クラス::hoverで背景画像positionをずらしてる。hidden;みたいに画像置換するのが増えてきている。2;}みたいにz-index使う方法もあるけど、空spanが気持ち悪いよねーという意見が多い気がする。ちなみにdisplay:noneを使う方法もあるけど、音声ブラウザで読まれないのでナシ。none;}次に思いつくことそもそも、スマホ対応とか考えると画像はできるだけ使いたくないし、ある程度の画像ならCSSでがんばれる。いうことで、背景画像をやめてみる。*/}本気でスマホに対応させる場合iPhoneやAndroidはデフォルトでタップしたリンクをハイライトしてくれるので、それを消してあげる。0);}次に、指を離してもhover状態のままだったり、ページを戻ったときにhoverのままだったりする端末があるので、疑似クラスを使うのをやめる。});のようにjsでクラス名をあてたり消したりする。最終結果ということで、今までのもろもろを考えると、こんな感じになるのではないかなー。イケてるやりかたあったら教えてください。»プロフィールid:ofsilversいろいろ書きます。(19)はてなブログをはじめよう!ofsilversさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。