【CSSのみ】全画面オーバーレイ検索フォームの作り方

【CSSのみ】全画面オーバーレイ検索フォームの作り方

今回はオーバーレイ検索フォームの作り方を紹介します。
画面全体を半透明に暗くして、その上に検索フォームが表示されるあれです。

コードのコピペだけでいいって方はここからコピペしてください。

オーバーレイ検索フォームとは？

オーバーレイ検索フォームとは、画面全体を半透明の色付きフィルターで暗くさせて、その上から検索用のサーチフォームを表示させるデザインです。

コンテンツの画面全体に上からオーバーレイさせて何かのコンテンツ（今回の場合はサーチフォーム）を表示させる仕組みを、モーダルウィンドウやダイアログボックスなどと言います。

クリック等で画面がふわっと暗くなり、検索フォームが表示される

モーダルウィンドウを使った見せ方はよく見かけると思いますが、以下の画像のようなものです。

画像内左側が通常時です。特定のボタンクリックなどをトリガーにしてオーバーレイフィルターが表示されると、画像内右側のようになります。その上から検索フォームを画面中心に表示させます。

Webのいろはでも検索フォームに実装しています。是非、ヘッダー内にある「」をクリックして実際の動作を確認してみてください。（PCからのアクセスのみに限ります。）

オーバーレイ検索フォームの作り方

オーバーレイ検索フォームはオーバーレイ部分と検索フォーム部分に分けられます。

inputタグとlabelタグでオーバーレイ部分の作成

オーバーレイ部分はinputタグとlabelタグとdivタグを使います。まずはHTMLから見ていきましょう。

オーバーレイ部分のHTMLコード

HTML
<div class="ol-searchform">
  <input id="ol-search" type="checkbox">
  <label for="ol-search" class="search-icon"></label>
  <div class="ol-search-wrap">
    <label for="ol-search" class="overlay"></label>
    <!--ここに検索フォームを入れる-->
  </div>
</div>

どの行がどんな役割なのか、順を追って１つずつ見ていきましょう。

  1. 一番外側（１行目）のdivタグ

    いちばん外側の<div class="ol-searchform">は、このオーバーレイ検索フォーム全体を囲うためのタグです。特にCSSなどは適用させませんが、中の要素の指定のために、何らかのclass名は付けておきましょう。

  2. ２行目のinputタグ

    <input id="ol-search" type="checkbox">は、表示・非表示を切り替えるためのinputタグで、type属性でcheckboxを指定します。
    checkboxではクリックするごとに“ON”と“OFF”が切り替わります。つまり、inputタグの動作でオーバーレイの表示・非表示を制御するわけです。

    また、id=”ol-search”で関連させたいlabelタグと連動をさせます。そして、このinputタグはCSSで非表示にしましょう。

  3. ３行目のlebelタグ

    <label for="ol-search" class="search-icon"></label>ですが、このlabelタグは実際にクリックする虫眼鏡アイコンの部分になります。

    for属性でinputタグのid属性を指定することで、labelをクリックするとinputタグのON・OFFを切り替えられるようになります。

    「class=”search-icon”」でアイコンを付けたりスタイルを調整します。

  4. ４行目のdivタグ

    <div class="ol-search-wrap">は、オーバーレイフィルター用のlabelタグと検索フォーム部分を囲うためのタグです。

    普段は非表示にしておいて、checkboxが“ON”になったときに表示されるようにCSSで制御します。

  5. ５行目のlabelタグ

    <label for="ol-search" class="overlay"></label>は、オーバーレイフィルター用のlabelタグです。こちらもfor属性でinputタグidを指定します。これによりinputタグのON・OFFにより表示・非表示を変えられるようになります。

    このlabelタグも普段は非表示にしておいて、checkboxが“ON”になったときに表示されるようにCSSで制御します。

<!–ここに検索フォームを入れる–>の部分に後述する検索フォーム部分のHTMLを入れます。

オーバーレイ部分のCSSコード

続いて、先ほどのHTMLタグに適用させるオーバーレイ部分のCSSコードを見ていきましょう。

HTML
#ol-search{
  display:none;
}
.search-icon{
  cursor:pointer;
}
.search-icon::before{
  font-family:FontAwesome;
  content:'\f002';
}
.overlay, 
.ol-search-wrap{
  display:none;
  opacity:0;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  animation:fade_overlay .3s;
}
.ol-search-wrap{
  z-index:9990;
}
.overlay{
  z-index:9991;
  background:rgba(0,0,0,.4);
}
#ol-search:checked ~ .ol-search-wrap,
#ol-search:checked ~ .ol-search-wrap .overlay{
  display:block;
  opacity:1;
}

