CSSのみで簡単に実装できる！ マグネットのようにくっついて追従するホバーエフェクトを実装するテクニック

2023/11/07 5 users ホバーエフェクト マグネット CSS テクニック 一昔前

CSSの:has疑似クラスとCSS Anchor Positioningを使用して、:hoverにマグネットのように追従するホバーエフェクトを実装するテクニックを紹介します。 一昔前なら、JavaScriptなどを使用し...記事の続きを読む 続きを読む

【CSS】まだホバー時のスタイルを :hover だけで指定してるの？

2023/08/07 267 users enabled Summary Button where 結論

はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マ... 続きを読む

使ってますか? CSSの:is()と:not()で復数セレクタ管理をラクにしよう

2023/02/06 16 users not CSS ＩＳ ラク focus

複数要素の a:hover と a:focus にスタイルをあてたいとき、次のようなコードを書いていませんか？ .section1 a:hover, .section1 a:focus, .section2 a:hover, .section2 a:focus { color: lightpink; } :is() という擬似クラス関数を使えば、短く、重複のないコードが書けます。 :is(.section1, .section2) a:is(:hove... 続きを読む

【CSS】きみは "擬似クラス" 何個言えるかな？？ - Qiita

2022/08/19 238 users Qiita focus CSS where キミ

はじめに あなたは "擬似クラス" 何個言えますか？ 擬似クラスには、:hover や :active、:focusといったよく使うものから、 :is()や:where()、:has()といったこれからサポートされていくものまで たくさん種類があるのは、ご存知ではないでしょうか？ でも、"擬似クラス" 何個言えますか？と聞かれると数個くらいしか思... 続きを読む

ホバーの分岐にはメディアクエリのwidthではなくhoverを使おう

2022/04/01 15 users landscape matchmedia ポパー width

メディアクエリにはhoverプロパティがあり、ユーザーがホバーに対応しているデバイスかどうかの判定が行えます。 これを使用することによって、画面幅での分岐が必要なくなるためタブレットのlandscape含めた対応も容易になります。 また、メディアクエリはJavaScriptからもmatchMediaという関数を使う事で使用すること... 続きを読む

スマホ対応の優れもの！クリック・タップの直前にページを先読み、高速表示する超軽量スクリプト -instant.page | コリス

2019/02/12 56 users コリス touchstart 超軽量スクリプト 優れもの 直前

ユーザーがリンクをクリックする際のhoverとタップする際のtouchstartに合わせて、クリック・タップする直前にページのHTMLをプリロードし、高速に表示するわずか1kBの超軽量スクリプトを紹介します。 ページに外部スクリプトを1つ加えるだけの簡単実装です。 instant.page instant.page -GitHub instant.pageの特徴 ins... 続きを読む

VSCode拡張のLaTeX Workshopにコントリビュートした話 - Qiita

2018/12/05 12 users Qiita VSCode拡張 margin Tex ref

これは「TeX ＆ LaTeX Advent Caleandar 2018」の5日目の記事です。 （4日目は golden_luckyさん、6日目は @uwabami さん です。） VSCode拡張のLaTeX Workshopにコントリビュートしました。 MathJax でレンダリングされた数式が hover に表示される機能。 PDFビューアで横の margin を消す trim mode。 \ref や \eqref ... 続きを読む

Webサイトで未使用のCSSセレクタを教えてくれるツール・「Unused CSS」 | かちびと.net

2018/02/17 48 users CSSセレクタ Unused CSS net foc ツール

Unused CSS Unused CSSはWebサイトで未使用のCSSセレクタを抽出してくれるWebサービスです。内部リンクをたどって複数ページを一括で解析、抽出してくれる、というものですが、現在ベータ版の為か100ページの解析に制限されているそうです。注意点として、解析するCSSは最初に指定したWebページで読み込まれているCSSのみで、子ページのみのCSSは解析しない、:hoverや:foc... 続きを読む

iOS 8.4.1の:hover問題 - to-R

2015/08/29 79 users to-R opacity iOS 8.4.1 Safari

ネタ元：結構緊急リンクが飛ばない iOS 8.4.1からCSS :hoverも１クリックカウントっぽいSafari | WEBスキルアップ君 上記の件、結構やっかいな問題なのでiPhone6+をiOS 8.4.1にアップデートして色々と検証してみました。 どんな現象になるの？ 以下のサンプルで確認できます。 a:hover img{ opacity:0.6; } <a href="http://b... 続きを読む

Windows95のごみ箱を実際に作ってみたら何かよくわからないものが出来た | オモコロ

2015/06/10 257 users ゴミ箱 オモコロ マインスイーパー ソリティア ポパー

こんにちは、最近シドニアの騎士にハマっているマンスーンです。     みなさんの初めてのパソコン体験はいつだったでしょうか？ 僕は小学生の時に父親が仕事で使ってるWindows95のパソコンを触らせてもらったのが初体験でした。 インターネットのイの字すらわからなかったので、マインスイーパーやソリティア、そしてHover!というホバーに乗って旗を集めるゲームをめちゃくちゃプレイしていたのを覚えていま... 続きを読む

高度なことはできないけど、単純だからこそ使いやすい。ジェスチャーを取得する電子パーツ「Hover」 | RAW-Fi

2014/08/20 8 users Kinect Arduino ジェスチャー RAW-Fi 程度

あれこれ考えすぎて無理に難しくしてません？「Hover」は簡単なジェスチャーとタッチを取得するための電子パーツだ。ジェスチャーコントローラーと言えば真っ先に思い浮かぶのはKinectやLEAP Motionだが、Hoverが取得できるのは手をどの方向に動かしたか程度。しかし直接タッチが取得できるのはLEAP Motionできない技だ。HoverはArduinoやRaspberry Piに対応してい... 続きを読む

XPまであったゲーム「ピンボール」がWindows Vistaから消えた知られざる理由とは？ - GIGAZINE

2014/08/18 95 users GIGAZINE マインスイーパ ソリティア ふり ピンボール

By henry9112 PCを爆発的に普及させる原動力の一つにもなったWindows 95には数種類のゲームがプリインストールされていて、「Hover！」や「ソリティア」、「マインスイーパ」に夢中になった人も多いはず。そんなゲームに含まれていたものに「ピンボール」があったのですが、実はWindows XPを最後に姿を消していました。なぜピンボールがWindows Vista以降は削除されてしまっ... 続きを読む

Windows 95付属の旗を集める懐かしのゲーム「Hover！」をMicrosoftがウェブ版にリメイク - GIGAZINE

2013/10/03 132 users GIGAZINE ウェブゲーム WebGL ふり リメイク

「Hover 950」と呼ばれる乗り物を操縦して敵が自分の旗を集めるより早く敵の旗を集める、というWindows 95にプリインストールされているゲームHover！が、Microsoftによってリメイクされ、新たにWebGLを使ったウェブゲームとして公開されました。 Hover！ http://www.hover.ie/ Microsoft touts browser gaming with We... 続きを読む

Windows 95の付属ゲーム「Hover」をブラウザーで遊べるサイト、MSが公開 -INTERNET Watch

2013/10/03 19 users ブラウザー INTERNET Watch CD-ROM 公開

ニュース Windows 95の付属ゲーム「Hover」をブラウザーで遊べるサイト、MSが公開 （2013/10/3 19:02） 米Microsoftは2日、Windows 95のCD-ROMに付属していた3Dゲーム「Hover」を、ウェブブラウザー上でプレイできるサイトを公開した。 ウェブ版「Hover」 Hoverは、ホバーカーを操作してマップ上の旗を集める3Dゲーム。Windows 95の... 続きを読む

Windows 95の付録ゲーム「Hover」がWebに帰ってきた - ITmedia ニュース

2013/10/03 46 users CD-ROM 付録 Microsoft CD-ROM版 プレイ

Windows 95のCD-ROMに収録されていた3D“旗とりゲーム”の「Hover」が、WebGL採用でタッチ対応・マルチプレイヤー対応のWebゲームとして復活した。MicrosoftはIE 11でのプレイを推奨する。 米Microsoftは10月2日（現地時間）、かつて「Windows 95」のCD-ROM版の付録として公開したドライブゲーム「Hover」をWebゲームとして再現したと発表した... 続きを読む

擬似要素と擬似クラスの違いやダブルコロンとシングルコロンの話｜Webpark

2013/07/01 88 users Webpark visited 擬似要素 active クラス

私のように趣味でWebサイト作成をしていると基礎が抜け落ちていたりするので復習を兼ねて擬似要素と擬似クラスの違いについて考えてみました。 擬似クラス（Pseudo-classes） 擬似クラスには次のようなものがあります。何気なく使っていますが、擬似クラスという名称を知らない方も多いのではないでしょうか。 :link :visited :hover :active で、擬似クラスはCSS3で大幅に... 続きを読む

[CSS]なにかと便利な「:before, :after擬似要素」の使い方を基本からマスターするためのチュートリアル | コリス

2012/07/18 574 users コリス before チュートリアル CSS After

HTMLを汚したくない、もしくは変更することができないときに役立つ擬似要素の基本的な使い方から応用テクニックまでを紹介します。 擬似要素で、div要素の両端にシャドウをつけたり、一枚の画像を重ねたりすることができます。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3で... 続きを読む

CSS3アニメーションを「:hover」だけではなく、他にも仕込んでみるチュートリアル | コリス

2011/11/13 141 users focus コリス checked active たいてい

CSS3アニメーションはたいていの場合、ホバー時（:hover）に仕込まれるものが多いと思います。 ここでは他の疑似クラス「:active」や「:focus」などやMedia Queriesに仕込んでみるチュートリアルを紹介します。 下記は各ポイントを意訳したものです。 「:active」を使ってCSS3アニメーション 「:focus」を使ってCSS3アニメーション 「:checked」を使ってC... 続きを読む

Windows95に付属していた旗集めドライブゲーム「Hover！」 - GIGAZINE

2011/10/30 120 users GIGAZINE Windows95

by Amadika Windows95の発売から16年。当時生まれた子どもがもう高校に入るというほどに歳月が流れて、Windowsも次は「Windows 8」が出ようかとしています。Windows内部も当時からいろいろと変更が加わってきましたが、意外と変わらずに来たのが付属のゲーム。「マインスイーパ」「フリーセル」を遊んだという人は多いのではないでしょうか。 そんな中で、姿を消したゲームもありま... 続きを読む

jQueryでテーブルの行ごとクリックしてチェックボックスにチェックを入れられるようにする - かちびと. net

2011/10/16 62 users jQuery net テーブル Tips 行ごと

jQueryでテーブルの行ごとクリックして チェックボックスにチェック出来るよう にするTipsです。ユーザーがデータを 見ながらフォームを送信する際に、分か りやすくしてあげよう、という目的です。 行ごとクリッカブルにする、みたいな感じ。 ちょっとサーバー移転作業もあるので適当な記事が日々続きますけど・・まもなく移転完了します。 Sample サンプルです :hover使うのでIE6だけ色が変わ... 続きを読む

[CSS]ホバー以外にも使ってみたいCSS3アニメーションのテクニック | コリス

2011/08/07 122 users コリス disabled CSS focus checked

下記は各ポイントを意訳したものです。 はじめに -「:hover」の例 「:active」でCSS3アニメーション 「:focus」でCSS3アニメーション 「:checked」でCSS3アニメーション 「:disabled」でCSS3アニメーション Media QueriesでCSS3アニメーション 対応ブラウザ はじめに -「:hover」の例 CSS3アニメーションのトリガーとしては、「:h... 続きを読む

CSS3のtransitionとtext-shadowで作る様々なリンク装飾｜Webpark

2011/05/24 76 users Ｔｒａｎｓｉｔｉｏｎ Webpark CSS3 タイトルロゴ

CSS3のtransitionとtext-shadowでオンマウス時のリンクを楽しく装飾してみます。すべてのリンクに使うとわずらわしいですが、タイトルロゴなんかだとこれくらい凝ってもいいのかなと思います。 transition（時間的変化をつける） hoverなどでスタイルが変化する際、通常はすぐに切り替わりますが、transitionを使うと時間をかけて変化するなど様々な設定をすることが可能にな... 続きを読む

[JS]複数のパネルの一つだけ内容を変更してハイライトさせるスクリプト -Hoverpanels | コリス

2011/05/10 63 users コリス jQuery スクリプト default パネル

複数のパネルを配置したコンテンツの一つにパネルにマウスをホバーすると、内容を変更しハイライト表示にするjQueryのプラグインを紹介します。 デモページ：ホバー時 Hoverpanelsの実装 HTML 各パネルはdiv要素（class="hover-panel"）で実装されており、通常時用とホバー時用のコンテンツをそれぞれ配置します。 ※通常時用：.default、ホバー時用：.hover 続きを読む

ピュアCSSでスライドアウトインタフェースの実現:phpspot開発日誌

2011/04/21 27 users ピュアCSS phpspot開発日誌 実現 JSなし 再度

Pure CSS Slide-out Interface ピュアCSSでスライドアウトインタフェースの実現。 ページの再度にちょこっとタブ風の画像を置いておいて、クリックするとアニメーションしながら表示されるあのUIがJSなしで実装されています。 具体的なサンプルCSSとマークアップが提供されています。 :hover と transition を使って実装されているようですが、こんなに簡単にできる... 続きを読む

[CSS]ホバー時のエフェクトを自分以外の要素にも適用するチュートリアル | コリス

2011/03/29 162 users コリス チュートリアル opacity エフェクト CSS

下記は各ポイントを意訳したものです。エレメントにホバー時のエフェクトを与えることは簡単です。 ここでは、ホバー時に不透明度が変化するものを例にしてみます。div {opacity: 1.0;}div:hover {opacity: 0.5;}これで、ホバー時に不透明度が0.5になるようになりました。ここまでは簡単ですが、ホバー時のエフェクトを実際にホバーされているエレメント以外にも適用するには、ど... 続きを読む