タグ

操作とリンクに関するmasakuma0812のブックマーク (2)

  • React RouterのuseNavigateとは

    今回の記事では、React におけるルーティングについて解説していきます。 React 体にはルーティング機能が組み込まれていないため、どのようにページ遷移や URL の管理を行うのか疑問に思う方もいると思います。 そこで今回は、Reac... useNavigateとは useNavigateはReact Routerのフックで、Reactの関数コンポーネント内でページ遷移を制御するために使われます。 useNavigateを呼び出すと、ページ遷移を行うための関数(navigate関数)が返されます。 このnavigate関数に移動先のパスを渡すことで、アプリケーション内でのページ遷移を実行することができます。 基的な使い方 useNavigateの基的な使い方を説明します。 import { useNavigate } from 'react-router-dom'; funct

    React RouterのuseNavigateとは
  • 【CSS】まだホバー時のスタイルを :hover だけで指定してるの?

    はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう! @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス(正確には、ホ

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