【初心者でもわかる】CSSでカッコいいオシャレな検索窓（検索ボックス）の作り方

どうも7noteです。マウスホバーしたらシュッと出てくるオシャレな検索窓の作り方

このようなシャレた検索窓を作ります。ヘッダーなどにあるといい感じになるかも？

オシャレ検索窓の作り方

※画像サイズは16px×16pxです。

index.html

<div class="searchbox">
  <a href="#"><img src="icon.png" alt="虫眼鏡"></a>
  <input type="text" name="search" placeholder="検索ワード入力">
</div>

style.css

.searchbox {
  width: 200px;        /* 入力フォームの横幅 */
  position: relative;  /* 基準値とする */
  text-align: right;   /* 画像を右寄せにする */
}

.searchbox:hover {
  cursor: pointer;    /* hover時にカーソルを指の形にする */
}


.searchbox img {
  width: 16px;        /* 画像サイズと同じ横幅を指定 */
  border-radius: 50%; /* 正円にする */
  padding: 4px;       /* 余白4pxをとる */
  transition: .3s;    /* アニメーションの時間指定 */
}

.searchbox:hover img {
  background: rgba(200, 200, 200, .5);  /* 背景色にうすいグレーを指定 */
  position: relative;                   /* z-indexを指定するため。 */
  z-index: 10;                          /* ほかよりも前面に表示 */
}


.searchbox input {
  width: 24px;          /* 横幅を24pxに指定 */
  height: 24px;         /* 高さを24pxに指定 */
  border: 1px solid #666; /* グレーの線を表示 */
  border-radius: 12px;  /* 高さの半分の角丸を指定 */
  padding: 2px 5px;     /* 適度な余白を指定 */
  box-sizing: border-box; /* 計算を簡単にするため */
  transition: .5s;      /* アニメーションの時間を指定 */
  opacity: 0;           /* 透明にする */
  position: absolute;   /* 相対位置に指定 */
  top: 0;               /* 上から0pxの位置に指定 */
  right: 0;             /* 右から0pxの位置に指定 */
  outline: none;        /* カーソルがあたった時のアウトラインを消す */
}

.searchbox:hover input {
  width: 100%;          /* ホバー時は幅いっぱいまで大きくさせる */
  opacity: 1;           /* ホバー時は透明度を解除する */
}

解説

親要素(.searchbox)に検索ボックスのエリアを作ります。
中のaタグ（画像）を右寄せで配置。そして入力ボックスのinputはopacityを使って透明度を変えて見えなくしておきます。

親要素(.searchbox)がホバーした時に、画像は背景色を入れ、inputは透明を解除しつつ横幅を長くして右からみょーんっとでてくるような動きを入れます。

まとめ

動きのあるサイトが多くなってきたので、ユーザーがよくカーソルを置くような箇所には邪魔にならない程度のアニメーションをいれるなどの工夫が施されているのとよく見かけます。
いろいろなサイトを見て、「この動き、どうやったら実装できるのかな？」と考えながらやるのも勉強になって、スキルアップに繋がると思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