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

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

ただいまの
回答率

87.49%

footerがタグだけでは一番下CSS適用すると画面中央付近に表示される

解決済

回答 2

投稿 編集

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

score 41

トップの画像を変更していたら、フッターで設定がすぐ下に表示されてしまうようになってしまいました。
一番下に戻す方法をご教授お願いします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="description" content="********************************">
<link href="reset.css" rel="stylesheet" type="text/css" madia="screen">
<link href="style.css" rel="stylesheet" type="text/css" madia="screen">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>*************|***********</title>
    </head>
    <body>
        <header>
            <div class="top"></div>
            <div class="wapper">
                <a href="./"><img class="mainlogo" src="imges/ks_logo1.png" alt=""></a>
                <a href="./"><img class="mainlogo2" src="imges/ks_logol2.png" alt=""></a>
            </div>
        </header>
        <main>
        <div class="topnav">
        <nav>
        <ul>
            <li><a href="./">HOME</a></li>
            <li><a href="kaisyaannai.html">*****</a></li>
            <li><a href="seihinsyoukai.html">*****</a></li>
            <li><a href="otoiawase.html">*******</a></li>
        </ul>
        </nav>
        </div>
        <div class="topga">
            <br><br><br><br><br><br><br><br>
        <p>TOP画</p>
        </div>
        <div class="topmongon">
            <h1><span class="aikya">**</span><span class="kyatti">**</span><span class="kya">**</span>**********。<br>*******************</h1>
            <p><br><br><br>************************<br><br><br><br><br></p>
        </div>    
        <div class="topics">
            <h2>**********</h2>
            <p><br><br><br><br><br><br>**************<br><br><br><br><br></p>
        </div>
            <div class="meinsetumei">
            <h2 class="meinsyousai1">***********</h2>
            <h2 class="meinsyousai"><span class="henkou">***********</span><span class="henkou2">************</span>***********、<br>******************。</h2>
            </div>
            <h2 class="topsyoukai">*********</h2>
        <div class="henatuki">
            <ul class="syoukai">
                <li class="syouhin"><p><a href="seihinsyoukai.html">**********</a></p></li>
                <li class="gazou"><img src="imges/IMG_0355-1.png"></li>
            </ul>
            <ul class="syoukai">
                <li class="syouhin2"><p><a href="seihinsyoukai.html">**********</a></p></li>
                <li class="gazou"><img src="imges/IMG_0355-1.png"></li>
            </ul>
            <ul class="syoukai">
                <li class="syouhin3"><p><a href="seihinsyoukai.html">***********</a></p></li>
                <li class="gazou"><img src="imges/IMG_0355-1.png"></li>
            </ul>
        </div>
        </main>

<footer>
    <div class="sita">
        <img src="imges/ks_logol.png" alt="">
        </div>
        <p class="adores">*************************</p>
            <div class="itibansita">
                <p class="tel">TEL************&nbsp;&nbsp; <span class="fax">FAX ********</span></p>
            </div>
            <p class="kopi">&copy;*********** All rights reserved</p>
        </footer>
