常連

![見本](f462c8c81eaa66a583f804a41ff5e4dd.png)
![現在](68780cde8fa2ea2725fc52f6d0a66308.png)

```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
    <link rel="stylesheet" href="css/styles.css">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
        <title>模写制作１回目</title>
</head>
  <body>
    <div class="header">
      <div class="header-left">
        <div class="header-logo">
            <input type="search" class="header-logo-a" name="submit" value="検索" >
          </div>
              <div class="header-right">
                <ul class="header-top">
                  <li><a href="#" class="header-top-btn">ログインする</a></li>
                  <li><a href="#" class="header-top-btn">登録する</a></li>
                  <li><a href="#" class="header-top-btn">ヘルプ</a></li>
                  <li><a href="#" class="header-top-btn">ホストをはじめる</a></li>
                </ul> 
              </div> 
            </div>  
          </div> 
<div class="main">
  <div class="container">
    <div class="container-center">
      <img src="img/1.jpg">
        <div class="container-font">
          <h1>旅を贈ろう。</h1>
          <p>Airbnbギフトカードで、世界をぐんと身近に</p>
          <a href="#">ギフトカードを登録</a>
        </div> 
      </div>
    </div>

      <div class="container-bottom">
        <h1>いつも完璧な贈り物</h1>
          <ul class="list-items">
           <li>
             <i class="icon far fa-envelope  fa-3x"></i>
            <h2>簡単に使える</h2>
            <p>ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p>
            </li>
           <li>
             <i class="icon fas fa-stopwatch  fa-3x"></i>
            <h2>有効期限なし</h2>
            <p>Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p>
            </li>
            <li>
               <i class="icon fas fa-globe  fa-3x"></i>
             <h2>忘れられない旅</h2>
             <p>お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p>
             </li>
            </ul>
            </div> 
<div class="boottom">
  <div class="bottom-center">
  <img src="https://a0.muscache.com/airbnb/gift_credit_v2/Home Page/Present Icon/Present Icon.png" alt="">
  <h2>ギフトカードをもらったら、、、</h2>
    <p>ログインあるいは利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</p>
    <div class="bottom-center-btn">
        <a href="#" class="bottom-logo">ギフトカードを登録する</a>
        </div>
        <div class="bottom-center-btn-b">
          <a href="#">Airbnbギフトカードの仕組みは？</a>
          </div>
          </div>
        </div>

        <div class="footer">
          <div class="foot">
              <div class="footer-logo">
                  <h3>Airbnb</h3>
                <ul class="footer-logo-m">
                  <li><a href="#">採用情報</a></li>
                  <li><a href="#">プレス</a></li>
                  <li><a href="#">ポリシー</a></li>
                  <li><a href="#">ヘルプ</a></li>
                  <li><a href="#">ダイバーシティ&ビロンギング</a></li>
                  <li><a href="#">アクセシビリティ対応</a></li>
                  <li><a href="#">企業情報</a></li>
                </ul>
              </div>
              <div class="footer-logo">
                <h3>スタッフのおすすめ</h3>
                <ul class="footer-logo-m">
                  <li><a href="#">信頼&安全</a></li>
                  <li><a href="#">お友達紹介クーポン</a></li>
                  <li><a href="#">Airbnb Citizen</a></li>
                  <li><a href="#">出張</a></li>
                  <li><a href="#">ガイドブック</a></li>
                  <li><a href="#">Airbnbmag</a></li>
                  </ul>
              </div>
              <div class="footer-logo">
                <h3>ホスティング</h3>
                <ul class="footer-logo-m">
                  <li><a href="#">ホストになる理由</a></li>
                  <li><a href="#">おもてなしの心</a></li>
                  <li><a href="#">ホストの責任</a></li>
                  <li><a href="#">コミュニティセンター</a></li>
                  <li><a href="#">体験を掲載</a></li>
                  <li><a href="#">オープンホーム</a></li>
                  </ul>
              </div>
              <div class="footer-logo">
                <ul class="footer-logo-m">
                  <li><a href="#">利用規約</a></li>
                  <li><a href="#">プライバシー</a></li>
                  <li><a href="#">サイトマップ</a></li>
                </ul>
              </div>
          </div>
        </div>
  </div>
 </div>
</div>
</body>
</html>

```