CSSも同じようにセレクタごとに１行目から見ていきましょう。

  1. #ol-search

    display:none;を指定することで、id属性「ol-search」を持つinputタグを非表示にします。

  2. .search-icon

    cursor: pointer;でカーソルアイコンを変えます。必須ではなくこの指定が無くても問題ありませんが、クリッカブルな要素だと分かりやすくするため指定しました。

  3. .search-icon::before

    .search-iconの疑似要素::beforeに虫眼鏡アイコンを指定します。
    font-family:FontAwesome;でFont Awesomeを指定して、虫眼鏡のコードであるcontent:’\f002′;を記述します。

  4. .overlay,.ol-search-wrap

    .overlayと.ol-search-wrapの２つのプロパティに共通のスタイルを指定しています。

    まず通常は非表示にしておくので、display:none;とopacity:0;を指定します。

    そして、画面全体に表示させるためposition:fixed;、top:0;、left:0;、width:100%;、height:100%;を指定します。

    animation:fade_overlay .3s;は滑らかにふわっと表示させるためのCSSなので、なくても動作します。ここはお好みで！
    使う場合は、@keyframeでアニメーションを作成してこのプロパティで読み込みます。例では「fade_overlay」というkeyframeアニメーションを0.3秒かけて実行します。

    fade_overlayのアニメーションCSSは以下になります。

    @keyframes fade_overlay{
  0%{
    display:none;
    opacity:0;
  }
  1%{
    display:block;
    opacity:0;
  }
  100%{
    display:block;
    opacity:1;
  }
}
  5. .ol-search-wrap

    z-index:9990;で他の要素より前面に表示されます。

  6. .overlay

    z-index:9991;で他の要素より前面に表示されます。
    また、background:rgba(0,0,0,.4);で半透明の黒い色を付けています。

  7. #ol-search:checked ~ .ol-search-wrap
    #ol-search:checked ~ .ol-search-wrap .overlay

    ここはセレクタ自体がややこしいですが:checkedで、inputタグが“ON”の時にそのあとに続く要素（「.ol-search-wrap」と「.ol-search-wrap」の中の「.overlay」）にスタイルを適用させるという意味です。

    具体的なプロパティはdisplay:block;とopacity:1;です。これは「.overlay,.ol-search-wrap」で指定したdisplay:none;とopacity:0;に対して、inputが“ON”の時に上書きして表示するように指定するCSSです。

オーバーレイ部分の動作確認

ここまでのHTMLとCSSの動作確認をしてみましょう。以下のように虫眼鏡アイコンが表示され、クリックすると半透明のオーバーレイが表示されます。
オーバーレイフィルターはlabelタグなのでクリックすることができます。
これによりオーバーレイフィルターが表示されているときは画面のどこをクリックしてもオーバーレイを閉じることができます。

下の虫眼鏡アイコンをクリックしてみましょう！

※inputのidが最終結果と重複してしますので、ここではinputタグとlabelタグの「ol-search」を「ol-search1」に変更しています。


オーバーレイは表示されましたが中のコンテンツはまだないので、次はオーバーレイの中に記述する検索フォームを作っていきましょう。

検索フォーム部分の作成

オーバーレイの中に入れる検索フォームを作っていきましょう。検索フォームに関しては特に決まりはないので自分のサイトで使っているものに置き換えても問題ないはずです。

この記事では一例として、Webのいろはのヘッダーで実際に使っている検索フォームで作ります。
まずは、HTMLとCSSのコードを見てみましょう。

HTML
<form role="search" method="get" class="searchform" action="#">
  <input type="search" class="search-field" name="s" placeholder="KEYWORD">
  <button type="submit" class="search-submit">
    <span class="fa fa-search fa-fw"></span>
  </button>
