【小ネタ】HTMLのみでサイト内検索を実現する

備忘録

Googleのサイト内検索機能が手軽に実装できる

検索フォーム設置用のHTMLコード

.html

<form action="https://www.google.com/search" class="search-form" method="get" target="_blank">
    <input type="hidden" name="hl" value="ja">
    <input type="hidden" name="sitesearch" value="https://qiita.com/">
    <input type="text" name="q" size="30" maxLength="255">
    <button type="submit">検索</button>
</form>

コード補足

formタグ内

• target="_blank" -> 別タブで検索結果を表示

inputタグ内

パラメータ名	内容
q	検索キーワード
hl	言語指定 ※日本語なら「ja」
sitesearch	検索対象サイト

見た目を整える用のCSSコード

CSSファイルはこちら

.css

.search-form {
  display: flex;
  align-items: center;
  gap: 0 10px;
  width: 400px;
}

.search-form input {
    width: 100%;
    height: 34px;
    padding: 1px 5px 1px 8px;
    border: 1px solid #999999;
    box-sizing: border-box;
    color: #000;
    outline: none;
}

.search-form button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    max-width: 140px;
    height: 34px;
    border: none;
    background-color: #4070ff;
    color: #fff;
    cursor: pointer;
}

.search-form button::before {
    width: 14px;
    height: 14px;
    margin-right: 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    content: '';
}

出来上がりの結果

検索フォーム

Qiitaを対象にサイト内検索してみる

参考記事

• 検索フォームのデザイン参考：CSS Stock