フォーカスすると幅が広がる！検索したくなる検索ボックス！

作成:2018.12.19 更新:2020.5.23

ある程度ブログの記事数が多くなってきたら、ユーザーが目的の記事を見つけやすいように「ブログ内検索」をつけるべきでしょう。

検索ボックスは目の付きやすいヘッダーにつけることが多いですが、ヘッダーは他にも表示したい項目が多く、場所がせまい場合が多いです。とくにスマホからの表示を考えると置き場所に困ります。

そんな時は、フォーカスがあたると幅が広がる検索ボックスにするとスペースがなくても検索ボックスを配置できます。

ソースコード＆プレビュー

まずはいつも通りソースコードとプレビューからです。虫眼鏡のアイコンをクリックすると、ぬめっとエディットボックスが広がります。思わず検索したくなりますね。

ソースコードの解説

虫眼鏡アイコンとエディットボックスを作る

まずはHTMLで虫眼鏡アイコンとエディットボックスを作ります。

form要素にinput要素を入れ子にして作ります。form要素にはFontAwesomeで虫眼鏡のアイコンをつけ、input要素でエディットボックスと送信ボタンを表示します。

HTML

<form method="get" class="fa fa-search search-form" action="https://bgt-48.blogspot.com/search">
  <input type="search" placeholder="キーワードを入力して、Enter" value="" name="q" class="search-text" />
  <input type="submit" value="Search" />
</form>

Bloggerでは、https://bgt-48.blogspot.com/search?q=キーワードというURLを入力すると検索が行われます。そのため、form要素のaction属性にはhttps://bgt-48.blogspot.com/searchを、input要素のname属性にはqを入力しています。これらとユーザーが入力したキーワードが結合されて最終的にhttps://bgt-48.blogspot.com/search?q=キーワードというURLを生成されます。

この部分は使用しているサイトによって異なりますので、それぞれのサイトに適した形に編集してください。

送信ボタンを非表示にする

今回は送信ボタンは使用しないため、display: noneで常に非表示にします。

CSS

.search-form input[type="submit"] {
  display: none;
}

虫眼鏡アイコンとエディットボックスを重ねる

さて、次にCSSで虫眼鏡アイコンとエディットを重ねていきます。
from要素にposition: relative;を、input要素にposition: absolute;を指定します。これで、虫眼鏡アイコンとエディットボックスが重なります。

CSS

.search-form {
  display: block;
  position: relative;
}
.search-form:before, .search-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 3em;
  height: 3em;
  margin: 0;
  border-radius: 1.5em;
  font-size: 1em;
}

top: 0;とleft: 0;、margin: 0を指定し、左上を原点にぴったりと重なります。（今回はアイコンを左に寄せて表示するため、left: 0としていますが、右上に表示させたい場合はright: 0にします。）

width: 3emとheight: 3emはアイコンの大きさです。border-radius: 1.5emをつけて角丸にしています。

font-size: 1emもアイコンとエディットボックスをピッタリ重なるようにするための指定です。アイコンのフォントサイズとエディットボックスのフォントサイズが違うとぴったり重ならないため、フォントサイズを指定しています。

アイコンとエディットボックスの重なり順を指定する

次にアイコンとエディットボックスの重なり順を指定します。

エディットボックスはアイコンより手前に表示されてほしいので、z-indexで重なり順を制御します。数値の大きいほうが手前に表示されます。

CSS

.search-form:before {
  z-index: 100;
}
.search-text {
  z-index: 200;
}

フォーカスがあたったら幅を広げる

次にアイコンをクリックしたら幅を広げるようにします。

これまでのCSSでアイコンとエディットボックスがピッタリ重なっている状態となっています。通常はエディットボックスを透明にしておいて、フォーカスが当たった場合に表示しつつ幅を広げます。

CSS

.search-text {
  opacity: 0;
}
.search-text:focus {
  opacity: 1;
  width: 100%;
}

なので、じつはアイコンをクリックしたようにみせて、実はエディットボックスをクリックしています。

アイコンとエディットボックスを装飾する

最後にアイコンとエディットボックスを装飾していきます。

CSS

.search-form:before {
  line-height: 3em;
  background: #65b1e4;
  color: #FFF;
  text-align: center;
}
.search-text {
  cursor: pointer;
  transition: .5s;
  outline: 0;
  border: solid 1px #ccc;
  border-radius: 1.5em;
  padding-left: 1em;
}