Q&A
前提・実現したいこと
・フッターを横いっぱいに表示させたい
・フッターの浮いている部分を無くしたい
発生している問題・エラーメッセージ
フッターの見栄えが悪い
### 該当のソースコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Sample</title> <link rel="icon" type="image/png" href="img/bamboo1.jpeg"> <!-- BootstrapのCSS読み込み --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery読み込み --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- BootstrapのJS読み込み --> <script src="js/bootstrap.min.js"></script> </head> <body style="background-color: antiquewhite;"> <header> <h1 class="mt-1 text-center font-weight-italic">竹ちゃんのどこでも教室 </h1> <!-- Content here --> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="mx-auto navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link mr-5" href="#"><strong>ホーム</strong><span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link mr-5" href="#"><strong>サイトを制作したきっかけ</strong></a> </li> <li class="nav-item"> <a class="nav-link mr-5" href="#"><strong>プロフィール</strong></a> </li> <li class="nav-item"> <a class="nav-link mr-5" href="#"><strong>指導方法</strong></a> </li> <li class="nav-item"> <a class="nav-link mr-5" href="#"><strong>料金</strong></a> </li> <li class="nav-item"> <a class="nav-link mr-5" href="#"><strong>お問い合わせ</strong></a> </li> </ul> </div> </nav> </header> <!-- main --> <div class="container"> <div class="row"> <div class="card col-lg-offset-1 col-lg-8 pt-3 mt-3 mr-4 "> <img src="img/online-4727942_640.jpg" alt="Card image"> <p class="text-center pt-3"><big>「竹ちゃんのどこでも教室」は、オンライン授業対応の家庭教師です。<br> <strong>「なんだって？ 自分の部屋が 教室に？」</strong>をコンセプトにしています。<br> 今まで学んだことを子供たちに伝えたいと思い、このサイトを立ち上げました。 </big> </p> </div> <div class="card col-lg-3 ml-5 mt-3 mr-3 h-50"> <img class="card-img-top" src="img/take.png" alt="Card image cap"> <div class="card-body > <h4 class="card-title">竹ちゃん（このサイトの管理人）</h4> <p class="card-text"> 仕事をやめ、現在プログラミングの勉強中。2020年ごろから開始。得意科目は英語と社会。 本を読んだり文章を書いたりするのが好き。 </p> <a href="#!" class="btn btn-primary">プロフィールへ</a> </div> </div> </div> <div class="row"> <div class="card col-lg-offset-1 col-lg-8 pt-3 mt-3 mr-4 "> <p class="lead text-center"><big>今後の展開</big></p> <p class="text-center"><big>家庭教師以外にも、英語の学習法・効率的な勉強法・おすすめの本などを発信したいと思っています。 また、無類のガジェット好きなので、勉強に役立つ機器やアプリも併せて紹介する予定です。 </big></p> <!-- 文字を大きくするのは<big></big>,小さくするのは<small></small> --> </div> </div> <!-- text-light,bg-dark=文字を明るく、背景黒 --> <footer class="container-fluid bg-dark w-100 text-light text-center mt-5"> <p class="lead">お問い合わせ</p> <ul>Gmail</ul> <ul>Phone</ul> <ul>LINE ID</ul> <p class="pb-3">© 竹ちゃんのどこでも教室</p> </footer> </body> </html> ```ここに言語名を入力 ソースコード
試したこと
w-100 を挿入して横いっぱいに広げてみたが駄目だった
margin-bottomを挿入して下から押し込んみたが失敗した
Googleで検索
補足情報（FW/ツールのバージョンなど）
Bootstrap ver/4.4
CSSは文字制限のため投稿不可
上記の理由でHTML内を修正したい
回答1件
0
ベストアンサー
・フッターを横いっぱいに表示させたい
main部分のdivタグが閉じていないので、main部分と同じ幅になってます。
html
1 </div> 2 </div> 3 </div> <!-- 閉じタグ追加 --> 4<!-- text-light,bg-dark=文字を明るく、背景黒 --> 5 <footer class="container-fluid bg-dark w-100 text-light text-center mt-5">
・フッターの浮いている部分を無くしたい
フッター内の最後のpタグの初期値(reboot.scss)のmargin-bottomがはみ出ていて空白になってます。
mb-0でmargin-bottomを0にすればいいでしょう。
html
1<p class="pb-3 mb-0">© 竹ちゃんのどこでも教室</p>
内側(p)のマージンが外側(footer)にはみ出るのかは、マージンの相殺が原因です。
投稿2020/04/01 01:22
総合スコア34075
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/01 02:48