【HTML】検索フォームの作り方オシャレなCSSデザイン６選

この記事では、オリジナル検索フォームの作り方(HTMLコード)とCSSデザインしたサンプルフォームを6つ作成しました。

どれもコピペで使えるので、よかったら参考にしてください。

目次・読みたい所へタップできます

検索フォームのHTMLコードの解説

まずそれぞれにオリジナルのidをつけます。

idを付けないと、CSSでカスタマイズする時にテーマ内にある他のformコードも変更されてしまいます。(コメント用のフォームとか)

HTML
copyする

<form id="form1" action="自分のサイトURL" method="get">
<input id="sbox1" id="s" name="s" type="text" placeholder="キーワードを入力" />
<input id="sbtn1" type="submit" value="検索" /></form>

各コードの解説

form1は検索フォーム全体のid
自分のサイトURLとはhttps://〜.comまでです。
sbox1は入力欄のid

キーワードを入力部分で「検索ボックス内」の文字を変更できます。
sbtn1は検索ボタンのid

検索部分で「検索ボタン内」の文字を変更できます。

補足

HTML5では入力欄のtypeは｢search｣に変更されましたが、この記事ではtextを使用しています。

理由は最近のテーマだと、searchで検索フォーム用のCSSが指定されているため、カスタマイズがちょっと面倒になるからです。

※例えば当サイトのテーマ「SANGO」だとtype="search"はPCでは長方形ですが、スマホだと上記のように角が丸く指定されています。(タップすると長方形になる仕様)

type="text"なら以下のように最初から長方形になります。

上記コードをCSSで調整しないと以下のように「検索ボックス」と「検索ボタン」が上下に分かれます。

この辺をCSSで調整していきます。

タップで目次に戻る

検索フォームの【CSS】６パターン

ここからコピペで使えるコードを載せています。

CSSのカスタマイズは、必ず子テーマのスタイルシート (style.css)を使用してください。

子テーマの使い方はこちら

Cyberduckの使い方WordPressの子テーマを分かりやすく解説

検索ボックスと検索ボタンを繋げたカスタマイズ

検索ボタンをマウスホバー時、テキストカラーが変わる。

HTML
copyする

<form id="form1" action="自分のサイトURL">
<input id="sbox"  id="s" name="s" type="text" placeholder="キーワードを入力" />
<input id="sbtn" type="submit" value="検索" />
</form>

style.css
copyする

/*フォーム全体*/
#form1{
position:relative;/*フォームの相対位置*/	
max-width:270px;/*フォームのサイズ*/
margin-bottom:15px;/*フォームの下に余白*/	 	
}
/*検索ボックス*/
#sbox{
position:absolute;/*フォームの絶対位置*/	
left:0;
top:0; 	
outline:0;/*クリック時の青い枠線消す*/	
height:50px;/*検索ボックスの高さ*/	
padding:0 10px;/*テキスト位置調整*/	 
border-radius:2px 0 0 2px;/*検索ボックスの角を丸める*/		
background:#eee;/*検索ボックスの背景カラー*/		
}
/*検索ボタン*/
#sbtn{
width:70px;/*検索ボタンの横幅*/ 
height:50px;/*検索ボタンの縦幅*/ 
position:absolute;/*検索ボタンの絶対位置*/  
left:270px;/*検索ボタンの位置調整*/  
top:0;
border-radius:0 2px 2px 0;/*検索ボタンの角を丸める*/ 
background:#7fbfff;/*検索ボタンの背景カラー*/ 
border:none;/*検索ボタンの枠線を消す*/ 
color:#fff;/*検索ボタンのテキストカラー*/ 
font-weight:bold;/*検索ボタンのテキスト太字*/ 
font-size:16px;/*検索ボタンのフォントサイズ*/ 
}
/*検索ボタンマウスオーバー時*/
#sbtn:hover{
color:#666;/*検索ボタンマウスオーバー時のフォントカラー*/ 
}

検索フォームサイズを調整する場合は#form1内のmax-widthと#sbtnのleftで調整して下さい。

outline:0;は検索フォームをクリックした時に出てくる青い枠線を消しています。

青枠線を残したい場合は、上記コードを消してください。

以降コードの解説はしませんが、調整する場合は上記を参考にして下さい。

検索ボックスと検索ボタンを離したカスタマイズ

HTML
copyする

<form id="form5" action="自分のサイトのURL">
<input id="sbox5"  id="s" name="s" type="text" placeholder="キーワードを入力" />
<input id="sbtn5" type="submit" value="検索" />
</form>

style.css
copyする

#form5{
position:relative; 
margin-bottom:20px;	
}
#sbox5{	
outline:0;	
height:50px;
padding:0 10px; 
position:absolute; 
left:0;
top:0; 
max-width:270px;
border-radius:2px;
background:#eee;
}
#sbtn5{
width:70px;
height:50px;
position:absolute; 
left:280px; 
top:0;
border-radius:2px;
background:#7fbfff;
color:#fff;
font-weight:bold;
font-size:16px;
border:none;
}
#sbtn5:hover{
background:#eee;
color:#7fbfff;
}

検索ボックスのみのカスタマイズ

コードも短いザ・シンプルな検索フォームです。

HTML
copyする

<form action="自分のサイトURL" method="get">
<input id="sbox1"  id="s" name="s" type="text" placeholder="検索 …" />
</form>

style.css
copyする

#sbox1{
max-width:300px;
height:50px;
border-radius:2px;
outline:0;
margin-bottom:40px;
background:#eee;	
}

