「Write - 書くためのテーマ」の模写コーディング....現在状況(今の所プログラムは修正できました ありがとうございました)

Question

スペック

MacOS Catalina, GoogleChome, Visual Studio Code

前提

「Write-書くためのテーマ」の模写コーディングの練習をしてまして、CSSで一番下の薄い線が動かせません。
コードが入り切らなかったので別のとこにあります。

コード　説明

作れなかったので回答にございます。手間がかかると思いますがそれは申し訳ありません。

写真

最後

・もしわかる人がいれば、できれば回答で教えてくれると助かります。
・手間がかかりまして申し訳ありません。
・そして長いプログラムで申し訳ありません。
・もし回答してくださったかたは誠にありがとうございます。

Comments

[m.ts10806]

>別のとこにあります
どこでしょうか。

ただ、タイトルにあることをやるだけのために全てのコードが必要ですか？
その部分だけ切り出して提示されてはどうでしょうか。

>https://teratail.com/help/question-tips#questionTips3-5-1
>最も良いのは、現象を再現するためのミニマムなプログラムを改めて作ることです。

[Rwight]

少しおまちください。。。
1000文字以内に入り切らなかったため

[Rwight]

すみませんこんな感じです。

[Rwight]

コマンドは回答にあります。

[Rwight]

手間がかかりますがよろしくお願いします

[Takumiboo]

質問は編集できます。このコメント欄や回答として書くのではなく、質問を編集してください。

[Rwight]

ありがとうございます。参考にさせていただきます。[ @Takumibooさん ]
返信が遅れてしまって申し訳ありません。
後質問でどうしても１０００文字以上のコードになってしまったので回答に書かせてもらいました。

[m.ts10806]

タイトルにあることをやるだけのために全てのコードが必要ですか？
その部分だけ切り出して提示されてはどうでしょうか。

>https://teratail.com/help/question-tips#questionTips3-5-1
>最も良いのは、現象を再現するためのミニマムなプログラムを改めて作ることです。

本当にそれだけの字数必要ならGithubなど外部サービスを利用してください。
回答に投稿すると意味が全く違ってきます。意味を考えた上で、どうすればいいか判断つかないなら、投稿前に相談してもらえれば良いのですけど。

Answer 1

Write – 書くためのテーマ
このページを模写しているということですね。

現状は、ページナビゲーションの上に「薄い線」(次の要素のborder-top)が来ているのをページナビゲーションの下に移動させたいということだと、推測しました。

まず、ページナビゲーションの上に次の要素のborder-topがきてしまう原因は、ナビゲーション要素(li)にfloat: left;を設定していることです。
float: left;を設定する通常のフローから外れて浮いた状態になるので、親要素(ul)の高さが0になるために、次の要素が上に移動してしまいます。

横並びさせるために設定したのだと思いますが、display: inline-block;で横並びになるので、float: left; は削除すればいいでしょう。

あとは、ページナビゲーションの下にmargin-bottomで適切に余白を設定すればいいでしょう。

.page-list li {
  /* float: left; 削除 */
  font-size: 16.8px;
  color: #777777;
  display: inline-block;
  border: 1px solid #cccccc;
  padding: 8px 18px;
  margin-left: 6px;
  opacity: 0.5;
/*background-color: rgb(244, 248, 203);*/
}

.page-list {
  margin-bottom: 100px; /* 追加 */
}

Comments

[Rwight]

すみません、回答であったことをプログラムで修正したのがダメでした。何が原因でこうなっているのかも分からないという今のじてんですが、修正をした今の現在の状況を載せました。まだどこがいけないかわかりません・・・っていうのが今のところです。hatena19さんご回答ありがとうございましたm(_ _)m

[hatena19]

回答に提示されたコードでは、質問の画像のようにはなりません。
提示されたコードを私の回答にそって修正したサンプルが下記です。

https://codepen.io/hatena19/pen/XWjgvRZ

現象の再現するコードを提示してください。

[Rwight]

ありがとうございます。試しにやってみます。自分の時間のためにご回答をやってくださってありがとうございました。

[Rwight]

ベストアンサーをしておきます。

Answer 2

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body {
line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}

a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}

table {
border-collapse:collapse;
border-spacing:0;
}

/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}

/*TOP画面作成開始*/

body {
font-size: 15px;
font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
line-height: 1.8;
/*background-color: rgb(163, 163, 163);*/
}

a {
text-decoration: none;
color: #444444;
}

ul {
list-style: none;
}

header{
height: 152px;
margin-top: 50px;
}

