bootstrapの機能について

Question

前提・実現したいこと

今現在、僕はプログラミングの勉強として模写をしています。その模写の教材としてAirbnbのHPを使っています。独学で勉強しているのですが、難しいところが多く、なかなか進まないです。どうか助けてください。レスポンシブはi phoneのものをまず作っています。

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

headerの書き方がわからないです。わからない点としては、
・メニューバーの書き方
・入力フォームに虫眼鏡を入れるやり方
・入力フォームをゆっくり動かすやり方
・入力フォームの移動方法
・入力フォームに入力してもフォームの周りに青い線(ボーダーライン?
)を出させない
・入力フォームに影見たいのをつけるには？(box-shadowで作れなかった)
・"キャンセル"の文字がゆっくり現れるようにしたい

エラーメッセージ

該当のソースコード

ソースコード
<header class="py-1">
      <div>
        <i class="fab fa-airbnb text-danger pl-4"></i>
        <i class="fas fa-angle-down pr-2"></i>
        <input class="" type="text" placeholder="探す">
        <a href="" class="btn btn-white float-right py-0 my-0 font-weight-bold">キャンセル</a>
        <div id="menu" class="collapse navbar-collapse">
          <ul class="navbar-nav">
            <li class="nav-item"><a href="" class="nav-link">ホーム</a></li>
            <li class="nav-item"><a href="" class="nav-link">友達を招待する</a></li>
            <li class="nav-item"><a href="" class="nav-link">Refer hosts</a></li>
            <li class="nav-item"><a href="" class="nav-link">Airbnbビジネスプログラム</a></li>
            <li class="nav-item"><a href="" class="nav-link">お部屋掲載を<br><span>月あたり最大$2,574,574AUD</span>の収益</a></li>
            <li class="nav-item"><a href="" class="nav-link">お家のホスティングについて</a></li>
            <li class="nav-item"><a href="" class="nav-link">仕事をホストする<br>好きを仕事に</a></li>
            <li class="nav-item"><a href="" class="nav-link">ヘルプ</a></li>
            <li class="nav-item"><a href="" class="nav-link"登録する></a></li>
            <li class="nav-item"><a href="" class="nav-link">ログイン</a></li>
          </ul>
        </div>
      </div>
    </header>

### 試したこと

ここに問題に対して試したことを記載してください。
bootstrapの公式サイトで調べてみた
該当しそうな単語でgoogleで検索してみた

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
これが参考にしているAirbnbの参考サイトです
https://ja.airbnb.com/gift

Comments

[Lhankor_Mhy]

誰かに正解を聞くぐらいだったら、そのサイトのCSSをコピペしてきた方が早くないですかね、と、CSS模写してる人にいつも思うのですが、どういう縛りで取り組んでいるのですか？

[kyoya0819]

Airbnbの模写が最近すごく多い気がする。
まぁ、クレクレにしてみれば多重アカウントでも質問しても変わらないんでしょうけど

[kyoya0819]

独学で模写してなんになるのか この質問のレベルを見ると基礎が足りてないようだが

[Lhankor_Mhy]

> 独学で模写してなんになるのか

既存のページをモックとしてCSSでデザインを再現するのは、それはそれでそれなりに勉強になるとは思うのですが、teratailで正解を聞いてくるのはよくわからないですよね。
開発者ツールで見れば正解があるのに、なぜわざわざ他人に聞いてくるんだろう、と。

Answer 1

まぁ誰もBootstrapを使えとは言ってないので

メニューバーの書き方

なにを言ってるのかわからない。

---

入力フォームに虫眼鏡を入れるやり方

こちらを参照

input.withicon {
   background-image: url("sicon16.gif");
   background-repeat: no-repeat;
   background-position: 2px center;
   padding-left: 21px;
}

引用元

---

入力フォームをゆっくり動かすやり方

こちらを参照

---

入力フォームの移動方法

移動してるか？まぁ長さを変えるならこちらを参照

---

入力フォームに入力してもフォームの周りに青い線(ボーダーライン?

)を出させない

こちらを参照

---

入力フォームに影見たいのをつけるには？(box-shadowで作れなかった)

こちらを参照

input[type="text"], textarea, input[type="submit"]{
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#FFFFFF));
    background-image: -webkit-linear-gradient(left, #FFFFFF, #FFFFFF);
}

input[type="text"], textarea, input[type="submit"]{
-webkit-appearance: none;
}

[引用元](http://pressstocker.com/ios-box-shadow/)

---

> "キャンセル"の文字がゆっくり現れるようにしたい

[こちら](https://developer.mozilla.org/ja/docs/Web/CSS/transform)を参照

Comments

[sklax]

解凍していただき、ありがとうございます。
初めての質問で自分でもどうすればいいのかわからなかったのでとても助かりました。

Answer 2

######メニューバーの書き方
Navbar · Bootstrap
######入力フォームに虫眼鏡を入れるやり方
Glyphicons|Components · Bootstrap
######入力フォームをゆっくり動かすやり方
CSS トランジションの使用 - CSS: カスケーディングスタイルシート | MDN|CSS トランジションの使用 - CSS: カスケーディングスタイルシート | MDN
######入力フォームに入力してもフォームの周りに青い線(ボーダーライン?)を出させない
Form controls|Forms · Bootstrap

---

他のご質問はもう少し詳しくお願いします。