```CSS
html, body {
  height: 100%;
}
input[type="search"] {
  -webkit-appearance:none;
}
header {
  margin-left: 0;
  margin-right: 0;
}
.header-left {
  height: 100%;
}
.header-top li {
  padding: 10px 10px;
  list-style: none;
  margin:auto;
  float:right;
}
.header-top a {
  color: rgb(72, 72, 72);
  text-decoration: none;
}
.header-logo {
  height: 100%;
}
.header-logo-a {
  width: 470px;
  height:40px ;
}
.header-right a {
  color: inherit;
}

.conteiner {
  width: 983px;
  height: 680px;
}
.container-center img {
  width: 100%;
  height: 600px;
}
.container-font {
  position: absolute;
  color: rgb(255, 255, 255);
  top: 25%;
  left: 20%;
}
.container-font h1 {
  font-size: 46px;
}
.container-bottom {
  width: 1032px;
  height: 240px;
  padding: 48px 260px;
}
.container-bottom h1 {
  color: rgb(72, 72, 72);
  text-align: center;
  margin: 0;
}
.list-items li {
  display: inline-block;
  width: 33.3333%;
  text-align: center;
}
.list-items h2 {
  font-size: 18px;
  color: #484848;
}
.list-items p {
color: #767676;
}
.container-font a {
  color: rgb(72, 72, 72);
  width: 144px;
  font-size: 16px;
  text-decoration:none;
  font-weight:bold;
  border:1px solid #333;
  background-color:white;
  padding:8px 0 10px;
}
.container-bottom li {
  float: left;
}
.cotainer-bottom-btn h2 {
font-size: 18px;
}
.cotainer-bottom-btn p {
font-size: 16px;
}
.cotainer-bottom-btn li {
list-style: none;
}
.cotainer-footer-btn {
      margin-top: 18px;
      text-align: center;
      width: 33.33333%;
      float: left;
    }
.bottom-center {
  height: 440px;
   background-color: #007a87;
   font-weight:bold;
   color: rgb(255, 255, 255);
   text-align: center;
}
.bottom-center p {
  font-size: 20px;
  margin-bottom: 48px;
  font-weight: normal;
  color: rgb(255, 255, 255);
}

.bottom-center-btn a {
  color: white;
  width: 144px;
  font-size: 16px;
  text-decoration:none;
  font-weight:bold;
  border:1px solid #333;
  background-color: rgb(255, 90, 95);
  padding:8px 0 10px;
  font-weight: normal;
}
.bottom-center-btn-b {
  margin-top: 18px;
}
.bottom-center-btn-b a {
  color: #fff;
  opacity: 0.6;
  text-decoration: none;
  font-size: 18px;
}
.foot {
}
.footer-logo {
  /* display: inline-block; */
  /* text-align: center; */
}
.footer-logo-m {
}
.footer-logo-m li {
    list-style: none;
    /* display: inline-block; */

}
.footer-logo-m  a {
  font-size: 14px;
  color: rgb(72, 72, 72);
  text-decoration: none;
  
}
.footer-logo {
  font-size: 14px;
}
.footer-logo-m ul {

```

伝わる自身がないのですが質問です。

写真のfooterのようにバランスよくli要素など　p要素を動かしたいと思っています。
この時見本のデベロッパーツールを見ながら模写した場合似せて作る事は出来るようになりました。
実際に一度見本の通り作れました。

ですがそれはデベロッパーツールに全て頼ってコピーしただけで、頼らず作ろうとした際全く作れないです。


見本を見ながらとしてもデベロッパーツールに頼らずこのようにバランス良く作りたいのですが皆さんはどのように作っているか順番や考えなどを教えていただきたいです

見本を見たら出来るっていう気持ちや、自由自在に場所を動かせるようになりたいのですが何か参考資料など勉強になるものなどありますでしょうか？

	@@ -1 +1 @@
1	- ~~皆さん~~に~~質問ですがもしよろしければお願~~い~~します。~~
1	+ 要素の動かし方について

質問編集履歴