スマフォやタブレットでタップした時の動作を制御する！｜株式会社アクトゼロ｜クリエイティブブログ
PCページと違い、スマフォやタブレットではマウスを使わないため、 マウスオーバーの概念が存在しません。 ですが、タップした時の挙動を制御することは可能です。 jQueryで指定 jQueryにはタップした時のイベントが用意されています。 それが、「touchstart」と「touchend」です。 ■サンプル ・タップした時にボタンを差し替える例 $(function(){ //タップ開始時 $(‘img.btn’).on({ touchstart: function () { var newImg = $(this).attr(‘src’).replace(‘.jpg’,’_ac.jpg’); $(this).attr(‘src’,newImg); } }); //タップ終了時 $(‘.img.btn’).on({ touchend: function () { var newImg =
たった1行！スマホサイトのコーディング時に役立つ小技8（サンプルあり） - Design Color
もくじ 幅をデバイスサイズに合わせる スマホを横にしたときに文字が大きくならないようにする 電話番号に自動的にリンクが付かないようにする リンクを押したら電話をかけられるようにする リンクを押したらGoogleマップアプリを起動させる リンクエリアを広げる paddingやborder分を気にせずwidth/heightの数値を指定する 長い文字列でも途中で改行させる 1.幅をデバイスサイズに合わせる まずはスマホサイトを作るときの基本ですね。サイト幅をデバイスの幅に合わせてあげるには、以下の一行だけで対応出来ます。 <meta name="viewport" content="width=device-width,initial-scale=1.0"> サンプル 2.スマホを横にしたときに文字が大きくならないようにする スマホを横にすると、解像度が変化すると共に文字サイズも大きくなってし
スマートフォンサイトのコーディング Tips あれこれ | バシャログ。
ゴールデンウィークはゴールデンに過ごせそうにない Latin です。 今回はスマートフォンサイトのコーディング周りでのあれこれをまとめてみます。 先日の macky の記事、「スマホサイトの矢印付きメニューをCSSのみで実装する。」もあわせてご覧ください。 viewport 系の設定 描画サイズをデバイスの横幅に合わせる、拡大縮小を不可に これが一番よく見る形式でしょうか？ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 文字サイズの自動調整をオフにする 各スマホブラウザでは、横向きにすると text-size-adjust の処理が走り、自動で文字サイズを最適化（拡大）する機能があります。 読
CSS Media Query Snippets
Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email SubscribeWith responsive design being big in web design it's important that you design your website so that it can be used on different devices. There are a number of different media queries that you can use on your design, if you don't know where to start with media queries here is a good bo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
