質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.95%

div要素が重なり合って文字が隠れます。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 3,770
退会済みユーザー

退会済みユーザー

お世話になります。
iSaraというプログラミングスクールのサイトの模写をしている初心者コーダーです。
画面キャプチャの通り、黄色い背景(class名:second-section)とその下の文字(class名:third-section)が重なっていて、下の文字が読めなくなっている状態です。
どのようにすればsecond-sectionとthird-sectionが重ならなくなりますか?

<div class="second-section">
            <p class="one">まずは20日間で、<br>月10万円稼げるスキルを手にいれよう。</p>
            <p class="two">※受講料金は実質0円です。詳しくは資料請求をどうぞ。</p>
            <a href="" class="three">お問い合わせ&資料請求はこちら</a>
            <p class="four">第4期生:2018年12月3日 ~ 2018年12月22日  *締め切りました</p>
            <p class="five">第5期生:2019年4月8日 ~ 2019年4月27日 *締め切りました</p>
            <p class="six">第6期生:資料請求受付中です</p>
                <div class="SNS_button">
                    <div class="twitter-button">
                        <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">
                        Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
                    </div>
                    <div class="facebook-button">
                        <div id="fb-root"></div>
                        <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.2"></script>
                        <div class="fb-like" data-href="https://isara.life/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
                    </div>
                </div>
        </div>

        <div class="third-section">
            <p class="title">エンジニアとして本当の自由を手に入れるためには?</p>
            <p class="one">エンジニア需要の高まりに伴い、プログラミングスクールが増えています。<br>
                しかしそこでの学習の先は、 提携して決められた就職先に就職すること。</p>
            <p class="2">これで本当にいいのですか?<br>
                日本人エンジニアはアメリカと較べて給料が格段に低い。<br>
                その理由がここにあり、 エンジニアは自分の給料をコントロールすべきなのです。</p>
            <p class="3">スキルを身につけたエンジニアは、人生をコントロールすることでより自由に。<br>
            そこで必要なのが 「稼ぐ力」です。</p>
        </div>
.second-section {
    position: relative;
    text-align: center;
    top: 200px;
    background-color: #EBB94D;
    padding: 35px;
}

.second-section .one,
.second-section .four,
.second-section .five,
.second-section .six {
    color: white;
}

.second-section p {
    margin: 0 auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.second-section .three {
    display: inline-block;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    margin: 50px auto;
    background-color: #D84940;
    padding: 35px 290px;
    border-radius: 55px;
    color: white;
}

.second-section .two {
    background-color: white;
    color: #D84940;
    width: 41%;
    border-radius: 6px;
    margin-top: 20px;
}

.second-section .one {
    line-height: 35px;
}

.second-section .four,
.second-section .five,
.second-section .six {
    letter-spacing: 3px;
    font-size: 20px;
    line-height: 60px;
}

.second-section .twitter-button,
.second-section .twitter-button {
    float: left;
    margin-right: 5px;
}

.third-section {
    height: 590px;
}

.third-section .title {
    font-size: 20px;
}

画面キャプチャ

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • aKusano

    2019/04/23 10:10

    画面キャプチャが正しく投稿できていません。
    質問を編集してキャプチャ画像を表示するようにしてください。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2019/04/24 09:49

    画面キャプチャを修正しました。

    キャンセル

回答 2

+4

.second-section {
    position: relative;
    text-align: center;
    top: 200px;//消す
    background-color: #EBB94D;
    padding: 35px;
}

top: 200px;が位置を下げている可能性があるので、こちらを一度消してみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/24 15:17

    ご回答ありがとうございます!

    キャンセル

checkベストアンサー

+3

LanHmaさんが指摘している通り、 top: 200px と指定しているのがコンテンツ被りの原因ですね。
この指定を削除すれば重なりはなくなります。

.second-section {
    position: relative;
    text-align: center;
    /*top: 200px;*/ ← ★ココ
    background-color: #EBB94D;
    padding: 35px;
}


また、キャプチャを見る限りヘッダーを固定配置にしたいようですね。
おそらくtop: 200pxとしていたのは、初期表示でこのヘッダーに.second-sectionが隠れてしまうのを回避するため、下に下げたかったものと思います。
掲載されている箇所以外のHTMLがどうなっているのか分からないのでベストかどうかは分かりませんが、
固定表示のヘッダーの高さ分だけコンテンツの表示位置を下げる場合は、
body要素やmain要素など、コンテンツを囲む要素に対してmargin-topまたはpadding-topで
余白を確保するのが一般的です。

例えばこうです。

body {
  margin-top: 200px; /*←こっちで余白確保*/
}
.second-section {
  position: relative;
  text-align: center;
  background-color: #EBB94D;
  padding: 35px;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/24 15:20

    ご回答ありがとうございます!
    重ならないようにできました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.95%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る