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

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

CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）

完成図

---

プチ宣伝

公開日記というwebアプリを作りました。名前の通り毎日の日記を公開できるアプリです（公開しないことも可能）。現在利用者が自分しかいません。使ってください。お願いします😭。詳しく知りたい方は↓
簡単に日記が公開できるアプリ「公開日記」をリリースした。

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>

虫眼鏡の画像は好きなものをダウンロードしてください。
自分は虫眼鏡の画像の中からイラストをダウンロードしました。

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だけで簡単！ハンバーガーメニューの作り方（スマホ対応）を見てください。
ここまで見てくれてありがとうございました。