Q&A
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
現在HTML5・JQUERY・bootstrapを活用して本の貸し出しシステムを作っています。
・縮小した時に図２の下側の空白をけしたい
．縮小した時にサイドバーの文字を黒色の部分の真ん中に配置したい
上記の二点をbootstrapを用いて解決したいです
図１
図２
発生している問題・エラーメッセージ
縮尺を小さくすると 問題点１・左側のAll等の配置が左に寄ってしまう（中央に配置したい） 問題点２・下側に謎の空白ができてしまう（空白をなくしたい）
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script> <title>Document</title> </head> <body style="margin-bottom:-100px" > <div class="container-fluid h-100" style="background-color: #eeeeee"> <div class="row h-100 "> <!--サイドメニュー--> <div class="col-sm-2" style="background-color:#4d4d4d;"> <div class="position-fixed " style="margin-left: 35px;"> <a href="#" class="text-center" style="margin-bottom:30px; margin-top: 70px; display:block; color:white; font-size: 30px; width: auto;" id="All">All</a> <br> <a href="#" class="text-center" style="margin-bottom:30px; display:block; color:white; font-size: 30px; width: 100%;">Borrow</a> <br> <a href="#" class="text-center" style="margin-bottom:30px; display:block; color:white; font-size: 30px; width: 100%;">Over</a> <br> <a href="file:///C:/Users/ogawa/Desktop/portbook/index.html"><button class="btn-outline-info" style="margin-top:150px; display:block; font-size: 30px; width: auto;">RETURN</button></a> </div> </div> <!--/サイドメニュー--> <!--メインコンテンツ--> <div class="col-sm-10"> <div class="text-center strong" style="margin-top: 80px; margin-bottom: 58px;" id="warning">＜入力項目＞</div> <form class="text-center"> <div class="form-group row"> <label for="isbn" class="col-sm-3 col-form-label">ISBN</label> <div class="input-group col-sm-6" style="margin-bottom: 30px;"> <input type="text" class="form-control" id="isbn" placeholder="12345678910"> <button class="btn btn-default btn-primary" type="submit" id="getBookInfo">Search</button> </div> </div> <div class="form-group row"> <label for="title" class="col-sm-3 col-form-label">タイトル</label> <div class="col-sm-6" style="margin-bottom: 30px;"> <input type="text" class="form-control" id="title" placeholder="本の借り方" value=""> </div> </div> <div class="form-group row"> <label for="author" class="col-sm-3 col-form-label">著者</label> <div class="col-sm-6" style="margin-bottom: 30px;"> <input type="text" class="form-control" id="author"placeholder="本借男" value=""> </div> </div> <div class="form-group row"> <label for="genre" class="col-sm-3 col-form-label">ジャンル</label> <div class="col-sm-6" style="margin-bottom: 30px;"> <select type="text" class="form-control" id="genre" placeholder="文芸,実用,ビジネス・経済・経営,児童書・学参,専門書,その他" value=""> <option value="1">文芸</option> <option value="2" selected="selected">実用</option> <option value="3">ビジネス・経済・経営</option> <option value="4">児童書・学参</option> <option value="5">専門書</option> <option value="6">その他</option> </select> </div> </div> <div class="form-group row"> <label for="publisher" class="col-sm-3 col-form-label">出版社</label> <div class="col-sm-6" style="margin-bottom: 30px;"> <input type="text" class="form-control" id="publisher" placeholder="集英社" value=""> </div> </div> <div class="form-group row"> <label for="image-url" class="col-sm-3 col-form-label">画像URL</label> <div class="col-sm-6" style="margin-bottom: 20px;"> <input type="text" class="form-control" id="image-url" placeholder="https://search.yahoo.co.jp/image/search?ei=UTF-8&p=%E6%96%87%E9%83%A8%E7%A7%91%E5%AD%A6%E7%9C%81&fr=mcafeess1" value=""> <!-- todo:画像を表示 --> <div src="" id= "thumbnail" class="mx-auto" style="margin-top: 50px; width: 240px; height: 310px;"></div> <img src="no_image.jpg" style="margin-top: -300px; width: 240px; height: 310px;" id="no-image"/> <!-- /todo:画像を表示 --> </div> </div> <div class="form-group row"> <label for="description" class="col-sm-3 col-form-label">書籍の説明</label> <div class="col-sm-6" style="margin-bottom: 30px;"> <textarea class="form-control" id="description" rows="4" value=""></textarea> </div> </div> <div class="text-center"> <button type="submit" class="btn btn-primary " style="margin-bottom: 50px;">書籍を追加</button> </div> </form> <!--/メインコンテンツ--> </div> </div> </div> </body> </html>
試したこと
問題点１・text-centerを行なっているが中央に寄らない
問題点２・レスポンシブによるものだと考えたが検索能力が低く答えを導き出せません
補足情報（FW/ツールのバージョンなど）
bootstrapは最新バージョンで行っています。
回答1件
0
ベストアンサー
まず、スタイルはcssファイルに書いて外出ししましょう。一時的な実験ならhtmlに直接書いても良いですが、そのような雰囲気には見えないので。
bootstrapのグリッドにした要素に対し、子要素に.position-fixedを付与すると親のグリッドレイアウトを無視してしまうようです。公式リファレンスにもレスポンシブ未対応と書いてあるのでよほどのことがない限り使うべきではないのではと思います。
どのdivタグのclassとstyleの指定を全て消せば中身をセンターに寄せられます。
html
1 <!--サイドメニュー--> 2 <div class="col-sm-2" style="background-color:#4d4d4d;"> 3 <div>
下側の空白について、そこは本来の描画領域の外側なのでどうすることもできないですが、html属性のbackground-colorなどは有効です。
css
1html{ 2 background-color: #eeeeee; 3}
background-imageをうまく使えばサイドメニュー側の背景も対応できるかもしれませんがかなり工夫が必要かも。
※そもそもブラウザの縮小機能に律義に対応する必要があるのかが疑問です。そんなサイトほとんどないと思うし。
投稿2020/06/23 23:51
総合スコア4447
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/27 03:26