テキストナビゲーション

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

テキストナビゲーション

テキストナビゲーションのホバー演出は、「ここはクリックできる」という合図（アフォーダンス）をさりげなく強化する技術です。線が伸びる・背景が走る・文字が入れ替わる――どれも一瞬の演出ですが、リンクの発見しやすさと操作の気持ちよさに直結します。

このデモ集は、線と背景の「伸ばし方」を方向・位置別に細かく分解しているのが特徴です。仕組みはいずれも疑似要素（::after等）をtransformで伸縮させる共通パターンで、応用が利きます。

今回はメニューにマウスポインタを持っていった時のテキストナビゲーションのアニメーションを作りました。

おさえておきたいところ

テキストナビゲーションを使う目的と使いどころはこんな感じです。

        目的：ユーザーを的確に情報に導く
使いどころ：マウスオーバー

線が伸びて枠線になる

テキストが入れ替わる

楕円が線に変化

上下に線が伸びて背景になる

左から右に線が伸びて背景になる

左から右に背景が伸びる

左から右に線が伸びる（上部）

左から右に線が伸びる（下部）

中心から外に線が伸びる（中央）

中心から外に線が伸びる（下部）

左から右に背景が伸びる

左から右に線が伸びる（上部）

左から右に線が伸びる（下部）

実務メモ（2026年追記）

保守目線での注意はふたつ。まず、hover演出はタッチ端末には存在しない世界なので、@media (hover: hover)でポインタ環境に限定し、タッチでは初回タップが「ホバー扱い」になって二度押しが必要になる事故を避けます。次に、同じ演出を:focus-visibleにも適用して、キーボード操作でも現在地が見えるようにしておくこと。装飾の下線を消す場合は、色以外の手掛かりを必ず残します。

• ナビ項目のタップ領域は文字より広く（padding で44px前後を確保）
• 演出は0.2〜0.3秒程度。ナビは頻繁に触る場所なので「速い」が正義
• 現在ページのハイライト（カレント表示）は演出より優先度が高い
• ボタン型のリンク装飾はボタン２で体系的に扱っています

次回の予定

掲載内容をコンパクトに収め、情報の全体像や重要度を俯瞰的に見せるタブメニューを作ってみようと思います＼＼\٩( ‘ω’ )و //／／