.container {
width: 1040px;
margin: 0 auto;

}

.header-left {
float: left;
}

.header-left h1 {
font-size: 36px;
line-height: 42px;

}

.header-left p {
font-size: 18px;
}

.header-right {
padding-top: 45px;
float: right;
}

.fas {
margin-left: 10px;
}

.gnav li {
float: left;
font-size: 16.88px;
padding: 0 15px;
position: relative;
}

.gnav li ul {
position: absolute;
top: 45px;
left: -5px; /*左の幅*/
height: 0; /*高さ*/
visibility: hidden;
}

.gnav li a {
display: block;
/*background-color: rgb(111, 141, 155);*/
padding-bottom: 15px;
}

.gnav li li {
width: 200px;
border: solid 1px #a5a1a1;
padding: 10px 20px 0 20px;
box-shadow: 0.5px 0.5px #a5a1a1; /* (#615f5f) */
background-color: white;
opacity: 0;
transition: all 0.3s;
}

.gnav li:hover ul li {
visibility: visible;
opacity: 1;
}

.gnav li a:hover {
color: #C49029;
}

.gnav {
padding: 0 200px 0 0; /*(上・右・下・左)*/
}

.search-wrapper {
height: 40px;
/*background-color: #ff65ff;*/
display: inline-block;
float: right;
position: relative;
}

.search {
height: 40px;
width: 0;
background: URL(google-検索アイコン.png) left center no-repeat;
background-size: 26px 26px;
padding-left: 30px;
font-size: 16px;
border: 1px solid #615f5f;
position: absolute;
right: 0;
top: -5px;
outline: none;
border: none;
cursor: pointer;
transition: 0.5s;
}

.search:focus {
width: 210px;
height: 34px;
border: 1px solid #615f5f;
background-color: white;
cursor: text;
}


input, select {
vertical-align:middle;
}

/*TOP画面作り終わり*/
/*テキストボックスエリア開始*/

.top-wrapper {
height: 780px;
/*background-color: rgb(142, 142, 247);*/
}

.top-wrapper p {
font-size: 27px;
color: #777777;
padding-top: 90px;
}

.main-wrapper {
height: 1440px;
width: 1040px;
margin: 0 auto;
/*background-color: rgb(155, 201, 174);*/
}

/*線を追加開始*/

.main-wrapper .container{

border-top: 1px solid #ccc;
padding-top: 150px;
/*background-color: pink;*/
}


/*線を追加終わり*/



.date {
float: left;
margin-right: 220px;
font-size: 16.8px;
color: #999999;
padding-top: 10px;
opacity: 0.5;
}

.date:hover {
opacity: 1;
}

.textarea {
width: 700px;
display: inline-block;
}

.text-heading {
color: #111111;
font-size: 22.4px;
padding-bottom: 20px;
}

.text-heading a:hover {
color: #C49029;
}

.text {
font-size: 16.8px;
color: #666666;
}

.text-box {
padding-bottom: 60px;
}

/*テキストボックスエリア終わり*/
/*リストエリア開始*/

.page-list li {
float: left;
font-size: 16.8px;
color: #777777;
display: inline-block;
border: 1px solid #cccccc;
padding: 8px 18px;
margin-left: 6px;
opacity: 0.5;
/*background-color: rgb(244, 248, 203);*/
}

.page-list li:hover {
opacity: 1;
}

.page-list {
margin-left: 320px;
}

.page-list .this {
background-color: #EEEEEE;
color: #333333;
opacity: 1;
}

/*リストエリア終わり*/

Answer 3

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <!--<link rel="stylesheet" href="Write.css">-->
  <link rel="stylesheet" href="Write-書くためのテーマ.css">
  <link rel="shortcut icon" href="google-検索アイコン.png">
  <meta charset="utf-8">
  <title>Write-書くためのテーマ-再</title>
  <script src="https://kit.fontawesome.com/fb8f424287.js" crossorigin-="anonymous"></script>
</head>
<!-- Body要素 -->
<body>
<header>
  <div class="container">
    <div class="header-left">
      <h1><a href="Write-書くためのテーマ.html">Write</a></h1>
      <p>書くためのテーマ</p>
    </div>
    <div class="header-right">
      <div class="header-nav">
        <ul class="gnav">
          <li><a href="#">ホーム<span class="fas fa-angle-down"></a>
            <ul>
              <li><a href="/">→カスタマイズ</a></li>
            </ul>
          </li>
          <li><a href="#">ページ<span class="fas fa-angle-down"></a>
            <ul>
              <li><a href="/">アイキャッチ画像無しのページ</a></li>
              <li><a href="/">ページ（全幅テンプレート）</a></li>
            </ul>
          </li>
          <li><a href="#">タイポグラフィー</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </div>
      <!--(パート②)-->
      <div class="search-wrapper">
        <form action="http://www.google.co.jp/">
          <input class="search" name="q" type="text" placeholder="                検索" />
        </form>
      </div>
      <!--(パート②終わり)-->
    </div>
  </div>
