検索窓のコーディング①【Webサイト制作案件でよく使うサンプルコード】

検索窓のコーディング①【Webサイト制作案件でよく使うサンプルコード】

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

  • HTML、CSSで検索窓のコーディングをする方法が知りたい
  • Webサイト制作案件でよくあるシンプルな検索窓のサンプルコードが見たい
  • 虫眼鏡アイコン付きのコーディングはどんなHTML構造で作るのか知りたい

という方のお悩みを解決します!

今回、紹介するサンプルコードはぼくがかつて、実際のWebサイト制作案件で使用したものです。

WordPressの有料大人気テーマ SANGOの検索窓を参考に作りました。

コーディングで躓いている方のお役に立てれば幸いです!

完成イメージ

今回紹介するコードで実現できる検索窓はこちら!

▼▼▼

検索窓のコーディングサンプル

両端が丸みを帯びていて可愛らしいデザインですね!

検索を実行するには、入力欄でエンターを叩くか、虫眼鏡アイコンをクリックするか、といった仕様となります。

こちらを構成する要素としては、

  • inputのsearchタグ
  • buttonタグ
  • 虫眼鏡アイコン

となります。

以下で紹介するコードをお使いいただければ、とりあえず見た目だけは秒で再現できます!

それでは見ていきましょう〜〜

虫眼鏡アイコンつきの検索窓サンプルコード

こちら、CodePenで作った見本です!

もちろん、レスポンシブ対応しておりますよ!

See the Pen
WNrjwmP
by 石森裕也 (@yuyaphotograph)
on CodePen.

HTML

こちら、超シンプルな検索窓のHTML構造です!

HTML
<div class="wrap">
  <div class="Box">
    <input type="search" class="Box-SearchInput" name="" value="" placeholder="〇〇で探す">
    <button type="submit" class="Box-Btn" name=""><img src="虫眼鏡アイコンのURL" class="Box-Btn-Icon" alt=""></button>
  </div>
</div>

CSS

こちらスタイリングです!

文字サイズや、上下の余白、検索窓の高さ、アイコンの大きさなどはよしなに変更してお使いください。

CSS
.wrap{
  margin-left: auto;
  margin-right: auto;
  padding: 24px;
  max-width: 800px;
  background: pink;
}
img{
  width: 100%;
  height: auto;
  display: block;
}

.Box {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
}
.Box-SearchInput {
  border-radius: 4px;
  border: none;
  width: 100%;
  height: 55px;
  letter-spacing: 0.1em;
  padding-left: 20px;
  padding-right: 55px;
  background: #fff;
  color: #000;
  font-size: 14px;
}
@media screen and (max-width: 540px) {
  .Box-SearchInput {
    height: 45px;
    padding-right: 45px;
    font-size: 12px;
  }
}
.Box-Btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 55px;
  height: 55px;
  line-height: 55px;
  padding: 0;
  border: none;
  border-radius: 0 4px 4px 0;
  background: #2f2e2e;
  vertical-align: middle;
}
@media screen and (max-width: 540px) {
  .Box-Btn {
    width: 45px;
    height: 45px;
    line-height: 45px;
  }
}
.Box-Btn-Icon {
  margin-left: auto;
  margin-right: auto;
  width: 19px;
  height: 19px;
}

まとめ

以上、実務でよく使われる超シンプルな検索フォームのコーディングのサンプルコードを紹介しました。

ブログ/メディアサイトの制作案件をする際にきっと役立つスキルとなりますのでぜひ覚えていきましょう〜!

 

コーディングスキルアップシリーズはこちら!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です