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

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

ただいまの
回答率

90.98%

  • CSS

    4825questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    3400questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

footerとdivで囲んだ間の要素に隙間を空けたい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 241

abc30

score 28

前提・実現したいこと

footerと3番目の<div class="advertisement">で囲んだ間の要素に隙間を空けたいが、今ぴったりくっついている。

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

特にエラーは発生していない。

該当のソースコード

htmlには

<html lang="ja">

<head>
    <meta charset="UTF-8">
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="detail.css">
    <link rel="stylesheet" href="/static/bootflat/css/bootflat.min.css">
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

    <title>WEB SITE</title>
</head>

<body class="relative">

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="/static/accounts/header.css">
<header class="clearfix">
        <h1 class="title">WEB SITE</h1>
     <ul class="top-menu">
            <li class="top-menu-item"><i class="fa fa-plus" aria-hidden="true"><a class="icon_head" href="send">SEND</a></i></li>
            <li class="top-menu-item"><i class="fa fa-eye" aria-hidden="true"><a class="icon_head" href="see">SEE</a></i></li>
            <li class="top-menu-item"><i class="fa fa-search" aria-hidden="true"><a class="icon_head" href="know">KNOW</a></i></li>
       </ul>
        <a class="logout_button" href="logout_view">LOGOUT</a>
</header>


    <main>
        <div class="container">
            <div class="detailimg col-xs-8">
                <div class="relative_ele">
                    <div class="image">
                    <img class="absolute-fill" src="detail.jpg" width="500px" height="300px" alt="詳細" />
                    </div>

                    <div class="absolute-fill vertical-center-container">
                        <p class="hthree">I LOVE YOU</p>
                            <p class="hthree_small">I MISS YOU</p>
                    </div>
         </div>


                <a class="button-primary" href="like">LIKE</a>
                <a class="button-primary" href="love">LOVE</a>
                <a class="button-primary" href="miss">MISS</a>
                <a class="button-primary" href="wantt">WANT</a>
            </div>

                    <div class="col-xs-4 float-right">

                        <div class="advertisement">
                            <div class="flex-item"><a href="https://wwwwwwwwwwww" target="_blank" rel="nofollow">
<img border="0" width="250" height="250" alt="" src="https://yyyyyyyyyyyy"></a>
<img border="0" width="1" height="1" src="https://wwwxxxxxxxxxxxxxxx" alt=""></div>
                        </div>

                        <div class="advertisement">
                            <div class="flex-item"><a href="https://aaaaaaaaaaa" target="_blank" rel="nofollow">
<img border="0" width="350" height="240" alt="" src="https://rrrrrrrrr"></a>
<img border="0" width="1" height="1" src="https://wwwqqqqqqqqqqqqq" alt=""></div>
                        </div>

                        <div class="advertisement">
                            <div class="flex-item"><a href="https://zzzzzzzzz" target="_blank" rel="nofollow">
<img border="0" width="300" height="250" alt="" src="https://www2vvvvvvvvvvv"></a>
<img border="0" width="1" height="1" src="https://wwwmmmmmmmmmmmmm" alt=""></div>
                        </div>

                    </div>

        </div>
    </main>

    <footer>
      <div class="footers">
        <ul class="bottom-menu">
              <li class="bottom-menu-item"><a class="bottom_index" href="">ご利用規約とプライバシポリシー</a></li>
        </ul>
      </div>
  </footer>
</body>

</html>


cssには

* {
    margin: 0;
    padding: 0;
}


main, ul{
    display: flex;
}

.flex-item {
    width: 100%;
}

.half-width {
    width: 50%;
}

.title {
    color: white;
    font-size: 70px;
    align-self: center;
}

.top-menu-item{
    list-style: none;
    font-size: 17px;
}

.detailimg {
    margin: 30px 0px;
}

.col-xs-8 {
 width: calc(66.66666667% - 60px);
}