検索ボックス内に虫眼鏡アイコンを挿入するカスタマイズ

虫めがねアイコンは「Font Awesome5」を使用しているので、まだ導入していない方は先に準備してください。導入方法はこちらの記事で書きました。

なお、バージョン4.7.0を使用している方はfas fa-search部分をfa fa-searchに変更して下さい。(以降のアイコンも同様です)

HTML
copyする

<form id="form2" action="自分のサイトURL" method="get">
<input id="sbox2"  id="s" name="s" type="text" placeholder="フリーワードを入力"/>
<button type="submit" id="sbtn2"><i class="fas fa-search"></i></button>
</form>

style.css
copyする

#form2{
position:relative;
max-width:300px;	
margin-bottom:20px;
}
#sbox2{
height:50px;
padding:0 10px; 
position:absolute; 
left:0;
top:0; 
border-radius:2px;
outline:0;
background:#eee;	
}
#sbtn2{
height:50px;
position:absolute; 
left:255px;/*アイコン左右の位置調整*/
top:0;
background:none;
color:#666;
border:none;
font-size:20px;/*アイコンサイズ*/
}
#sbtn5:hover{
color:#7fbfff;
}

二段構造にするカスタマイズ

検索フォーム

HTML
copyする

<form id="form3" action="自分のサイトURL" method="get">
<input id="sbox3" id="s" name="s" type="text" />
<button id="sbtn3" type="submit"><i class="fas fa-search"></i></button>
</form>

style.css
copyする

#form3{
position:relative;
max-width:300px;	
}
#sbox3{
height:50px;
border-radius:0 0 2px 2px;
border:none;
background:#f1f1f1;
outline:0;
margin-bottom:50px;
}
#sbtn3{
height:50px;
position:absolute; 
left:255px; 
top:0;
background:none;
color:#7fbfff;
border:none;
font-size:20px;
}
.slabel{
background:#7fbfff;
font-size:18px;
color:#fff;
border-radius:2px 2px 0 0;
max-width:300px;
font-weight:bold;
padding-left:1%;
}

補足

#form3のmax-width:300px;と.slabelのmax-width:300px;は揃える。

検索ボックスと検索ボタンの角を丸めたカスタマイズ

HTML
copyする

<form id="form4" action="自分のサイトURL" method="get">
<input id="sbox4"  id="s" name="s" type="text" placeholder="フリーワードを入力" />
<button id="sbtn4" type="submit"><i class="fas fa-search"></i></button>
</form>

style.css
copyする

#form4{
position:relative;
max-width:300px;	
margin-bottom:20px;
}
#sbox4{
height:50px;
padding:0 10px; 
position:absolute; 
left:0;
top:0; 
border-radius:25px;
outline:0;
background:#eee;
}
#sbtn4{
height:50px;
width:50px;	
position:absolute; 
left:250px; 
top:0;
background:#7fbfff;
color:#fff;
border:none;
border-radius:0 25px 25px 0;
}
#sbtn4 .fa-search{
font-size:20px;	
position:absolute;
top:30%;
left:30%;	
}
#sbtn4:hover{
color:#888;
}

補足

違うアイコンを使う場合は.fa-search部分を変更して下さい。

検索フォームFont Awesomeで使える虫眼鏡アイコン一覧

Font Awesome5で使える虫眼鏡アイコン
アイコンコード	表示アイコン
`<i class="fas fa-search"></i>`
`<i class="fab fa-searchengin"></i>`
`<i class="fas fa-search-plus"></i>`
`<i class="fas fa-search-minus"></i>`
`<i class="fas fa-search-location"></i>`
`<i class="fas fa-search-dollar"></i>`

2020年3月時点では、上記6つを無料で使用できます。

当記事のサンプルは、一番上のコードを使用しましたが、HTMLコードを変更すれば好きなアイコンに変わります。

カラーやサイズなどはCSSで変更してください。

続いて、年間99ドル払うと使えるpro版のアイコンです。2020年3月時点では、15種類使えます。

Font Awesome5proで使える虫眼鏡アイコン
アイコンコード	表示アイコン
`<i class="far fa-search"></i>`
`<i class="fal fa-search"></i>`
`<i class="fad fa-search"></i>`
`<i class="far fa-search-plus"></i>`
`<i class="fal fa-search-plus"></i>`
`<i class="fad fa-search-plus"></i>`
`<i class="far fa-search-minus"></i>`
`<i class="fal fa-search-minus"></i>`
`<i class="fad fa-search-minus"></i>`
`<i class="far fa-search-location"></i>`
`<i class="fal fa-search-location"></i>`
`<i class="fad fa-search-location"></i>`
`<i class="far fa-search-dollar"></i>`
`<i class="fal fa-search-dollar"></i>`
`<i class="fad fa-search-dollar"></i>`

最後に旧版の4.7のコードです。古いテーマだとこちらを使っている場合があります。ただ今後のことを考えると、「5」にアップデートしておいたほうがいいですね。

Font Awesome4.7で使える虫眼鏡アイコン
アイコンコード	表示アイコン
`<i class="fa fa-search"></i>`
`<i class="fa fa-search-plus"></i>`
`<i class="fa fa-search-minus"></i>`

タップで目次に戻る

検索フォーム【まとめ】

検索フォームの作り方がわかれば、好きな位置に配置できるので便利ですよね。

個人的にヘッダーに検索フォームを置くことは全サイトに推奨したいところ。