検索窓

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

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

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

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

検索窓

検索窓を常設せず、虫眼鏡アイコンをクリックしたときだけ展開する――ヘッダーの限られたスペースを節約する定番パターンです。このページでは「横に伸びる」「全画面に出る」「下からふわっと出る」という展開演出の3系統をデモにしています。

検索はサイト内で迷った人の最後の頼みの綱です。だからこそ、隠しておくなら「見つけやすいアイコン」と「開いたら迷わない挙動」の両方が揃って初めて成立します。

おさえておきたいところ

「検索窓」を使う目的と動きのきっかけはこんな感じです。

             目的：ユーザーの目的の情報に早くたどり着かせる
動きのきっかけ：クリック

虫眼鏡マークをクリックすると検索窓が伸びて出現

虫眼鏡マークをクリックすると全画面表示で検索窓が出現

虫眼鏡マークをクリックすると下からふわっと検索窓が出現

実務メモ（2026年追記）

デモは当時のまま残しています。保守・新規実装での要点は、見た目より「フォームとしての正しさ」です。入力欄にはlabel（見せたくなければaria-label）を必ず付け、虫眼鏡はdivではなく<button>で。展開した瞬間に入力欄へフォーカスを移し、ESCで閉じて元のボタンへフォーカスを戻す――この一連の流れが揃うと、マウスでもキーボードでも気持ちよく使えます。

• アイコンのタップ領域は44px前後を確保（見た目の虫眼鏡より大きく）
• 全画面展開型はモバイルで没入感がある反面、閉じ方が分からないと致命的。「×」を明示する
• WordPressなら検索結果ページ（?s=）の品質もセットで確認しておく
• 同じくヘッダーに畳み込む部品としてグローバルナビゲーション１も参照

次回の予定

ページの先頭へ迅速に戻る「ページトップリンク」を作ってみようと思います＼＼\٩( ‘ω’ )و //／／