もはや他ブラウザでも問題ないようにクロスブラザ対応だけでなく、スマートフォンやタブレット端末などマルチデバイスに対応できるようになっておかなければ、という時代になって1,2年が経ちました。 「プログレッシブエンハンスメント」や「グレイスフルデグラデーション」、「メディアクエリ」、「CSSスプライト」、「モバイルファースト」というキーワードも聞かれるようになりました。 あ、最大のキーワードは「html5」。これは広義にも狭義にも使われてますね。 このような流れを受けてか、ビジュアルデザインは大きく、フォントも大きくなったサイトを見かけることが多くなった気がします。 結果見やすく、アクセシビリティにも良い印象。個人的にも素材を大きくダイナミックな表現は好みなので見てて楽しいです。 っとデザインの話しではなく、クロスブラウザ、マルチデバイスにどう対応するか。 そのコンテンツのユーザーは誰か?をデ
スマートフォン(以下スマホ)やタブレットでPCでいうところのマウスオーバー処理をしたいときは、touchイベントを使うことで実現できる。 確かAndroid1.6とかでtouchイベントに対応していない端末があったような気がするが、touchイベントに対応しているか判別すればいいわけで、デバイスがPCだろうがスマホだろうがタブレットだろうが関係ない。 実装イメージ touchイベントを認識するか? しない→clickイベントで処理(マウスオーバーは普通にCSSで) する→clickフラグ用の変数を用意。 タップした(ontouchstart)ときに見た目を変えるCSSやclass名をセットする。 タップしたところから移動(ontouchmove)したら、clickフラグを無効に。 タップを離した(ontouchend)とき、 タップしたときにセットしたCSSやclass名を取り消す。 cl
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
jQueryのイベントハンドラはコールバック関数の最初の引数にイベントオブジェクトを渡します。イベントオブジェクトの clientX プロパティと clientY プロパティによってマウスカーソルの位置を取得することができます。 イベントオブジェクトを操作するために関数にイベントオブジェクトを渡すためには、次のように引数にイベントを指定します。 [javascript] function(e){ // } [/javascript] 例えば、イベントオブジェクトの target プロパティはイベントを発行した DOM 要素への参照を返します。 次のコードは、イベントが発生しているオブジェクトを取得して DOM 要素のID 名( #contents )を表示させます。 [javascript] $(document).click(function(e) { var ele = $(e.tar
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン5種 ちょっと前まではマウスオーバーといえば画像の切り替えくらいでしたけど、最近ではアニメーションで切り替わるマウスオーバーも増えてきましたね。 ということでこの記事ではjQueryを使用して、わりと簡単に作れるマウスオーバーアクションをご紹介します。 投稿日2010年10月24日 更新日2012年03月05日 ナビゲーションはテキストにしないとseo的にあれだよとか言われていますが、コーポレートサイトではまだまだ画像を使用されていることが多いと思います。なので、今回は画像ナビゲーション限定です。(テキストでもあまり変わらないと思いますが……) 縦型+テキストタイプのナビゲーションはこちらの記事をご覧ください。 「jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種」 htmlと画像の準
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く