半歩ずつでも前に進めば変わっていく

Kozue Blog

プログラミング 学習 記録

プログラミングで月収5万円になるまでの記録32日目

更新日:

こんにちは、こずえです。
プログラミング学習記録32日目です。
サイト模写の続きです。

所感:日差しは暖かくても風はまだまだ冷たいですね。

合計学習時間

前回までの時間:53.00[h]
今回の時間:1.25[h]
合計時間:54.25[h]

学習内容

前回に引き続き以下のサイトの模写です。

サイト模写の経過

今回はナビゲーションバーのinput部分を触りました。
変更点はinputのplaceholderで指定されている「探す」の横にアイコンの追加です。

WebサイトAirbnb01模写_w397px_9日目

はじめはinput-groupを使用することで画像を埋め込むことを考えましたが、以下図のように入力部分ではないため、クリックしても入力可能状態にはなりません。

input-groupを使用

placeholderに直接アイコンを埋め込むことができないか調べた結果、Unicode文字を値に指定することにしました。
ちなみにFont AwesomeにAirbnbと同じような虫眼鏡があります。
私はなぜか表示させられませんでしたけど…。

placeholderにUnicode文字を記述

上図のとおり入力部分問題はこれで解決です。

したのですが……。

Airbnbの検索バーを改めて確認しなおしてみると、最初に試したinput-groupのようにアイコンの上でマウスカーソルが矢印のままなんですよね。
なぜ途中で気づかなかったのかな。

「探す」から右側はマウスカーソルのアイコンが変わるので入力欄だということはわかるのですが、虫眼鏡アイコンをクリックした場合でも入力可能状態に切り替わります(アニメーションで横から出てくる)。

これらを踏まえて以下のような流れかなと予想しました。

  1. inputの領域をクリックする
  2. input(アニメーションで横から出てくる)を表示する
  3. input(アニメーションで横から出てくる)を入力可能状態にする

3.について検索した結果、javascriptで実現可能であることを確認済み。
2.については大体の予想はついているのですが理解に少し時間が掛かりそうです。

ひとまずinputのアイコンは表示させることができたので、細かな部分は後回しにして、わかりそうな部分から順に解決していこうと思います。

参考記事

-プログラミング, 学習, 記録
-, , ,

Copyright© Kozue Blog , 2019 All Rights Reserved Powered by STINGER.