</header>
<!--(パート3開始)-->
<div class="top-wrapper">
  <div class="container">
    <img src="メガネ画像.jpg" />
    <p>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>
  </div>
</div>
<!--日にち作業-->
<div class="main-wrapper">
  <div class="cotainer">
    <!--１エリア-->
    <!--テキストボックスエリア開始-->
    <div class="text-box"><!--テキストボックス-->
      <div class="date"><!--日にち-->
        <p><a href="#">2018年9月1日</a></p>
      </div>
      <div class="textarea"><!--テキストエリア-->
        <h1 class="text-heading"><a href="#">書くためのテーマ</a></h1>
        <p class="text">Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>
      </div>
    </div>
    <!--テキストボックスエリア終わり-->
    <!--２エリア-->
    <!--テキストボックスエリア開始-->
    <div class="text-box"><!--テキストボックス-->
      <div class="date"><!--日にち-->
        <p><a href="#">2018年3月5日</a></p>
      </div>
      <div class="textarea"><!--テキストエリア-->
        <h1 class="text-heading"><a href="#">画像付きの投稿</a></h1>
        <p class="text">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
      </div>
    </div>
    <!--テキストボックスエリア終わり-->
    <!--３エリア-->
    <!--テキストボックスエリア開始-->
    <div class="text-box"><!--テキストボックス-->
      <div class="date"><!--日にち-->
        <p><a href="#">2018年3月5日</a></p>
      </div>
      <div class="textarea"><!--テキストエリア-->
        <h1 class="text-heading"><a href="#">引用付きの投稿</a></h1>
        <p class="text">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ…</p>
      </div>
    </div>
    <!--テキストボックスエリア終わり-->
    <!--４エリア-->
    <!--テキストボックスエリア開始-->
    <div class="text-box"><!--テキストボックス-->
      <div class="date"><!--日にち-->
        <p><a href="#">2018年3月5日</a></p>
      </div>
      <div class="textarea"><!--テキストエリア-->
        <h1 class="text-heading"><a href="#">コメント付きの投稿</a></h1>
        <p class="text">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそ…</p>
      </div>
    </div>
    <!--テキストボックスエリア終わり-->
    <!--５エリア-->
    <!--テキストボックスエリア開始-->
    <div class="text-box"><!--テキストボックス-->
      <div class="date"><!--日にち-->
        <p><a href="#">2018年3月3日</a></p>
      </div>
      <div class="textarea"><!--テキストエリア-->
        <h1 class="text-heading"><a href="#">吾輩は猫である</a></h1>
        <p class="text">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそ…</p>
      </div>
    </div>
    <!--テキストボックスエリア終わり-->
    <!--６エリア-->
    <!--テキストボックスエリア開始-->
    <div class="text-box"><!--テキストボックス-->
      <div class="date"><!--日にち-->
        <p><a href="#">2018年3月3日</a></p>
      </div>
      <div class="textarea"><!--テキストエリア-->
        <h1 class="text-heading"><a href="#">名前はまだ無い。どこで生れたかとんと見当がつかぬ。</a></h1>
        <p class="text">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそ…</p>
      </div>
    </div>
    <!--テキストボックスエリア終わり-->
    <!--リストエリア開始-->
    <ul class="page-list">
      <li class="this">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">次へ<span class="fas fa-angle-double-right"></span></a></li>
    </ul>
    <!--リストエリア終わり-->
    <!--プロフィール作り開始-->

    <div class="profile-wrapper">
      <div class="container">
        <div class="profile"><!--プロフィール-->
          <img class="photo" src="アイコン.png" />
        </div>
        <div class="sub-menu"><!-- サブメニュー -->
          <div class="sub"><!--サブ１-->
            <
          </div>
          <div class="sub"><!--サブ２-->
            <
          </div>
          <div class="sub"><!--サブ３-->
            <
          </div>
        </div>
      </div>
    </div>

    <!--プロフィール作り終わり-->

  </div>
</div>
<!--日にち作業-->
<!--(パート3終了)-->
</body>
<!-- Body要素終わり -->
</html>