質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

393閲覧

bootstrapの機能について

sklax

総合スコア5

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/09/26 08:49

前提・実現したいこと

今現在、僕はプログラミングの勉強として模写をしています。その模写の教材として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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2019/09/26 09:00

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

2019/09/26 09:34

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

2019/09/26 09:35

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

2019/09/26 10:28

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

回答2

0

ベストアンサー

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

メニューバーの書き方

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


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

こちらを参照

CSS

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

引用元


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

こちらを参照


入力フォームの移動方法

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


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

)を出させない

こちらを参照


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

こちらを参照

CSS

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

CSS

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)を参照

投稿2019/09/26 09:46

編集2019/09/26 09:52
kyoya0819

総合スコア10429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sklax

2019/09/27 04:33

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

0

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


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

投稿2019/09/26 09:22

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問