検索窓

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

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

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

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

検索窓

おさえておきたいところ

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

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

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

See the Pen 虫眼鏡マークをクリックすると検索窓が伸びて出現 by Web Navigator (@web-navigator) on CodePen.

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

See the Pen 虫眼鏡マークをクリックすると全画面表示で検索窓が出現 by Web Navigator (@web-navigator) on CodePen.

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

See the Pen 虫眼鏡マークをクリックすると下からふわっと検索窓が出現 by Web Navigator (@web-navigator) on CodePen.

次回の予定

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

合わせて読みたい

ページトップリンク

WEBさん

WordPressの不具合をなおす人

TwitterInstagramYouTubeContact

あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか？ WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。