HTML5でホームページを作成しています。
cssにメディアクエリを使用してレスポンシブデザインにしたいのですが、
margin:0 auto;が効かず真ん中より少し左に表示されます。
ちなみにmarginを消すと右にはみ出てしまいます。
marginは効くところと効かないところがあります。
ホームページ自体は一度完成したものをレスポンシブ用に変えている途中です。
ご教示よろしくお願いします。
###html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>タイトル</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link href="../common.css" rel="stylesheet" type="text/css"> </head> <body> <!--ヘッダー略--> <div id="bbforest"> <div class="concept"> <h2>ごあいさつ</h2> <p>テキスト</p> <img src="img/concept.jpg" width="400" alt="concept"/> </div><!--concept--> <div class="profile"> <h2><span>Profile</span></h2> <img src="img/avatar.jpg" width="250" height="250" alt="avatar"/> <p class="prof_1"> <span>テキスト<br/> <br/><br/> テキスト</span></p> <p class="prof_2"> テキスト </p> <dl> <dt>'14</dt><dd>テキスト</dd> </dl> <img src="img/elefun.png" height="350" alt="" class="elefun"/> </div><!--profile--> </div><!--bbforest--> </div><!--/#container--> </body> </html>
###css
@media screen and (max-width: 639px) { #bbforest{ width:100%; height:auto; } #bbforest h2{ color:#375543; font-family:Noteworthy,TsukushiBMaruGothic; font-size:24px; width:100%; padding:20px 0 0 10px; margin:0 auto 30px; border-bottom:#433F30 dotted 2px; } #bbforest h2 span{ font-size:26px; } #bbforest p{ color:#64513d; font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ゴシックM-PRO","HGMaruGothicMPRO"; font-size:14px; } .concept{ width:90%; height:auto; margin:0 auto; overflow:hidden; } .concept p{ margin:0; width:100%; height:auto; font-weight:bold; } .concept img{ display:none; } .profile{ background-color:#f8f8f8; text-align:center; width:90%; height:auto; overflow:hidden; margin:0 auto; } .profile h2{ text-align:left; letter-spacing:0.15em; } .profile img{ width:250px; height:250px; border-radius:100%; margin:0 auto; /*効いてない*/ } .profile .prof_1{ margin-bottom:20px; width:100%; font-weight:bold; overflow:hidden; text-align:left; } .profile .prof_2{ margin:0 auto; width:90%; overflow:hidden; } .profile dl{ width:90%; margin:20px auto 0 auto; color:#64513d; font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ゴシックM-PRO","HGMaruGothicMPRO"; font-size:13px; } .profile dt{ float:left; } .profile dd{ margin-left:40px; margin-bottom:5px; } .profile .elefun{ display:none; } }
###全体css
全体のcssが文字数をオーバーしてしまったのでこちらに掲載させていただきました。
お手数をおかけします・・・。
HTML
http://3695711ea2cb27c7.main.jp/css/index.html
CSS
HTMLを質問文に追記ください。
回答2件
あなたの回答
tips
プレビュー