質問編集履歴
5
写真の追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -20,11 +20,17 @@
|
|
|
20
20
|
|
|
21
21
|
### 発生している問題・エラーメッセージ
|
|
22
22
|
|
|
23
|
-
上記1〜3の実装が上手く出来ない
|
|
23
|
+
上記1〜3の同時実装が上手く出来ない
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
下記のコードで見た目は整いました
|
|
24
28
|
|
|
25
29
|
|
|
26
30
|
|
|
27
31
|
|
|
32
|
+
|
|
33
|
+
文字入力をすると検索マークと被ってしまう
|
|
28
34
|
|
|
29
35
|
|
|
30
36
|
|
4
誤字
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
|
|
55
55
|
<button type="submit" id="ibtn"><i class="fas fa-search"></i> </button>
|
|
56
56
|
|
|
57
|
-
<input
|
|
57
|
+
<input id="input-icon" type="search" name="search" placeholder="探す" autocomplete="off">
|
|
58
58
|
|
|
59
59
|
<!-- <i class="fas fa-search"></i> -->
|
|
60
60
|
|
3
header内code全ての記載
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -34,15 +34,53 @@
|
|
|
34
34
|
|
|
35
35
|
```HTML
|
|
36
36
|
|
|
37
|
+
headタグ内 <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet">
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
<body>
|
|
42
|
+
|
|
43
|
+
<header>
|
|
44
|
+
|
|
45
|
+
<div id="header-left" class="clearfix">
|
|
46
|
+
|
|
47
|
+
<i class="fab fa-airbnb"></i>
|
|
48
|
+
|
|
37
|
-
<div id="header-search">
|
|
49
|
+
<div id="header-search">
|
|
38
50
|
|
|
39
51
|
<form action="#" method="post">
|
|
40
52
|
|
|
41
|
-
<
|
|
53
|
+
<!-- <input class="input-icon" type="submit" value="" class="fas"> -->
|
|
42
54
|
|
|
55
|
+
<button type="submit" id="ibtn"><i class="fas fa-search"></i> </button>
|
|
56
|
+
|
|
43
|
-
<input class="
|
|
57
|
+
<input class="input-icon fas" type="search" name="search" placeholder="探す" autocomplete="off">
|
|
58
|
+
|
|
59
|
+
<!-- <i class="fas fa-search"></i> -->
|
|
44
60
|
|
|
45
61
|
</form>
|
|
62
|
+
|
|
63
|
+
</div>
|
|
64
|
+
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
<div id="header-list" class="clearfix">
|
|
68
|
+
|
|
69
|
+
<ul id="list" class="clearfix" >
|
|
70
|
+
|
|
71
|
+
<li><a href="#">ホストをはじめる</a></li>
|
|
72
|
+
|
|
73
|
+
<li><a href="#">ヘルプ</a></li>
|
|
74
|
+
|
|
75
|
+
<li><a href="#">登録する</a></li>
|
|
76
|
+
|
|
77
|
+
<li><a href="#">ログイン</a></li>
|
|
78
|
+
|
|
79
|
+
</ul>
|
|
80
|
+
|
|
81
|
+
</div>
|
|
82
|
+
|
|
83
|
+
</header>
|
|
46
84
|
|
|
47
85
|
|
|
48
86
|
|
2
CSSを四角で囲んだ・ブラウザ情報の追加・写真の追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -24,6 +24,8 @@
|
|
|
24
24
|
|
|
25
25
|
|
|
26
26
|
|
|
27
|
+
|
|
28
|
+
|
|
27
29
|
|
|
28
30
|
|
|
29
31
|
### 該当のソースコード
|
|
@@ -43,6 +45,8 @@
|
|
|
43
45
|
</form>
|
|
44
46
|
|
|
45
47
|
|
|
48
|
+
|
|
49
|
+
```
|
|
46
50
|
|
|
47
51
|
```css
|
|
48
52
|
|
|
@@ -84,6 +88,10 @@
|
|
|
84
88
|
|
|
85
89
|
|
|
86
90
|
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
87
95
|
### その他試したこと
|
|
88
96
|
|
|
89
97
|
・placeholder="探す"→placeholderなので文字入力をすると虫眼鏡マークも消えてしまう
|
|
@@ -104,6 +112,10 @@
|
|
|
104
112
|
|
|
105
113
|
macOS Mojave バージョン10.14.5
|
|
106
114
|
|
|
115
|
+
google chrome
|
|
116
|
+
|
|
117
|
+
バージョン: 74.0.3729.157（Official Build） （64 ビット）
|
|
118
|
+
|
|
107
119
|
|
|
108
120
|
|
|
109
121
|
お世話になっているブログにbootstrapは修正が必要になった時に初心者では面倒なので使わない方がいいと書いてあったため、今回はBootstrapを使わない方法で模写に取り組んでいますが、このようなレイアウトの場合に最適な方法もあれば教えていただけると助かります。
|
1
URLの記載
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
Airbnb（LP）の模写をBootstrapを使わずにcss/jQueryで取り組んでいます。
|
|
6
|
+
|
|
7
|
+
https://ja.airbnb.com/gift
|
|
6
8
|
|
|
7
9
|
Airbnb（LP）のナビゲーションバーに設置されている検索窓と同じように実装したいです。
|
|
8
10
|
|