【基礎の基礎】虫眼鏡のアイコンが付いたシンプルな検索ボックスの作り方
サイトを作るのに、検索ボックスというのが、必要になると思うのですが、虫眼鏡を付ける方法に、私は、結構悩まされました(T_T)
いろいろ調べてみて、その中でも、シンプルで、初心者でも簡単に出来るであろう方法を備忘録としてまとめておきますね(^^)
参考にしてみてください！
htmlのコードはこんな感じです。
まずは、htmlで検索ボックスのフレームを作ります。htmlのコードは下記の通りです。
これはもう、セットで覚えてしまうのが手っ取り早いのかなと思います。
一つづつ説明していきますね！
|
1 2 3 4 |
<form> <input type="search"> <button type="submit"></button> </form> |
formタグ
まずは、検索ボックスに関係するものを「formタグ」でくくってあげましょう。
「formタグ」とは、情報を入力する入力欄がありますよ！っていう意味があるタグです。
タグって、ぶっちゃけなんでもいいでしょ？って思ってましたが笑、それぞれのタグに意味があるようなので、調べながら少しづつ意識するのがいいですね！
inputタグ
inputタグは、その名の通り、何かをインプットする要素なのですが、「type」に「search」を指定することで、検索のための入力欄ということになります。
formタグの一部分ですので、セットで覚えるといいですね。
buttonタグも、その名の通り、ボタンの要素を持つものです。「type」に「submit」を指定することで、決定・送信の役割を持ちます。
こちらも、formタグを構成する要素の一つとして、セットで覚えるといいかと思います。
CSSのコードはこんな感じになります。
ちょっと分かりやすいように、htmlにクラス属性を与え、画像を追加しています。そちらのコードはこんな感じです♪
|
1 2 3 4 |
<form class="form-box"> <input class="form-input" type="search"> <button class="form-button"><img src="sicon.png" width="20px" height="20px"></button> </form> |
※ちょっと難しいなーと言う方は、動画と一緒にご覧くださいね(^^)
これに対してのCSSコードはこんな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.form-box{ display: flex; border: 2px solid lightgrey; width: 400px; } .form-input{ border: none; width: 100%; } .form-button{ background-color: white; border: none; } |
こんな検索ボックスになりました！
とってもシンプルな検索ボックスになりました(^^)
で、この検索ボックスを作る「流れ」に関しては、動画の方にまとめてみました！
たぶん、文字を追うよりも、組み立てる流れを見た方が、分かりやすいかなと思いますので、是非参考にしてみてくださいね(^^)
以上です！