</form>
CSS
.ol-searchform .searchform{
  position:fixed;
  top:50%;
  left:50%;
  z-index:9999;
  width:60%;
  max-width:520px;
  border:solid 2px #fff;
  border-radius:4px;
  transform:translate(-50%,-50%);
  display:flex;
}
.ol-searchform .search-field, .ol-searchform .search-submit{
  height:48px;
  padding:4px 12px;
  border:none;
  background:rgba(0,0,0,.3);
  font-size:18px;
  color:#fff;
  transition:.3s;
  outline:none;
}
.ol-searchform .search-field{
  flex:1;
  border-radius:4px 0 0 4px;
}
.ol-searchform .search-submit{
  cursor:pointer;
  border-radius:0 4px 4px 0;
}
.ol-searchform .search-field:focus,
.ol-searchform .search-field:focus + .search-submit{
  background:rgba(0,0,0,1);
}

複雑に見えますが、意外とシンプルでHTMLでは検索フォーム全体をformタグで囲み、その中にinputタグとbuttonタグで実際のフォームを作っています。基本的な検索フォームな形ですよね。

続いてCSSですが、formタグとその中のinput、buttonタグに分けて見てみましょう。

formタグのCSS解説

まずformタグのクラス.searchformは、position:fixed;、top:50%;、left:50%;transform:translate(-50%,-50%);で画面中央に表示させます。

z-index:9999;はオーバーレイフィルターよりも全面に表示させるためです。（値がオーバーレイのものより小さくなると入力できなくなるので注意！）
その他、幅や線などの見た目を装飾しています。

最後の行のdisplay:flex;で中のinputタグとbuttonタグが横に並ぶようにしています。

inputタグ、buttonタグのCSS解説

基本的に見た目の装飾がメインですが、input要素のクラスである.search-fieldにflex:1;を指定することでテキスト入力ボックスが親要素からbuttonタグの幅を引いた値になるようにしています。

buttonタグの中にspanタグでFont Awesomeのアイコンを表示させています。

これでオーバーレイ検索フォームは完成です。

オーバーレイ検索フォームの動作確認

ここまでのHTMLコード・CSSコードで問題なく動作するはずです。以下の虫眼鏡アイコンをクリックしてみてください。

ちゃんと動作しましたね。（検索フォームはダミーなので検索はできませんが）
Webのいろはのように、サイトヘッダー内に実装するなどカスタムしてどんどん使ってみてください。

この記事のまとめ

今回は「オーバーレイ検索フォームの作り方」ということで、全コードを見ながら解説しました。

オーバーレイ部分と検索フォーム部分に完全に分けられているので、オーバーレイだけ使って中のコンテンツは別のものにするといった使い方もできます。

最後に、コピペ用にコードをまとめたものを貼っておきます。

コピペ用のコード

HTML
<div class="ol-searchform">
  <input id="ol-search" type="checkbox">
  <label for="ol-search" class="search-icon"></label>
  <div class="ol-search-wrap">
    <label for="ol-search" class="overlay"></label>
    <form role="search" method="get" class="searchform" action="#">
      <input type="search" class="search-field" name="s" placeholder="KEYWORD">
      <button type="submit" class="search-submit">
        <span class="fa fa-search fa-fw"></span>
      </button>
    </form>
  </div>
</div>
HTML
#ol-search{
  display:none;
}
.search-icon{
  cursor:pointer;
}
.search-icon::before{
  font-family:FontAwesome;
  content:'\f002';
}
.overlay, 
.ol-search-wrap{
  display:none;
  opacity:0;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  animation:fade_overlay .3s;
}
.ol-search-wrap{
  z-index:9990;
}
.overlay{
  z-index:9991;
  background:rgba(0,0,0,.4);
}
#ol-search:checked ~ .ol-search-wrap,
#ol-search:checked ~ .ol-search-wrap .overlay{
  display:block;
  opacity:1;
}
.ol-searchform .searchform{
  position:fixed;
  top:50%;
  left:50%;
  z-index:9999;
  width:60%;
  max-width:520px;
  border:solid 2px #fff;
  border-radius:4px;
  transform:translate(-50%,-50%);
  display:flex;
}
.ol-searchform .search-field, .ol-searchform .search-submit{
  height:48px;
  padding:4px 12px;
  border:none;
  background:rgba(0,0,0,.3);
  font-size:18px;
  color:#fff;
  transition:.3s;
  outline:none;
}
.ol-searchform .search-field{
  flex:1;
  border-radius:4px 0 0 4px;
}
.ol-searchform .search-submit{
  cursor:pointer;
  border-radius:0 4px 4px 0;
}
.ol-searchform .search-field:focus,
.ol-searchform .search-field:focus + .search-submit{
  background:rgba(0,0,0,1);
}