</body>
</html>
@charset "utf-8";
/* CSS Document */
html{
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Osaka,'MS Pゴシック',sans-serif
}
.top{
    margin-top:0;
    padding-top:0;
    border-top: solid 5px;
    border-color: #32cd32;
}
.wapper{
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
}
.logo{
    display: flex;
    list-style-type: none;
}
.mainlogo{
    width:10%;
    height: auto;
    padding-right: 5px;
    margin-bottom:20px;
    margin-top:20px;
}
.mainlogo2{
    margin-left: 0;
    width:50%;
    height: auto;
    margin-bottom:35px;
    margin-top:0;
    margin-left: 5px;
}
.topnav{
    margin: 0 auto;
    background-color: #32cd32;
    text-align: center;
}
.topnav ul{
    display: flex;
    /* ↓一応いれます */
     justify-content: space-between;
    list-style-type: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 960px;
    max-width: 100%;
    font-size: 20px;
    font-weight: bold; /*太字に*/
    color: #ffffff;
}
.topnav li {
    width:25%;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* ボーダー(左)入れます */
    border-left:1px solid #fff;
}
/* リストの最後だけ右にもボーダー*/
.topnav li:last-child {
    border-right:1px solid #fff;
}
.topnav ul li a{
    text-decoration: none;
    color: #ffffff;
    text-align: center;
    display:block; /* 追加 */
    padding:20px; /* 追加 */
}
.topnav li:hover a{
    opacity:0.6;
}
.topga {
    background-color: #afeeee;
    height: 400px;
    width:auto;
    text-align: center;
}
.topmongon{
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
    line-height:1.4;
}
.topmongon h1{
    padding-top: 15px;
    font-size: 28px;
    border-bottom:solid 1px #b0c4de;
    padding-bottom: 5px;
    line-height:1.3;
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
}
.topmongon p{
    text-align: center;
}
.aikya{
    font-size:37px;
    color: #32cd32;
}
.kyatti{
    font-size:37px;
    color: #9932cc;
}
.kya{
    font-size: 37px;
    color: #ff6347;
}
.meinsyousai1{
    padding-top:15px; 
}
.meinsetumei h2{
    padding-bottom: 5px;
    font-size: 28px;
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
    line-height:1.4
}
.henkou{
    font-size:34px;
    color: #32cd32;
}
.henkou2{
    font-size:34px;
    color: #ff0000;
}
.meinsetumei p{
    text-align: center;
}
.zigyouannai{
    margin-bottom: 5px;
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
}
.zigyouannai h1{
    font-size: 35px;
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
    margin-top:-15px;
}
.zigyouannai h2{
    padding-top: 10px;
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
    font-size:25px;
}
.zigyouannai p{
    margin: 0 auto;
    width: 960px;
    padding-left: 20px;
    max-width: 100%;
    font-size: 22px;
    margin-top:15px;
}
.zigyouannai img{
    padding-top: 10px;
    height: 700px;
    width: auto;
    text-align: center;
}
.setumei02 h2{
    font-size: 20px;
    text-align: center;
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
}
.setumei02 p{
    text-align: center;
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
}
/*teble*/
.table-wrapper{
    padding-bottom: 30px;
}
.teble-midasi{
    opacity:0;
}
.kaisya-annai{
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
}
.topsetumei{
    margin-top:50px;
}
h2{
    margin-top: 20px;
    margin-bottom:15px;
    font-size: 18px;
}
.gaiyou{
    margin-left: auto;
    margin-right:auto;
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
    border: solid 1px #90ee90;
}
.gaiyou th{
    background: #90ee90;
    white-space: nowrap;
    padding:20px 10px;
    border: solid 1px #90ee90;
}
.gaiyou td{
    padding:20px 10px;
    vertical-align:middle;
    border: solid 1px #90ee90;
}
.iti{
    background-color: #32cd32;
    text-align: center;
}
.torihikisaki{
    list-style-type:none;
}
.topics h2{
    padding-top: 10px;
    padding-bottom: 8px;
    padding-left: 0.2em;
    color: #ffffff;
    font-size:25px;
    border-bottom: solid 1px #b0c4de;
    background-color: #32cd32;
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
}
.topics p{
    border-right: solid 1px #b0c4de;
    border-left: solid 1px #b0c4de;
    border-bottom: solid 1px #b0c4de;
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
    text-align: center;
}
.henatuki{
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
    display: flex;
}
.topsyoukai{
    font-size:28px;
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
    padding-top: 30px;
    border-bottom: solid 1px #dcdcdc;
}
.syoukai{
    display: flex;
    margin-top: 50px;
    list-style-type: none;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
}
.syouhin{
    text-decoration: none;
    color: #32cd32;
    margin-left: 10px;
    margin-right: 10px;
    width: 80px;
}
.syouhin2{
    text-decoration: none;
    color: #32cd32;
    margin-right: 15px;
    margin-left: 60px;
    width: 80px;
}
.syouhin3{
    text-decoration: none;
    color: #32cd32;
    margin-right: 15px;
    margin-left: 80px;
    width: 80px;

}
.gazou{
    width: 50px;
    height: auto;
    padding-right:15px;
}
footer{
    position: absolute;
    margin-top: 80px;
    background-color:#e0ffff;
    width: 100%;
    height: 150px;
    bottom: 0;
}
.sita{
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
    padding-top: 20px;
    text-align: center;
}
.sita img{
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
.itibansita {
    text-align: center;
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
    bottom: 10px;
}
.itibansita p{
    text-align: center;
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
    padding-top: 10px;
}
.adores{
    text-align: center;
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
    font-size: 18px;
    margn-top:10px;
}
.tel{
    color: #ff7f50;
    font-size: 23px;
    font-weight:bold;
    padding-top:1px;
    padding-bottom: 15px;
}
.fax{
    color: #32cd32;
    font-size: 23px;
    font-weight:bold;
}
.kopi{
    text-align: center;
    margin:0 auto;
    width: 960px;
    position: absolute;
    bottom: 0;
    right:0;
    left: 0;
    font-size: 18px;
    padding-top: 20px;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • let

    2021/03/04 12:33

    タグだけでやれば一番下にいますね、CSSと組み合わせるとページ中盤ぐらいに止まります

    キャンセル

  • let

    2021/03/04 15:14

    footerのCSSの問題かな・・・
    適用外しても位置かわらないんですよね。
    どこに問題なんでしょう

    キャンセル

  • tomtomtomtom

    2021/03/09 19:38

    他の方が書いているように
    footerの
    position: absolute;
    を消せばよいかと思います^^

    キャンセル

回答 2

checkベストアンサー

0

footer(とその中に入っている.kopi)をpositionで絶対配置したい理由がさっぱりわからず。。

もしかしたら純粋にブロック要素として<main>の下に来るだけで良いのでは?と推測してみました。
コメントアウトしている部分が削除箇所です。

footer{
    /*position: absolute;*/
    margin-top: 80px;
    background-color:#e0ffff;
    width: 100%;
    height: 150px;
    /*bottom: 0;*/
}
.kopi{
    text-align: center;
    margin:0 auto;
    width: 960px;
    /*position: absolute;*/
    /*bottom: 0;*/
    /*right:0;*/
    /*left: 0;*/
    font-size: 18px;
    padding-top: 20px;
}

HTMLについては、</body> が<footer></footer>よりも前で閉じてしまっているので、</footer>の後(</html>の手前)に移動させましょう。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2021/03/04 17:45

    font-size: 18px;
    padding-top: 20px;まで適用外にしたらコピーライトが表示されるようになりました。
    この動作はおかしいですか?

    キャンセル

  • 2021/03/04 17:51

    .kopiのフォントサイズが18pxじゃなくても良くて、padding-topも20pxじゃなくて良いなら、良いのではないでしょうか。

    キャンセル

  • 2021/03/05 11:09

    あー過去の質問内容を見て、絶対配置の理由がわかりました。
    https://teratail.com/questions/323627

    .kopiをfooterの下部に固定したくて(?)、元々はfooterにrelative、.kopiにabosoluteかけてたんですね。
    で、amiya-seさんの回答を見て、footerをabsoluteにしたからfooterごと浮いた、と。

    経緯なんとなく把握しました。
    結果的にhatena19 さんの回答内容を打ち消すような回答になってしまって申し訳ない。。

    absoluteは「浮かせて絶対配置」するので、次の要素が意図しない位置に回り込んできたり…とトラブルが起きやすいです。質問者さんの側でも、仕様を理解したうえで使っていくと良いと思います。

    まずは「ブロック要素を縦に積む」「要素がブロックかインラインか意識する」「横並びにしたい場合はflexやgridで」という形で大まかなレイアウトを作っていくのが一番シンプルです。

    キャンセル

0

この回答は不適当です。
掲載コードがフッターに関する部分のみだった時に、
見えているコードから推察したものになります。
以下の文言は参考になりませんのでご注意ください。

footerbottom:0;付けているから、
「画面下部に絶対配置したいのでは?」と思うのだけど、
relativeにした理由が何かあるのかなぁ?

footer{
    //position: relative;
    position: absolute;

    bottom: 0;
}

これで直ればおめでとう、かな。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2021/03/04 11:47

    グローバルナビゲーションの下にはきましたが、一番下に戻りません。
    どこが悪いんでしょう?

    キャンセル

  • 2021/03/04 21:13

    すみません、めっちゃ真面目に仕事したり、家事していました。
    嫁様が帰宅したら一緒に飯なので、その後に拝見させていただきます。

    キャンセル

  • 2021/03/04 21:18

    footer {
    position: absolute;
    margin-top: 80px;
    background-color: #e0ffff;
    width: 100%;
    height: 150px;
    /* bottom: 0; */
    }

    こうしたら一応下に行きました。
    帰ってきちゃったんで後でもう一度見ますね。

    キャンセル

  • 2021/03/04 22:03

    問題が解決できるようにお答えできず、すみませんでした。
    他の方とのやりとりで解決されたようで安心いたしました。
    検索で来られる方の迷惑にならないように回答を編集しておきます。

    キャンセル

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

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

関連した質問

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