JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSとJavaScriptで作る全画面検索ボックスの実装方法【サンプルコード付き】

CSSとJavaScriptを組み合わせれば、クリック1つで画面全体に広がるオーバーレイ型の検索ボックスを手軽に実装できます。本記事では、ボタンをクリックすると検索画面が全画面で開き、右上の×ボタンで閉じられる仕組みを、実際に動作するサンプルコードとともにわかりやすく解説します。

全画面検索ボックスの実装サンプル

以下が、HTML・CSS・JavaScriptを使った全画面検索ボックスの完全なサンプルコードです。そのままコピーしてブラウザで開けば、すぐに動作を確認できます。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.min.css">
<style>
body {
  font-family: Arial;
}
* {
  box-sizing: border-box;
}
.showBtn {
  background: #008b0c;
  border: none;
  color: white;
  padding: 10px 15px;
  font-size: 20px;
  cursor: pointer;
  opacity: 0.8;
}
.showBtn:hover {
  opacity: 1;
}
.overlaySearch {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgba(132, 150, 155, 0.747);
}
.searchBar {
  position: relative;
  top: 46%;
  width: 80%;
  margin: auto;
}
.overlaySearch .hideBtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  cursor: pointer;
  color: rgb(255, 0, 0);
  opacity: 0.8;
}
.overlaySearch .hideBtn:hover {
  opacity: 1;
}
.overlaySearch input[type=text] {
  padding: 15px;
  font-size: 17px;
  border: none;
  float: left;
  width: 80%;
  background: white;
}
.overlaySearch input[type=text]:hover {
  background: #f1f1f1;
}
.overlaySearch button {
  float: left;
  width: 20%;
  padding: 15px;
  background: rgb(54, 21, 241);
  font-size: 17px;
  border: none;
  color: white;
  cursor: pointer;
  opacity: 0.8;
}
.overlaySearch button:hover {
  opacity: 1;
}
</style>
</head>
<body>
<div class="overlaySearch">
  <span class="hideBtn">&times;</span>
  <div class="searchBar">
    <form>
      <input type="text" placeholder="Search Here..">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>
<h1>Fullscreen Search Example</h1>
<button class="showBtn">Open Search Box</button>
<p>上のボタンをクリックすると、検索ボックスが全画面で開きます</p>
<script>
document.querySelector('.hideBtn').addEventListener('click', hideSearch);
document.querySelector('.showBtn').addEventListener('click', showSearch);
function showSearch() {
  document.querySelector('.overlaySearch').style.display = "block";
}
function hideSearch() {
  document.querySelector('.overlaySearch').style.display = "none";
}
</script>
</body>
</html>

コードのポイント解説

1. オーバーレイの基本設定

.overlaySearch クラスでは、position: fixed を指定して要素をビューポート基準で固定し、widthとheightを100%にすることで画面全体を覆っています。初期状態は display: none で非表示にしておき、必要なタイミングでのみ表示する仕組みです。背景色には rgba() を使用して半透明にしているため、背後のページが薄っすらと透けて見える洗練された演出になります。さらに z-index: 1 を指定することで、他のコンテンツよりも手前に確実に表示されます。

2. 検索バーの中央配置

.searchBar クラスは top: 46% で縦位置を微調整し、margin: auto によって水平方向の中央揃えを実現しています。テキスト入力欄は幅80%、検索ボタンは幅20%に設定し、それぞれに float: left を指定することで横一列に並べています。入力欄にカーソルを合わせると背景色が変化するホバー効果も加えてあり、操作性と見た目の両方を向上させています。

3. JavaScriptで表示・非表示を切り替える

querySelector() で対象の要素を取得し、addEventListener() でクリックイベントを登録します。「Open Search Box」ボタンが押されると showSearch() 関数が呼び出され、オーバーレイが display: block で全画面表示されます。逆に右上の×ボタンが押されると hideSearch() 関数が実行され、display: none で元の画面に戻ります。わずか数行のJavaScriptで直感的なユーザーインターフェースを実現できる点が大きな魅力です。

実行結果

上記のコードをブラウザで開くと、まず緑色の「Open Search Box」ボタンが表示されます。

このボタンをクリックすると、画面全体が半透明のグレーで覆われ、中央に検索バーが現れます。キーワードを入力して虫眼鏡アイコンのボタンを押せば検索が実行され、右上の赤い×ボタンをクリックすればいつでも元の画面へ戻ることができます。

  1. CSSとJavaScriptでスナックバー／トーストを実装する方法【サンプルコード付き】

    スナックバー（トースト）は、画面の端に一時的に表示される小さな通知メッセージのことです。「保存が完了しました」などの操作結果をユーザーへ伝える際によく使われ、数秒後に自動的に消えるのが特徴です。CSSとJavaScriptを組み合わせれば、特別なライブラリを使わずとも簡単に実装できます。以下に、ボタンをクリックすると画面下部にスナックバーが表示され、数秒後にフェードアウトするサンプルコードを示します。コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu

  2. CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

    CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini