どうも7noteです。マウスホバーしたらシュッと出てくるオシャレな検索窓の作り方
このようなシャレた検索窓を作ります。ヘッダーなどにあるといい感じになるかも？
オシャレ検索窓の作り方
※画像サイズは16px×16pxです。
index.html
<divclass="searchbox"><ahref="#"><imgsrc="icon.png"alt="虫眼鏡"></a><inputtype="text"name="search"placeholder="検索ワード入力"></div>style.css
.searchbox{width:200px;/* 入力フォームの横幅 */position:relative;/* 基準値とする */text-align:right;/* 画像を右寄せにする */}.searchbox:hover{cursor:pointer;/* hover時にカーソルを指の形にする */}.searchboximg{width:16px;/* 画像サイズと同じ横幅を指定 */border-radius:50%;/* 正円にする */padding:4px;/* 余白4pxをとる */transition:.3s;/* アニメーションの時間指定 */}.searchbox:hoverimg{background:rgba(200,200,200,.5);/* 背景色にうすいグレーを指定 */position:relative;/* z-indexを指定するため。 */z-index:10;/* ほかよりも前面に表示 */}.searchboxinput{width:24px;/* 横幅を24pxに指定 */height:24px;/* 高さを24pxに指定 */border:1pxsolid#666;/* グレーの線を表示 */border-radius:12px;/* 高さの半分の角丸を指定 */padding:2px5px;/* 適度な余白を指定 */box-sizing:border-box;/* 計算を簡単にするため */transition:.5s;/* アニメーションの時間を指定 */opacity:0;/* 透明にする */position:absolute;/* 相対位置に指定 */top:0;/* 上から0pxの位置に指定 */right:0;/* 右から0pxの位置に指定 */outline:none;/* カーソルがあたった時のアウトラインを消す */}.searchbox:hoverinput{width:100%;/* ホバー時は幅いっぱいまで大きくさせる */opacity:1;/* ホバー時は透明度を解除する */}解説
親要素(.searchbox)に検索ボックスのエリアを作ります。
中のaタグ（画像）を右寄せで配置。そして入力ボックスのinputはopacityを使って透明度を変えて見えなくしておきます。
親要素(.searchbox)がホバーした時に、画像は背景色を入れ、inputは透明を解除しつつ横幅を長くして右からみょーんっとでてくるような動きを入れます。
まとめ
動きのあるサイトが多くなってきたので、ユーザーがよくカーソルを置くような箇所には邪魔にならない程度のアニメーションをいれるなどの工夫が施されているのとよく見かけます。
いろいろなサイトを見て、「この動き、どうやったら実装できるのかな？」と考えながらやるのも勉強になって、スキルアップに繋がると思います。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