【脱:擬似クラスhover】全デバイスでhoverイベントを安定させる方法
【脱:擬似クラスhover】全デバイスでhoverイベントを安定させる方法 マウスで対象要素にホバーした時、簡単に色や大きさを変化させることができる便利なCSS擬似クラス:hover。 ですがCSSを使わずにhoverイベントを設定できる方が、デバイスに合わせた処理ができるため、CSS擬似クラス:hoverはあまりオススメしていません。 その理由と設定方法について解説します。 CSS擬似クラス【:hover】を使わなくなった理由 以前は擬似クラス【:hover】は非常に便利なCSSとして使用していました。 ですが一点のみ悩んでいた部分があります。 それはタブレットでの【:hover】の挙動です。 レスポンシブ対応にてホームページを制作する際に、PCサイト用のCSSとスマートフォン用のCSSは別々に記述しています。 <link rel="stylesheet" type="text/css"
CSSとjQueryで作るメニュー表示時にコンテンツのスクロールをさせないドロワーメニュー｜I'll be NET
最近よ見かける画面の左や右からにゅるっと出てくるドロワーメニューです。 バーガーメニュー・ナビゲーションドロワーなどとも呼ばれます。 スタイルシートだけで実現するもの、jQueryプラグインを利用するものなど様々ありますが、今回はCSSとjQueryでメニューを開いた時に画面の余白部分（コンテンツ）をスクロールさせないドロワーメニューを作成してみます。 参考にさせていただいたサイトは記事最下部に記載させていただきました。 DEMO ドロワーメニューのHTMLサンプル たとえば下記のようなHTMLでドロワーメニューを実現します。 <div id="wrap"> <header> <h1>タイトル</h1> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【コピペ実装!!】スマホのメニュー展開時にスクロール禁止させる方法 - 気まぐれWEBLOG
HTMLの< a href="tel:" >でリンクをタップして電話を発信させる方法
