qiitaなどに実装されているスマホ用検索ボックスをhtmlとcssだけで作る。

今回はqiitaのスマホ版に実装されているタップすると検索フィールドが出てくるやつを作ろうと思います。ハンバーガーメニューの作り方を応用して作りました。ハンバーガーメニューの作り方は以下を参考にしました。

[CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）](https://saruwakakun.com/html-css/reference/nav-drawer)

完成図
![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/a2529f48-d697-22f7-9cc4-dd2a23abf4d2.png)

---

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/b2d7b126-83de-11d7-b3ce-ddc813915755.png)

##プチ宣伝
[公開日記](https://public-diary.herokuapp.com/)というwebアプリを作りました。名前の通り毎日の日記を公開できるアプリです（公開しないことも可能）。現在利用者が自分しかいません。使ってください。お願いします😭。詳しく知りたい方は↓
[簡単に日記が公開できるアプリ「公開日記」をリリースした。](https://qiita.com/UTOG/items/c0f3b8a8e8eae82e2e99)

https://public-diary.herokuapp.com/

##HTML

```html:html
<div id="serch-drawer">
    <input id="serch-input" type="checkbox" class="nav-unshown">
    <label id="nav-open" for="serch-input"><img src="/assets/虫眼鏡.png" class="glass"></label>
    <label class="nav-unshown" id="nav-close" for="serch-input"></label>
    <div id="serch-content">
     <form action="/diaries", method="get", class="serch">
     <input type="text" name="search" class="serch_bar", placeholder="キーワード検索">
     <input type="submit" value="検索" class="serch_button">
     </form>
     </div>
  </div>
```

虫眼鏡の画像は好きなものをダウンロードしてください。
自分は[虫眼鏡の画像](https://www.silhouette-ac.com/category.html?sw=%E8%99%AB%E7%9C%BC%E9%8F%A1&nq=&srt=dlrank)の中からイラストをダウンロードしました。

##CSS

```css:CSS
#serch-drawer {
    position: relative;
  }
  
  /*チェックボックス等は非表示に*/
  .nav-unshown {
    display:none;
  }
  
  /*アイコンのスペース*/
  #nav-open {
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle;
  }
  
  /*ハンバーガーアイコンをCSSだけで表現*/
  #nav-open span, #nav-open span:before, #nav-open span:after {
    position: absolute;
    height: 3px;/*線の太さ*/
    width: 25px;/*長さ*/
    border-radius: 3px;
    background: #555;
    display: block;
    content: '';
    cursor: pointer;
  }
  #nav-open span:before {
    bottom: -8px;
  }
  #nav-open span:after {
    bottom: -16px;
  }
  /*閉じる用の薄黒カバー*/
  #nav-close {
    display: none;/*はじめは隠しておく*/
    position: fixed;
    z-index: 99;
    top: 0;/*全体に広がるように*/
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
  }
  
  /*中身*/
  #serch-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;/*最前面に*/
    width: 100%;/*右側に隙間を作る（閉じるカバーを表示）*/
    height: 50px;
    background: #fff;/*背景色*/
    transition: .3s ease-in-out;/*滑らかに表示*/
    -webkit-transform: translateY(-105%);
    transform: translateY(-105%);/*左に隠しておく*/
  }
  
  /*チェックが入ったらもろもろ表示*/
  #serch-input:checked ~ #nav-close {
    display: block;/*カバーを表示*/
    opacity: .5;
  }
  
  #serch-input:checked ~ #serch-content {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);/*中身を表示（右へスライド）*/
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
  }
  .glass {
    margin: 5px;
    width: 30px;
    height: 30px;
  }

   /*ここからは検索フォーム自体のデザインです。検索フォームのデザインは自分でするという方は飛ばしてください。*/
  .serch {
    position: absolute;
    margin: 0 250px 0 100px;
  }
.serch_bar {
  position:absolute; 
  height: 3.0em;
  border-radius: 20px 0 0 20px;
  border: 1px solid #999;
  outline : none;
  padding: 0 0 0 13px;
  margin: 5px 0;
}
.serch_button {
  position: absolute;
  left:170px; 
  width: 3.5em;
  height: 3.15em;
  border-radius: 0 20px 20px 0;
  background: #82aaaa;
  color: #fff;
  border: none;
  margin: 5px 0;
}
```

ハンバーガーメニューのコードを変更しただけなのでもしかしたらいらないコードがあるかもしれないです。もしあったらコメントお願いします。


##完成

これで完成です。一つ一つのコードを解説していくと長くなってしまう（めんどk...)しやっていることはハンバーガーメニューとほぼいっしょなので気になる方は、
[CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）](https://saruwakakun.com/html-css/reference/nav-drawer)を見てください。
ここまで見てくれてありがとうございました。