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

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

ただいまの
回答率

90.51%

  • CSS

    7526questions

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

  • HTML5

    5112questions

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

  • Bootstrap

    1289questions

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

  • Webサイト

    1275questions

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

  • CSSフレームワーク

    189questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,066

nekomura

score 124

よろしくお願いいたします。
現在、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
本やネットでレスポンシブデザンについて一通り目は通したのですが、初めてのためグリッドシステムなどまだうまく理解できず実現に至りません。。。
該当箇所をどのように記述すればうまく反映されるのか、有職者の皆様にご教示いただきたく存じます。
どうぞよろしくお願いいたします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • miz

    2016/09/09 11:37

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

    キャンセル

回答 1

checkベストアンサー

+2

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/08 16:31

    miz様
    img-responsiveクラス、これからレスポンシブデザインのwebを作っていくにあたりとても参考になりました。
    ありがとうございます!

    頂いたソースを、早速ためさせていただきました。
    画像のレイアウトに変化はありませんでした。。
    もう少し試行錯誤してみます、ありがとうございます。

    キャンセル

  • 2016/09/08 16:41

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

    キャンセル

  • 2016/09/08 16:55

    miz様
    ご回答に感謝いたします。
    >問題が再現しなかったので
    つまり、本質問で私が実現希望としている画面が表示されたということでしょうか?

    また、五月雨式の質問になり大変恐縮なのですが
    >、独自のcss/custom.cssとcss/stylesheet.cssを中心に確認してみればいいのではないかと思います。
    ↑これは、どのようにして行うのでしょうか…。
    CSSやBootstrapを始めたばかりでよく分かっておらず、頓珍漢な事を質問しているきらいがありますが、お答え頂ければ幸いです。

    キャンセル

  • 2016/09/08 17:15

    はい、ご要望のとおりの画面表示になりました。なので、Bootstrapでのレイアウト構築の仕方は間違っていないように思います。コードの目視確認でも特に気になるところありませんでした。

    CSSファイルの確認の仕方ですが、特に特別なことを意図したわけでなく、目視確認で、コードの書き方に間違いがないかや試行錯誤をした後の残骸コードが残っていないかどうかなど確認してみては?という意図でコメントしました。

    後はCSSであれば、やはりブラウザのデベロッパーツール(開発者ツール)が役に立つので、それを使って、各要素に予期していないプロパティがくっついていないかを確認するのが一番手っ取り早いと思います。

    キャンセル

  • 2016/09/08 17:30

    >ブラウザのデベロッパーツール
    とても便利ですね、ありがとうございます!

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

    キャンセル

  • 2016/09/13 12:04

    miz様
    ご回答や修正依頼のアドバイスをいただいていたにもかかわらず、こちらの事情でお返事が遅くなりました。
    申し訳ありません。

    本件ですが、Bootstrapで用意されているナビゲーションバー、Navbarを試用して
    本質問の画像にあるヘッダー部分のレスポンシブを実現する事が出来ました。

    cssやBootstrapを始めたばかりの初心者である私にとって、有意義なアドバイスをたくさんいただけたので、ベストアンサーとさせていただきます。

    どうぞ今後ともよろしくお願いいたします。

    キャンセル

同じタグがついた質問を見る

  • CSS

    7526questions

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

  • HTML5

    5112questions

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

  • Bootstrap

    1289questions

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

  • Webサイト

    1275questions

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

  • CSSフレームワーク

    189questions

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