[html css] 模写したlpページを見比べたが、どこから直せばいいのかわからない

前提・実現したいこと

綺麗で効率の良いコードを書く為にまず直すべき所とは

html css で自分の理解度を確かめる為LPページを模写コーディングしてみました。そして見本と見比べより綺麗、また効率の良いコードの書き方を確認したかったのですが、、、全然見本と違い、何から直すべきなのか初心者目線だとごちゃごちゃしてしまった為、理解の深い方に質問してみようと思いました。

時間宜しければ、お力添え下さい。
見本にしたサイト　http://demo.themegraphy.com/write-ja/

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

『模写コーディングの完成度を高めたい』

該当のソースコード

ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Write-書くためのテーマ</title>

  <!-- CSS -->
  <link rel="stylesheet" href="http://unpkg.com/ress/dist/ress.min.css">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <header>
    <div class="header-top">
      <h1>Write</h1>
    </div>
    <div class="header-contents">
      <p>書くためのテーマ</p>
      <ul>
        <li><a href="">ホーム</a></li>
        <li><a href="">ページ</a></li>
        <li><a href="">タイポグラフィー</a></li>
        <li><a href="">お問い合わせ</a></li>
      </ul>
      <a href="">検索窓</a>
    </div>
   
    <div class="bg-img">
      <img src="images/cropped-nicole-honeywill-730102-unsplash.jpg" alt="">
    </div>
      <p>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>
  </header>

  <div class="contents">
    <div class="contens_posts">
      <div class="contents_post">
        <a href="">
          <span>2018年9月1日</span>
          <div class="post-date1">
            <h2>書くためのテーマ</h2></a>
            <p>Writeは文章を書く人のためのミニマムなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>
          </div>
      </div>
      <div class="contents_post">
        <a href="">
          <span>2018年3月5日</span>
          <div class="post-date1">
            <h2>画像付きの投稿</h2></a>
            <p>吾輩は猫である。名前はまだ無い。どこで生まれたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
          </div>
      </div>
      <div class="contents_post">
        <a href="">
          <span>2018年9月1日</span>
          <div class="post-date1">
            <h2>引用付きの投稿</h2></a>
            <p>吾輩は猫である。名前はまだ無い。どこで生まれたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ...</p>
          </div>
      </div>
      <div class="contents_post">
        <a href="">
          <span>2018年3月5日</span>
          <div class="post-date1">
            <h2>コメント付きの投稿</h2></a>
            <p>吾輩は猫である。名前はまだ無い。どこで生まれたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそ...</p>
          </div>
      </div>
      <div class="contents_post">
        <a href="">
          <span>2018年3月3日</span>
          <div class="post-date1">
            <h2>吾輩は猫である</h2></a>
            <p>吾輩は猫である。名前はまだ無い。どこで生まれたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそ...</p>
          </div>
      </div>
      <div class="contents_post">
        <a href="">
          <span>2018年3月3日</span>
          <div class="post-date1">
            <h2>名前はまだ無い。どこで生まれたかとんと見当がつかぬ。</h2></a>
            <p>吾輩は猫である。名前はまだ無い。どこで生まれたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそ...</p>
          </div><!-- /post-date -->
      </div><!-- /contents_post -->
    </div><!-- /contents_posts-->
    <div class="contents-page_link">
      <ul>
        <a href="">
          <li>1</li>
        </a>
        <a href="">
          <li>2</li>
        </a>
        <a href="">
          <li>3</li>
        </a>
        <a href="">
          <li>次へ></li>
        </a>
      </ul>
    </div>
  </div><!-- /contents -->

  <div class="other">
    <div class="profile">
      <img src="images/profile-m.png" alt="人物画">
      <h4 class="name">John Doe</h4>
      <ul>
        <li><a href="">Twitter</a></li>
        <li><a href="">Facebook</a></li>
        <li><a href="">insta</a></li>
      </ul>
      <p>これはプロフィールウィジェットです。ここにはプロフィール画像・名前・自己紹介文・ソーシャルリンク（最大7つ）を設定することができます。</p>
    </div>

    <div class="footer-right">
      <h4>フッター右</h4>
      <p>3つのフッター右ウィジェットエリアはフッターの右側に表示され、使用する数によって幅は自動的に調整されます。1つも使用しない場合は表示されません。</p>
    </div>

    <div class="recently-post">
      <h4>最近の投稿</h4>
      <a href="">書くためのテーマ</a>
      <span>2018年9月1日</span>

      <a href="">画像付きの投稿</a>
      <span>2018年3月5日</span>

      <a href="">引用付きの投稿</a>
      <span>2018年3月5日</span>
    </div>

    <div class="categories">
      <h4>カテゴリー</h4>
      <a href="">サンプル投稿</a>
      <a href="">投稿フォーマット</a>
      <a href="">普通の投稿</a>

      <div>検索...</div>
    </div>

  </div><!-- /other -->
