Programing beginner by koala

【基礎の基礎】虫眼鏡のアイコンが付いたシンプルな検索ボックスの作り方

サイトを作るのに、検索ボックスというのが、必要になると思うのですが、虫眼鏡を付ける方法に、私は、結構悩まされました(T_T)

いろいろ調べてみて、その中でも、シンプルで、初心者でも簡単に出来るであろう方法を備忘録としてまとめておきますね(^^)

参考にしてみてください!

Contents

htmlのコードはこんな感じです。

まずは、htmlで検索ボックスのフレームを作ります。htmlのコードは下記の通りです。

これはもう、セットで覚えてしまうのが手っ取り早いのかなと思います。

一つづつ説明していきますね!

formタグ

まずは、検索ボックスに関係するものを「formタグ」でくくってあげましょう。

「formタグ」とは、情報を入力する入力欄がありますよ!っていう意味があるタグです。

タグって、ぶっちゃけなんでもいいでしょ?って思ってましたが笑、それぞれのタグに意味があるようなので、調べながら少しづつ意識するのがいいですね!

inputタグ

inputタグは、その名の通り、何かをインプットする要素なのですが、「type」に「search」を指定することで、検索のための入力欄ということになります。

formタグの一部分ですので、セットで覚えるといいですね。

buttonタグ

buttonタグも、その名の通り、ボタンの要素を持つものです。「type」に「submit」を指定することで、決定・送信の役割を持ちます。

こちらも、formタグを構成する要素の一つとして、セットで覚えるといいかと思います。

CSSのコードはこんな感じになります。

ちょっと分かりやすいように、htmlにクラス属性を与え、画像を追加しています。そちらのコードはこんな感じです♪

※ちょっと難しいなーと言う方は、動画と一緒にご覧くださいね(^^)

これに対してのCSSコードはこんな感じです。

こんな検索ボックスになりました!

とってもシンプルな検索ボックスになりました(^^)

で、この検索ボックスを作る「流れ」に関しては、動画の方にまとめてみました!

たぶん、文字を追うよりも、組み立てる流れを見た方が、分かりやすいかなと思いますので、是非参考にしてみてくださいね(^^)

以上です!

About me

IT業界6年目にして、プログラミングの勉強を始めたkoalaです。

プログラミング用語が難しすぎる!ということで、初心者が初心者に解説するという型破りなブログを開設してみました。

専門用語少な目、分かりやすくをモットーにしています。

>>続きはこちら

今日の名言

クリックすると、あなたの心に響く誰かの名言が表示されます♪

 

今日の名言

 
※あなたの名言募集しています!詳細はこちら