:focus-withinで広域のフォーカス表示が便利（最近便利なCSSおれおれAdvent Calendar 2023 – 03日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 03 日目 a:focus とか便利なんですよねシリーズもうひとつです。 :focus-visible – キーボードを使ってナビゲーションしているとき（昨日） :focus-within – 自身か子孫要素にフォーカスがあるとき :hover と :focus-within を併用する 例えばカードとか。クリックできる UI 単位でなくても :hover でちょっと外観を変えたいことはまあまあありますよね。 そういう UI がボタンや入力欄といったコントロールを持つときは :focus-within も併用しておくと素敵です。マウスカーソルを外へ持って行ってもフォーカスが残ってる間は :hover と同じ見た目にしておくことができます。 デモ： https://codepen.io/ginpei/pen/eYxQvbR
CSS記述が速くなる、コピペできるチートシート用コードスニペットまとめ
CSSはシンプルな表記でスタイリングが特長ですが、ときには複雑なコードによってどう書いたらよいか、迷ってしまうことがあります。 今回は、CSSでの制作をスピードアップさせる、コピペできるチートシート的コードスニペットをまとめてご紹介します。 リアルタイムによるプレビュー、確認が可能で、生成されたCSSコードをコピーするだけで利用できる、知っておくと差がつく利用機会の多いCSSプロパティが揃います。 CSS記述が速くなる、コピペできるシートシート用コードスニペットまとめ 1. CSSマウスカーソル・プロパティ さまざまなマウスカーソル用プロパティを並べたコードスニペット。各ボックスにマウスホバーすることで、ブラウザーでどのように見えるか確認できます。 See the Pen CSS Cursor Property by Kalimah Apps (@khr2003) on CodePen.
CSS Cursor
CSS cursor showcase. View, experience and choose one for your application ;).
TouchPoint.js·マウスクリックをビジュアル化 MOONGIFT
プレゼンでデモをやったり、デモ動画を撮る時に思うのはキーボードやマウスの入力を見ている人がはっきりと分かるようにするというのは難しいと言うことです。突然文字が入力されたり、小さなマウスポインタが動いたりするのは分かりづらいことこの上ありません。 そこで使ってみたいのがTouchPoint.jsです。Webブラウザにおけるマウスポインタのクリックをビジュアル化してくれるライブラリです。 TouchPoint.jsの使い方 TouchPoint.jsを使ったデモのアニメーションGIFになります。クリックすると赤い波紋が広がります。 色は変更できます。 スクリーンキャスティングはもちろん、ユーザテストの際に使ったりしても面白いかと思います。Webサイトのデモを見せる時に使うと聴衆も分かりやすくなるでしょう。 TouchPoint.jsはJavaScript製、MIT Licenseのオープンソー
Mouse Follows Focus - アプリ切り替え時にマウスカーソルをハイライト MOONGIFT
最近はディスプレイが大型化し、さらにマルチディスプレイを使った開発も当たり前になっています。そんな中、マウスカーソルがどこかにいってしまって探した経験は誰しもがあるはずです。 異なるモニタ上のアプリに切り替えた際にカーソルを分かりやすくハイライトしてくれるツールがMouse Follows Focusです。マルチディスプレイな環境の方にお勧めです。 Mouse Follows Focusの使い方 Mouse Follows Focusの動作デモです。波紋のような広がりでマウスポインタの場所が分かるようになっています。 常駐してメニューバーから呼び出せます。 もう一つの機能としてコンソールアプリにアクティブウィンドウ名が出るようになっています。 これはキーボードショートカットでアプリを切り替える人にとってはとても便利なツールです。個人的にカーソルを見失いことがよくあるので、必携のツールになり
無料で英単語にカーソルを合わせるだけで意味がわかるChrome拡張機能「iKnow! ポップアップ辞書」
「Google 翻訳」「Weblio辞書」「スペースアルク」など、無料で英語の意味を調べられる辞書サービスはいくつも存在しますが、辞書サービスをいちいち開かなくても、マウスカーソルを英単語に合わせるだけで品詞・単語の意味・発声データが瞬く間にポップアップして表示できる無料のChrome拡張機能が「iKnow! ポップアップ辞書」です。 iKnow! ポップアップ辞書 - iKnow! http://iknow.jp/popup_dictionary_extension/ ブラウジング中に知らない単語が出てきたら、マウスオーバーするだけでその単語の意味をポップアップ表示してくれる辞書が「iKnow! ポップアップ辞書」。 「学ぶ」を目的にすると長続きしないかもしれませんが、ネットサーフィン中に見つけた単語をポップアップでどんどん覚えていけるという仕組みです。 というわけで、「iKnow!」の
今一番気になるCSSの美しいエフェクト！インクを水面に落としたように波紋が広がり消えていく -Ripple Click Effect
Googleが先日発表した新しいUX「Material Design」の中で特に注目されているのが、タップやクリックをするとインクを落としたように波紋が広がるエフェクト。 これを実装するテクニックを紹介します。 Material Designについては、前の記事（「波紋」のアニメーションを実装するテクニック）で動画を紹介しています。 この波紋のエフェクトはあちこちのコミュニティで盛んで、その中でもここで紹介するエフェクトはかなり美しく仕上がっています。 デモではリストで配置したナビゲーションの各アイテムをクリックすると、そのクリックした地点を中心に波紋が広がり、フェードで消えていきます。 ※上記はエフェクトが分かりやすいよう、各アイテムの高さを広げています。 実際の動作は、下記ページでお楽しみください。 Ripple Click Effect from Google Material De
Windowsのデフォルト機能だけでマウスカーソルをキャプチャする方法
Windowsのデフォルト機能だけでマウスカーソルをキャプチャする方法を紹介します。 Windowsのデフォルト機能でマウスカーソルをキャプチャしたところ １．問題点 Windowsではデフォルト機能で画面をキャプチャするための「Print Screen」キーが用意されています。 具体的なキーの使い方は次のとおりです。 Print Screen押下：デスクトップをキャプチャ Alt+Print Screen押下：アクティブになっているウィンドウをキャプチャ キャプチャ後、「スタート」→「アクセサリ」→「ペイント」を開き、メニューバーの「編集」→「貼り付け」またはCtrl+vでキャプチャした画面がペーストされます。 ですが、この機能ではマウスカーソルを同時にキャプチャすることができません。 下のスクリーンショットは「テスト」というリンクの上にマウスカーソルを当てた状態のものをPrint Sc
CSS3で使える35+α種類のカーソルの一覧表。（CSS おれおれ Advent Calendar 2012 – 07日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 07日目 寝るまでが今日です。（ｷﾘｯ JavaScriptで拾うボタン風の要素にcursor:pointerのように指定した事もあるんじゃないかと思うんですが、それです。 結構色々と種類があるので、一覧を眺めておくと良いんじゃないでしょうか。特にアプリを作る方。 追記 2012-12-08: タイトルを「36+α種類」から「35+α種類」に変更。数え間違えてました……。 cursorプロパティの値一覧 各行ではそのcursorを設定しています。カーソルを乗っけてみてください。変化ない場合、ブラウザーがそのカーソルに対応してないです。 あとCSS 2.1の時点で仕様として定められてあったものは明記してあります。（18個） 記載ないものは全てCSS3ですね。 画像 値 説明 例
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
