よろしくお願いいたします。
現在、webページを作っており、初めてbootstrapを使用します。
表題通り、レスポンシブデザインを使って、webページがスマホでも見やすいようなレイアウトにしたいと思っています。
まずは、ヘッダーのみで試しています。
ヘッダーは、左側の<header-left>と、右側の<header-right>の二つに大まかに分かれています。(floatで横並びにしています。)
スマホでは、下記の画像のように<header-left>の下に、<header-right>を配置したような見た目にしたいと思っています。
調べた結果、下記のようなソースを試してみました。
<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というサイトを使い、スマホでの見た目を確認したところ、下記画像のようになってしまいました。
本やネットでレスポンシブデザンについて一通り目は通したのですが、初めてのためグリッドシステムなどまだうまく理解できず実現に至りません。。。
該当箇所をどのように記述すればうまく反映されるのか、有職者の皆様にご教示いただきたく存じます。
どうぞよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー