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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

検索

検索は、あるデータの集まりの中から 目的のデータを見つけ出すことです。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

1433閲覧

縮小した時にサイドバーの文字を中央固定・下側の空白を無くしたい

ogawa14041

総合スコア1

HTML5

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

検索

検索は、あるデータの集まりの中から 目的のデータを見つけ出すことです。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2020/06/22 15:09

編集2020/06/23 14:55

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
現在HTML5・JQUERY・bootstrapを活用して本の貸し出しシステムを作っています。
・縮小した時に図2の下側の空白をけしたい
.縮小した時にサイドバーの文字を黒色の部分の真ん中に配置したい
上記の二点をbootstrapを用いて解決したいです
イメージ説明図1
イメージ説明図2

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

縮尺を小さくすると 問題点1・左側のAll等の配置が左に寄ってしまう(中央に配置したい) 問題点2・下側に謎の空白ができてしまう(空白をなくしたい)

該当のソースコード

<!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>

試したこと

問題点1・text-centerを行なっているが中央に寄らない
問題点2・レスポンシブによるものだと考えたが検索能力が低く答えを導き出せません

補足情報(FW/ツールのバージョンなど)

bootstrapは最新バージョンで行っています。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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

hope_mucci

総合スコア4447

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ogawa14041

2020/06/27 03:26

回答ありがとうございます。 とても分かり易かったです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問