wordpressサイトの模写がうまくいきません

ドットインストールでの基礎勉強を経て、Gregory Privatというミュージシャンのサイトのコピーに勤しんでいます（後から気付いたのですがwordpressのサイトでした）。一見シンプルに見えるサイトなのですが、苦戦しております。ページのソースを参照したりして、真似して書いているのですが、うまくいきません。

うまくいかないこと（１）検索アイコンがうまく表示されない

メニューバーに配置されている検索アイコンですが、font-awesomeで自分で調べたもの入れると表示されるのですが、

html
1<i class="fas fa-search"></i>

オリジナルはこのコードではなくこちらです。

html
1<i class="icon-search"></i>

これを真似して自分のhtmlに書いても何も表示されません。bootstrapかと思い、bootstrapを<head>に入れたのですが、それでも表示されませんでした。

うまくいかないこと（２）検索アイコンが右にフロートしない

メニューバーを<ul><li>で作成しており、この<li>の一つとして検索アイコンを入れると右端にすんなり配置できるのですが、オリジナルでは、むしろ<ul>の前に記述されており、float: right;で右端に配置しているように見受けられます。しかしながら、それを真似して書いてみても全くうまくいきません。。。

html
1<body>
2    <div id="wrapper">
3    <div id="header">
4      <div id="logo">
5        <a href="#">GRÉGORY PRIVAT</a>
6      </div>
7      <div id="menu_navigation">
8        <div id="search_blog">
9          <div id="display_none">
10            <div id="inline_search">
11              <form role="search" method="get" class="search-form" action="https://www.gregoryprivat.com/">
12              </form>
13            </div>
14          </div>
15          <!-- <a title="Recherche..." href="#TB_inline?width=500&height45&inlineId=display_none" class="thickbox">  -->
16            <span>
17              <i class="fas fa-search"></i>
18            </span>
19          <!-- </a> -->
20        </div>
21        <nav id="main_menu">
22          <ul class="menu">
23            <li><a href="#">ACCUEIL</a></li>
24            <li><a href="#">BIOGRAPHIE</a></li>
25            <li><a href="#">CONCERTS</a></li>
26            <li><a href="#">DISCOGRAPHIE</a></li>
27            <li><a href="#">PARTITIONS</a></li>
28            <li><a href="#">CONTACT</a></li>
29            <li><a href="#"><img src="img/flagFR.png" title="Français"></a></li>
30            <li><a href="#"><img src="img/flagEN.png" title="English"></a></li>
31          </ul>
32        </nav>
33      </div>
34    </div>

CSS
1body {
2  margin: 0;
3  padding: 0;
4  box-sizing: border-box;
5  color: #ffffff;
6  font-family: Oswald, sans-serif;
7	/* background-size: cover; */
8  /* overflow-x: hidden; */
9}
10
11#wrapper {
12  /* width: 100%; */
13  /* overflow: hidden; */
14}
15
16#header {
17  position: fixed;
18  top: 0;
19  left: 0;
20  width: 100%;
21  z-index: 100;
22}
23#logo {
24  font-size: 30px;
25  line-height: 75px;
26  padding: 0 25px;
27  position: fixed;
28  z-index: 9999;
29  background-color: transparent;
30  position: absolute;
31  top: 0;
32  left: 0%;
33}
34#menu_navigation {
35  height: 75px;
36  line-height: 75px;
37  background: rgba(255, 255, 255, 0.9);
38  display: flex;
39  justify-content: space-between;
40  position: relative;
41  width: 100%;
42  margin: 0;
43  z-index: 9998;
44  /* clear: both; */
45}
46
47#search_blog {
48  /* display: inline-block; */
49  position: relative;
50  float: right;
51  right: 0%;
52  margin-right: 25px;
53  z-index: 100;
54  width: 35px;
55  height: 75px;
56  background-color: transparent;
57}
58
59#search_blog span {
60  display: block;
61  font-weight: normal;
62  border-radius: 50%;
63  -webkit-border-radius: 50%;
64  -moz-border-radius: 50%;
65  position: relative;
66  overflow: hidden;
67  font-size: inherit;
68  text-align: center;
69  line-height: 33px;
70  border: 0px solid #fff;
71  background-color: #252A2F;
72  transition: all 0.3s linear 0s;
73  -webkit-transition: all 0.3s linear 0s;
74  margin: 22px 0px 0px 0px;
75  width: 33px;
76  height: 33px;
77}
78
79#header #logo a {
80  text-decoration: none;
81  color: #AF3F28;
82}
83
84nav {
85}
86
87nav ul {
88  margin: 0;
89  padding: 0;
90  display: flex;
91  margin-left: auto;
92  position: relative;
93  float: right;
94  display: block;
95  z-index: 100;
96  text-align: left;
97  right: 0%;
98  list-style: none outside none;
99}
100
101#header ul a {
102  text-decoration: none;
103  color: #000000;
104}
105
106nav li {
107  height: 75px;
108  font-size: 14px;
109  padding: 0 25px;
110  /* text-align: center; */
111  user-select: none;
112  letter-spacing: 1px;
113  display: inline-block;
114  float: left;
115}

##その他
上記は一例で、オリジナルのコードをchromeで参照して真似して書いてみているのですが、あまりうまくいきません。そもそも記述がめちゃくちゃ多く、どれを抽出して書けば良いか混乱してしまっています。別の質問を立てるべきと思いますが、例えば、ページ下部のコンタクトフォーム、ニュースレター登録フォームです。ほぼ同じようにコーディングしているつもりなのですが、全くうまくいきません。また、YouTubeの埋め込みでは、ブラウザー幅が収縮したときの挙動が同じになりません。。。もし何かアドバイスいただけたら大変ありがたいです。

よろしくお願いします。

コンタクトフォーム、ニュースレター

Youtube埋め込みオリジナルの挙動

Youtube埋め込み、私の模写の挙動

m.ts10806

2020/05/05 11:55

途中で投稿してしまって編集中ですよね、きっと。

DaisukeKaku

2020/05/05 12:08

はい、正確に申し上げますと、全部書き上げて投稿したのですが、おそらく途中で長らく時間が空いて保存されておらず、途中からの内容が消えてしまいましたので、書き直しました。失礼しました！

m.ts10806

2020/05/05 12:12

よくあります。teratalの投稿バグです。

行動規範の内容に同意します

回答1件

ベストアンサー

うまくいかないこと（１）検索アイコンがうまく表示されない

IcoMoonなどで、オリジナルのアイコンフォントを作成しているのだと思います。
アイコンに関しては100%再現するのを諦めて<i class="fas fa-search"></i>で代用してもいいかもしれません。意欲があれば上記「IcoMoon」を使ってみてください。

うまくいかないこと（２）検索アイコンが右にフロートしない

とりあえずHTMLを変更しないとしたらCSSは以下のようになると思います。

CSS
1#menu_navigation {
2  height: 75px;
3  line-height: 75px;
4  background: rgba(255, 255, 255, 0.9);
5  display: flex;
6  
7  flex-direction: row-reverse; /*　追加 */
8  
9  /* justify-content: space-between; */
10  
11  position: relative;
12  width: 100%;
13  margin: 0;
14  z-index: 9998;
15  /* clear: both; */
16}
17#main_menu {
18  position: relative;
19  
20  /* floatは邪魔なので消す */
21  /* float: right; */
22  display: block;
23  margin: 0;
24  z-index: 100;
25  text-align: left;
26  right: 0%;
27}
28#search_blog {
29    display: inline-block;
30    position: relative;
31  
32    /* floatは邪魔なので消す */
33    /* float: right; */
34    right: 0%;
35    z-index: 100;
36    width: 35px;
37    height: 75px;
38    margin-right: 25px;
39}