こんにちは、こずえです。
プログラミング学習記録32日目です。
サイト模写の続きです。
所感：日差しは暖かくても風はまだまだ冷たいですね。
合計学習時間
前回までの時間：53.00[h]
今回の時間：1.25[h]
合計時間：54.25[h]
学習内容
前回に引き続き以下のサイトの模写です。
サイト模写の経過
今回はナビゲーションバーのinput部分を触りました。
変更点はinputのplaceholderで指定されている「探す」の横にアイコンの追加です。
はじめはinput-groupを使用することで画像を埋め込むことを考えましたが、以下図のように入力部分ではないため、クリックしても入力可能状態にはなりません。
placeholderに直接アイコンを埋め込むことができないか調べた結果、Unicode文字を値に指定することにしました。
ちなみにFont AwesomeにAirbnbと同じような虫眼鏡があります。
私はなぜか表示させられませんでしたけど…。
上図のとおり入力部分問題はこれで解決です。
したのですが……。
Airbnbの検索バーを改めて確認しなおしてみると、最初に試したinput-groupのようにアイコンの上でマウスカーソルが矢印のままなんですよね。なぜ途中で気づかなかったのかな。
「探す」から右側はマウスカーソルのアイコンが変わるので入力欄だということはわかるのですが、虫眼鏡アイコンをクリックした場合でも入力可能状態に切り替わります(アニメーションで横から出てくる)。
これらを踏まえて以下のような流れかなと予想しました。
- inputの領域をクリックする
- input(アニメーションで横から出てくる)を表示する
- input(アニメーションで横から出てくる)を入力可能状態にする
3.について検索した結果、javascriptで実現可能であることを確認済み。
2.については大体の予想はついているのですが理解に少し時間が掛かりそうです。
ひとまずinputのアイコンは表示させることができたので、細かな部分は後回しにして、わかりそうな部分から順に解決していこうと思います。