</body>
</html>

@charset "UTF-8";

body {
  max-width: 1035px;
  margin: 0 auto;
}

/* HEADER
------------------------------ */
.header-top {
  margin-top: 60px;
}

.header-contents {
  display: flex;
  justify-content: space-between;
  margin-bottom: 80px;
}

.header-contents p {
  color: rgb(168,168,168);
}

.header-contents ul{
  display: flex;
  list-style: none;
}

.header-contents li {
  margin: 0 20px;
}

.header-contents a {
  text-decoration: none;
  color: #000;
}

.header-contents a:hover {
  color: goldenrod;
}

.bg-img img{
  max-width: 100%;
  height: auto;
  margin-bottom: 100px;
}

header p {
  font-size: 1.5rem;
  color: rgb(168,168,168);
}

header {
  margin-bottom: 100px;
}

/* CONTENTS
------------------------------------- */
.contents {
  padding-bottom: 125px;
  border-bottom: 1px solid rgb(168,168,168);
}

.contents_post {
  height: 220px;
  position: relative;
}

.post-date1 {
  position:absolute;
  top: 0;
  margin-left: 400px;
}

.post-date1 h2 {
  margin-bottom: 30px;
}

.contents_post a {
  display: flex;
  text-decoration: none;
  color: #000;
}

.contents_post a span,
.contents_post p {
  color: rgb(168,168,168);
}

.contents_post a span:hover {
  color:goldenrod;
}

.contents_post a:hover {
  color: goldenrod;
}

/* contents-page_link */
.contents-page_link {
  text-align: center;
}

.contents-page_link ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

.contents-page_link a {
  text-decoration: none;
  border: 1px solid rgb(168,168,168);
  padding: 10px 18px;
  margin: 0 10px;
  color: #000;
  display: inline-block;
}

/* OTHER
----------------------- */
.other {
  display: flex;
  justify-content: space-between;
  margin: 100px 0 150px 0;
  padding-bottom: 150px;
  border-bottom: 1px solid #666;
}

.profile img {
  border-radius: 50%;
  margin-bottom: 20px;
  width: 100px;
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

.profile {
  margin-right: 75px;
  width: 30%;
}

.footer-right {
  margin-right: 21px;
  width:30%;
}

.footer-right h4 {
  margin-bottom: 20px;
}

.recently-post {
  margin: 0 10px 0 21px;
  width:20%;
}

.recently-post h4 {
  margin-bottom: 20px;
}

.recently-post a,
.recently-post span {
  display: block;
  color: #666;
}

.recently-post span {
  margin-bottom: 10px;
}

.categories {
  margin-left: 10px;
  width: 20%;
}

.categories h4 {
  margin-bottom: 20px;
}

.categories a {
  display: inline-block;
  margin-bottom: 10px;
  color: #666;
}

/* media
----------------- */
@media(max-width: 600px) {
  .header-contents p {
    font-size: 0.875rem;
  }

  .header-contents ul,a {
    display: none;
  }

  .bg-img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .contents-post span {
    margin-left: 10px;
  }

  .post-date1 {
    margin-left: 10px;
    top: 35px;
  }

  .contents_post {
    margin-bottom: 80px;
  }

  .contents-page_link {
    display: none;
  }


  .other {
    flex-direction: column;
  }

  .profile {
    width: 100%;
    margin-bottom: 50px; 
  }

  .footer-right {
    width: 100%;
    margin-bottom: 50px;
  }

  .recently-post {
    width: 100%;
    margin-bottom: 50px;
  }

  .categories {
    width: 100%;
  }

  .categories a {
    display: block;
  }
}


### 試したこと

ソースコードを見比べた

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

ここにより詳細な情報を記載してください。

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

回答2件

ベストアンサー

綺麗とか完成度とかいってもプロジェクトなどにより観点や求められるものも違いますから今回の質問でどこまでのなにを求めているのか明示されないと、課題が明確でないためアドバイスも得られにくいかと思います。

ただ、「見本」が手元にあるのでしたら、「見本」は要は「お手本」なので、その見本を研究してみるのが一番でしょう。同じ見た目を実現できてるなら、単純に見比べたところで見えてくるものではないと思います。

投稿2020/04/02 01:42

m.ts10806

総合スコア80861

何から直すべきなのか

インデントを揃える
閉じタグの省略をしない

html
1        <a href="">
2          <span>2018年3月5日</span>
3          <div class="post-date1">
4            <h2>コメント付きの投稿</h2></a>
5            <p>吾輩は猫である。名前はまだ無い。どこで生まれたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそ...</p>
6          </div>