.image img{
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.white-letter {
    color: white;
}

.right-position {
    width: 100%;
}

.float-right {
    float: right;
}

.btn btn-primary btn-lg {
    background-color: black;
}

.outer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.advertisement{
    display: flex;
    align-items: flex-start;
}

.flex-item{
   flex-flow: column nowrap;
   margin: 20px 30px;
}

.small_img {
    margin: 40px 0;
}

.relative_ele{
    position: relative;
    height:300px
}
.absolute-fill {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
}

.vertical-center-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.hthree {
    color: white;
    font-size: 30px;
    padding-top:70px;
    padding-left:8px;
    font-weight: bold;
}

.hthree_small {
    color: white;
    font-size: 20px;
    padding-left:30px;
    margin-top:0px;
    margin-left:0px;
}

.button-primary {
    display: inline-block;
    width: 300px;
    height: 45px;
    font-size: 20px;
    background-color: black;
    color: white;
    text-align: center;
    padding: 5px 0px;
    margin: 10px 0px;
    border-radius: 6px;
}

footer{
 height: 50px;
 width: 100%;
 background-color: blue;
 position:absolute;
 bottom:0;
 margin-top:20px;
}

.footers{
 background-color: blue;
 position:absolute;
 bottom:0;
}

.relative {
 position: relative;
}

.bottom-menu-item{
    list-style: none;
    font-size: 15px;
}
.bottom_index {
    color: white;
    padding-left: 30px;
}


と書いた。

試したこと

clearfixが悪いのかと思ったが検証方法がわからない。
cssのflex-itemのmarginの大きさを大きくするとfooterとdivで囲んだ間の要素に隙間を空くが、3つのadvertisementの間の隙間も空いてしまい理想のスタイルにならない。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • 退会済みユーザー

    2017/10/15 16:18

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 1

checkベストアンサー

+1

的外れかもしれませんが、以下のようにしてはいかがでしょうか?

<html lang="ja">

<head>
    <meta charset="UTF-8">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/css/bootflat.min.css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/js/jquery.fs.selecter.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/js/jquery.fs.stepper.min.js"></script>
    <title>WEB SITE</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        main, ul {
            display: flex;
        }

        .flex-item {
            width: 100%;
        }

        .half-width {
            width: 50%;
        }

        .title {
            color: white;
            font-size: 70px;
            align-self: center;
        }

        .top-menu-item {
            list-style: none;
            font-size: 17px;
        }

        .detailimg {
            margin: 30px 0px;
        }

        .col-xs-8 {
            width: calc(66.66666667% - 60px);
        }

        .image img {
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
        }

        .white-letter {
            color: white;
        }

        .right-position {
            width: 100%;
        }

        .float-right {
            float: right;
        }

        .btn btn-primary btn-lg {
            background-color: black;
        }

        .outer {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .advertisement {
            display: flex;
            align-items: flex-start;
        }

        .flex-item {
            flex-flow: column nowrap;
            margin: 20px 30px;
        }

        .small_img {
            margin: 40px 0;
        }

        .relative_ele {
            position: relative;
            height: 300px
        }

        .absolute-fill {
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
        }

        .vertical-center-container {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        .hthree {
            color: white;
            font-size: 30px;
            padding-top: 70px;
            padding-left: 8px;
            font-weight: bold;
        }

        .hthree_small {
            color: white;
            font-size: 20px;
            padding-left: 30px;
            margin-top: 0px;
            margin-left: 0px;
        }

        .button-primary {
            display: inline-block;
            width: 300px;
            height: 45px;
            font-size: 20px;
            background-color: black;
            color: white;
            text-align: center;
            padding: 5px 0px;
            margin: 10px 0px;
            border-radius: 6px;
        }

        footer {
            height: 50px;
            width: 100%;
            background-color: blue;
            position: absolute;
            bottom: 0;
            margin-top: 20px;
        }

        .footers {
            background-color: blue;
            position: absolute;
            bottom: 0;
        }

        .relative {
            position: relative;
        }

        .bottom-menu-item {
            list-style: none;
            font-size: 15px;
        }

        .bottom_index {
            color: white;
            padding-left: 30px;
        }

        .advertisement:last-of-type {
            margin-bottom: 200px;
        }
    </style>
</head>

<body class="relative">

<header class="clearfix">
    <h1 class="title">WEB SITE</h1>

    <ul class="top-menu">
        <li class="top-menu-item"><i class="fa fa-plus" aria-hidden="true"><a class="icon_head" href="send">SEND</a></i>
        </li>
        <li class="top-menu-item"><i class="fa fa-eye" aria-hidden="true"><a class="icon_head" href="see">SEE</a></i>
        </li>
        <li class="top-menu-item"><i class="fa fa-search" aria-hidden="true"><a class="icon_head"
                                                                                href="know">KNOW</a></i></li>

    </ul>
    <a class="logout_button" href="logout_view">LOGOUT</a>
</header>


<main>
    <div class="container">
        <div class="detailimg col-xs-8">
            <div class="relative_ele">
                <div class="image">
                    <img class="absolute-fill" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=detail.jpg"
                         width="500px" height="300px" alt="詳細"/>
                </div>

                <div class="absolute-fill vertical-center-container">
                    <p class="hthree">I LOVE YOU</p>
                    <p class="hthree_small">I MISS YOU</p>
                </div>

            </div>


            <a class="button-primary" href="like">LIKE</a>
            <a class="button-primary" href="love">LOVE</a>
            <a class="button-primary" href="miss">MISS</a>
            <a class="button-primary" href="wantt">WANT</a>
        </div>

        <div class="col-xs-4 float-right">

            <div class="advertisement">
                <div class="flex-item"><a href="https://wwwwwwwwwwww" target="_blank" rel="nofollow">
                    <img border="0" width="250" height="250" alt=""
                         src="https://placehold.jp/3d4070/ffffff/150x150.png?text=https://yyyyyyyyyyyy"></a>
                    <img border="0" width="1" height="1"
                         src="https://placehold.jp/3d4070/ffffff/150x150.png?text=https://wwwxxxxxxxxxxxxxxx" alt="">
                </div>
            </div>

            <div class="advertisement">
                <div class="flex-item"><a href="https://aaaaaaaaaaa" target="_blank" rel="nofollow">
                    <img border="0" width="350" height="240" alt=""
                         src="https://placehold.jp/3d4070/ffffff/150x150.png?text=https://rrrrrrrrr"></a>
                    <img border="0" width="1" height="1"
                         src="https://placehold.jp/3d4070/ffffff/150x150.png?text=https://wwwqqqqqqqqqqqqq" alt="">
                </div>
            </div>

            <div class="advertisement">
                <div class="flex-item"><a href="https://zzzzzzzzz" target="_blank" rel="nofollow">
                    <img border="0" width="300" height="250" alt=""
                         src="https://placehold.jp/3d4070/ffffff/150x150.png?text=https://www2vvvvvvvvvvv"></a>
                    <img border="0" width="1" height="1"
                         src="https://placehold.jp/3d4070/ffffff/150x150.png?text=https://wwwmmmmmmmmmmmmm" alt="">
                </div>
            </div>

        </div>

    </div>
</main>

<footer>
    <div class="footers">
        <ul class="bottom-menu">
            <li class="bottom-menu-item"><a class="bottom_index" href="">ご利用規約とプライバシポリシー</a></li>
        </ul>
    </div>
</footer>
</body>

</html>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/10/15 16:51

    ありがとうございます。
    .advertisement:last-of-type {
    margin-bottom: 200px;
    }
    のcssがGoogleデベロッパーツールでは反映されないのですが。。。そちらでは反映されていましたか?

    キャンセル

  • 2017/10/15 16:59 編集

    反映されています。キャッシュの消去(http://portal.tac-school.co.jp/faq_system/?id=38)を行ったうえで回答文のコードをもう一度ためしてみていただけませんか?

    キャンセル

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

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

関連した質問

  • 解決済

    ページ上部にスクロール設定について

    ページの右下に、クリックするとページ上部に行く設定をしたのですが、スクロール位置を1000以下にすると非表示に設定をhead内に記述したのですが実行できません。 ご教授頂けますと嬉

  • 受付中

    レスポンシブルデザインについて

    ページ上部のメニューをクリックしたらスマホのサイトのようなメニューバーを表示させたいのですがどうすればよろしいでしょうか。 ちなみにこちらのサイトを参考にしました https://

  • 解決済

    レスポンシブデザインについて

    この画像の上部の油そば池袋とありますが幅を小さくしていくと 赤枠の箇所に油そば池袋と入れたいのですがどうすればよろしいでしょうか <!DOCTYPE html> <html

  • 受付中

    レスポンシブデザインのメニューの幅のサイズが変更できない

    こちらのサイトを参考にして、ウィンドウ幅が小さくなったときスマホサイト用にメニューが出る設定をしたのですが幅が表示されるときのウィンドウ枠の数値をjquery.meanmenu.j

  • 受付中

    paddingの見抜き方を教えて下さい

    <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv=

  • 解決済

    footerの下に余白があく

    前提・実現したいこと footerの下に余白があく。余白を0pxもあかないようにしたい。 発生している問題・エラーメッセージ 特にエラーは発生していない。 該当のソースコー

  • 解決済

    divで囲んだ部分が縦に並ばない

    前提・実現したいこと divのitemsクラスで囲んだ部分が縦に並ばない。 col-xs-8とcol-xs-4を使い画面を8:4に分けてその4の部分に画像を縦に並べたい。 発生

  • 解決済

    画像の下にテーブルが来てしまう

    前提・実現したいこと 画像の下にテーブルが来てしまう。 画像とテーブルの間に30px隙間を空けて配置したい。 発生している問題・エラーメッセージ エラーは特に発生していない。

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

  • CSS

    4825questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    3400questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。