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

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

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

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Bootstrap

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

1回答

1970閲覧

【CSS】 【HTML】【boot strap】レスポンシブデザイン スマホでの画面

nekomura

総合スコア132

HTML5

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Bootstrap

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2016/09/08 06:43

編集2016/09/09 01:33

よろしくお願いいたします。
現在、webページを作っており、初めてbootstrapを使用します。
表題通り、レスポンシブデザインを使って、webページがスマホでも見やすいようなレイアウトにしたいと思っています。
まずは、ヘッダーのみで試しています。
ヘッダーは、左側の<header-left>と、右側の<header-right>の二つに大まかに分かれています。(floatで横並びにしています。)
スマホでは、下記の画像のように<header-left>の下に、<header-right>を配置したような見た目にしたいと思っています。
PC画面

調べた結果、下記のようなソースを試してみました。

<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900|Raleway:400,300,500,600,700,800,900' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/custom.css"> <link rel="stylesheet" type="text/css" href="css/stylesheet.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <!-- 中略--> <header> <div class="container"> <div class="row"> <div class="col-md-6 col-xs-12 header-left"> <!-- 本質問部分--> <img class="logo" src="WebContent/images/html.png"> </div> <div class="col-md-6 col-xs-12 header-right"> <!-- 本質問部分--> <div class="entry-wrapper"> <a href="#" class="link login"><span class="fa fa-download" aria-hidden="true"></span>ログイン</a> <a href="#" class="link sign-up"><span class="fa fa-download" aria-hidden="true"></span>新規登録</a> </div> <div class="info-wrapper"> <a href="#" class="href product">製品情報</a> <a href="#" class="href device">デバイス情報</a> <a href="#" class="href support">サポート</a> <a href="#" class="href setting"><span class="fa fa-bars fa-large" aria-hidden="true"></span></a> </div> </div> </div> </div> </header>

Demonstrating Responsive Designというサイトを使い、スマホでの見た目を確認したところ、下記画像のようになってしまいました。
12
本やネットでレスポンシブデザンについて一通り目は通したのですが、初めてのためグリッドシステムなどまだうまく理解できず実現に至りません。。。
該当箇所をどのように記述すればうまく反映されるのか、有職者の皆様にご教示いただきたく存じます。
どうぞよろしくお願いいたします。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2016/09/09 02:37

もし可能であれば、custom.cssとstylesheet.css内の関係するclass、idのスタイルも情報に追加してはいかがでしょうか。的確な回答を得られやすくなるかもしれません。
guest

回答1

0

ベストアンサー

的外れかもしれませんが、以下のようにしたらいかがでしょうか?

画像の大きさが合っていないためにウィンドウの横幅が伸びてしまっているようにも見えるので、画像にimg-responsiveクラスを付加してみてください。

HTML

1<img class="logo img-responsive" src="WebContent/images/html.png">

投稿2016/09/08 07:22

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

nekomura

2016/09/08 07:31

miz様 img-responsiveクラス、これからレスポンシブデザインのwebを作っていくにあたりとても参考になりました。 ありがとうございます! 頂いたソースを、早速ためさせていただきました。 画像のレイアウトに変化はありませんでした。。 もう少し試行錯誤してみます、ありがとうございます。
退会済みユーザー

退会済みユーザー

2016/09/08 07:41

当方の環境(Bootstrapあり)で試したところ、提示頂いたソースコードの範囲では、質問者様が悩んでいる問題が再現しなかったので、独自のcss/custom.cssとcss/stylesheet.cssを中心に確認してみればいいのではないかと思います。 後はブラウザのデベロッパーツールで「製品情報」などのメニューのあたりを確かめてみることもおすすめします。
nekomura

2016/09/08 07:55

miz様 ご回答に感謝いたします。 >問題が再現しなかったので つまり、本質問で私が実現希望としている画面が表示されたということでしょうか? また、五月雨式の質問になり大変恐縮なのですが >、独自のcss/custom.cssとcss/stylesheet.cssを中心に確認してみればいいのではないかと思います。 ↑これは、どのようにして行うのでしょうか…。 CSSやBootstrapを始めたばかりでよく分かっておらず、頓珍漢な事を質問しているきらいがありますが、お答え頂ければ幸いです。
退会済みユーザー

退会済みユーザー

2016/09/08 08:15

はい、ご要望のとおりの画面表示になりました。なので、Bootstrapでのレイアウト構築の仕方は間違っていないように思います。コードの目視確認でも特に気になるところありませんでした。 CSSファイルの確認の仕方ですが、特に特別なことを意図したわけでなく、目視確認で、コードの書き方に間違いがないかや試行錯誤をした後の残骸コードが残っていないかどうかなど確認してみては?という意図でコメントしました。 後はCSSであれば、やはりブラウザのデベロッパーツール(開発者ツール)が役に立つので、それを使って、各要素に予期していないプロパティがくっついていないかを確認するのが一番手っ取り早いと思います。
nekomura

2016/09/08 08:30

>ブラウザのデベロッパーツール とても便利ですね、ありがとうございます! >ご要望のとおりの画面表示になりました。 ご確認頂きありがとうございます。 やはり、こちらではレスポンシブデザインにはならないので、アドバイスどおりどこかに余計なコードが入っていないかを確認してみたいと思います!
nekomura

2016/09/13 03:04

miz様 ご回答や修正依頼のアドバイスをいただいていたにもかかわらず、こちらの事情でお返事が遅くなりました。 申し訳ありません。 本件ですが、Bootstrapで用意されているナビゲーションバー、Navbarを試用して 本質問の画像にあるヘッダー部分のレスポンシブを実現する事が出来ました。 cssやBootstrapを始めたばかりの初心者である私にとって、有意義なアドバイスをたくさんいただけたので、ベストアンサーとさせていただきます。 どうぞ今後ともよろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問