Q&A
Laravel全く関係ないのでは
Laravel 5.5で構築しています。Bootstrapをデザインで用いています（Bootstrapはcssファイルを公式サイトからダウンロードし、public>cssフォルダにアップロードして使用しています）
やりたいこと
[1]管理画面を作るのに、サイドメニューを付けたのですが、変な隙間ができてしまって困ってます…
この、隙間をなくしたいです。
[2]緑色のサイドメニューを、できれば、フッターまで伸ばしたいです。（フッター部分までサイドメニューの緑色がいくようにしたいです）
[3]サイドメニューをスマホで見た時にハンバーガーメニューになるようにしたいです。
Bootstrapのハンバーガーメニューを参考に記載してみましたが、スマホサイズにした時に、デフォルトで緑色のサイドメニュー部分が表示されてしまって、ハンバーガーをクリックすると引っ込む…というようになってしまいます。
↑スマホの時。ハンバーガーメニューは表示されますが、緑色サイドメニューがデフォルトで表示されている状態です。ハンバーガーメニューを2回クリックすると緑色サイドメニューは閉じます。
これを、デフォルトでは緑色のサイドメニューは表示されず、ハンバーガーをクリックすると表示されるようにしたいのです。
###コードです。
会員一覧html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CatsClover</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- ↓今回記載 --> <link rel="stylesheet" type="text/css" href="/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="/css/mysheet.css"> <!-- <link rel="stylesheet" href="http://7e42b13ce36046daba8bef447f6bbf6f.vfs.cloud9.us-east-1.amazonaws.com/css/bootstrap.css"> --> <!-- bootstrap-datepickerを読み込む --> <link rel="stylesheet" type="text/css" href="../bootstrap-datepicker-1.6.4-dist/css/bootstrap-datepicker.min.css"> <script type="text/javascript" src="../bootstrap-datepicker-1.9.0-dist/js/bootstrap-datepicker.min.js"></script> <script type="text/javascript" src="../bootstrap-datepicker-1.9.0-dist/locales/bootstrap-datepicker.ja.min.js"></script> </head> <body> <div id="wrapper"> <header class=""> <nav class="navbar navbar-expand-sm navbar-warning bg-navbar border-bottom"> <div id="admin_topvar"> <ul> <li> <a class="navbar-logo" href="">CatsClover管理者ページ</a> </li> <li class="nav-item"> <a href="" class="nav-link" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"> <i class="fas fa-sign-out-alt"></i>ログアウト </a> <form id="logout-form" action="" method="POST" style="display: none;"> <input type="hidden" name="_token" value="lMdDbH4DdIJ4hFDGihY8PecCMXJwfSjrlThIsRsu"> </form> </li> </ul> </div> <!-- ハンバーガーメニュー部分です。サイドメニューを指定 --> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#sidebar"> <span class="navbar-toggler-icon"></span> </button> </nav> </header> <div class="row"> <div class="clearfix"></div> <div class="col-md-2" id="sidebar"> <div class="sidebar-contents"> <ul class="nav-sidebar"> <li class="active" ><a href="">会員一覧</a></li> <li ><a href="">Cats一覧</a></li> <li ><a href="">Photo一覧</a></li> </ul> </div> </div> <div class="col-md-10 mt-5 pr-5"> <h1>会員一覧</h1> <table class="table table-striped mt-5"> 会員のテーブル 省略 </table> </div> </div> <!-- footer --> <footer class="text-center border-top pt-3 pb-3 small"> © All rights reserved by cats-clover. </footer> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script> </div> </body> </html>
cssです。
mysheet.css （bootstrapのcssにこちらでオリジナル部分をプラスしてしまいました）
footer { background-color: #d4e5ce; height: 50px; width: 100%; position: absolute;/*←絶対位置*/ bottom: 0; } #wrapper { min-height: 100vh; position: relative;/*←相対位置*/ padding-bottom: 50px;/*←footerの高さ*/ box-sizing: border-box;/*←全て含めてmin-height:100vhに*/ } .navbar-toggler{ border-color: #ffffff; } .navbar-toggler .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(75,75,75,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); } /*管理画面*/ #admin_topvar ul li { display: inline-block; } .copy { text-align: center; } #sidebar { padding: 0; align-items: stretch /*コンテンツの分だけになる。*/ } #sidebar ul{ width: 100%; } #sidebar li{ list-style: none; margin: 0; width: 100%; background-color: #91cd79; } #sidebar ul li a{ display: block; padding: 10px 16px; color: #fff; text-decoration: none; transition: background-color .2s linear; } #sidebar ul li.active a { background-color: #ADD99B; } #sidebar ul li a:hover { background-color: #ADD99B; }
アドバイスいただけますと幸いです。
よろしくお願いいたします。
回答1件
0
ベストアンサー
ulはcssリセットなどで上書きしないと
css
1ul { 2 display: block; 3 list-style-type: disc; 4 margin-block-start: 1em; 5 margin-block-end: 1em; 6 margin-inline-start: 0px; 7 margin-inline-end: 0px; 8 padding-inline-start: 40px; 9}
のスタイルが反映されているので、
css
1#sidebar ul { 2 margin: 0; 3 padding: 0; 4}
のように記載を行えば左側の余白がなくなると思います。
投稿2020/03/02 15:42
総合スコア395
あなたの回答
tips
プレビュー
