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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

Q&A

解決済

2回答

6268閲覧

メディアクエリでmarginが効かない

tama_art6

総合スコア7

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

0グッド

0クリップ

投稿2016/07/30 07:12

編集2016/07/31 11:26

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

http://3695711ea2cb27c7.main.jp/css/common.css

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

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

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

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

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

kei344

2016/07/30 07:43 編集

HTMLを質問文に追記ください。
guest

回答2

0

ベストアンサー

CSS

1.profile, 2.profile dl { 3 background-color: rgba( 100, 50, 20, .2 ); /* .profile dl がセンタリングされているかが確認できる */ 4} 5.profile img { 6 display: block; /* margin:0 auto; はインライン要素では使えない */ 7} 8```**動くサンプル:**[https://jsfiddle.net/z5gv8fkp/](https://jsfiddle.net/z5gv8fkp/)

投稿2016/07/30 08:33

kei344

総合スコア69364

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

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

tama_art6

2016/07/30 09:14

.profile img{ display:block; } が抜けていました・・・すみません。 display:block;を書き直してmargin:0 auto;をしてみたのですが、どうしても真ん中にきません。 その他の部分は解決しそうです。
kei344

2016/07/30 13:05

「動くサンプル」はセンターになっていると思うのですが、御覧のブラウザではなっていませんでしたか?その場合他の場所でのCSSが上書きされている可能性がありますので、デベロッパーツールでご確認ください。 【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】 http://www.buildinsider.net/web/chromedevtools/01
tama_art6

2016/07/31 00:43

動くサンプルはセンターになっていたのですが、HTMLを書き直してサーバーにあげて見ても左端に寄った状態のままになってしまいます。 上書きですか・・・調べてみます!
kei344

2016/07/31 05:43

.profile img{ display:block !important; } とかでも無理ですか? CSS全体を質問文に追記されればなにかわかるかもしれません。
tama_art6

2016/07/31 11:27

!important;を入れても動かないです・・・ 大変お手数をかけて申し訳ないのですが、cssを掲載したので大変乱雑なものですが、よろしければご一読お願いします。
kei344

2016/07/31 11:38

@media screen and (max-width: 1023px) の .profile img / .profile dl 部分でfloat:left;が設定されているので削除すればよいです。
tama_art6

2016/07/31 12:10

無事解決しました!本当にありがとうございます!!!
guest

0

tama_art6さんこんにちは

可能性がありそうなところを簡単に上げさせていただきます。

・htmlのヘッダ宣言
・viewportの設定
・効かない要素の親要素がどうなっているか。

cssでもwidth指定がないと効かないなどがあったと思いますが
上記ソースでは書かれているので大丈夫そうですね。
他にも色々あったかもしれませんがざっと思いつく限りを書いてみました。
pxと%の兼ね合いももしかするとあるかも。(←憶測です
htmlのソースをいただけると回答の精度も上がってくると思いますので
もし可能でしたらご提示をお願いいたします。

投稿2016/07/30 07:56

ruuusaamarki

総合スコア468

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

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

tama_art6

2016/07/30 08:01

回答ありがとうございます。 htmlを追記いたしましたので、ご一読よろしくお願いします。 pxと%の兼ね合いというのは、両方使っているのが原因ということでしょうか?
ruuusaamarki

2016/07/30 08:14

すみません、憶測でしたので関係ないかもしれません。 取り急ぎの解決方法として 2パターン .profileにtext-alin:centerを加え その他の要素に(.profileに内包される要素) text-alin:leftを指定していく。 .profile imgをdiv等で囲みそのdivにwidth:100%;text-align:center;を指定 もしかするともっとスマートな解決方法があるかもしれませんので 諸兄の回答も要チェックですね。
tama_art6

2016/07/30 09:14

img以外は解決できそうです!ありがとうございました!
ruuusaamarki

2016/07/30 10:14

すみません、display:block;がありましたね。 inline要素とblock要素の解説が抜けていました。 display:block;でやるほうがコンパクトに書けるので構文的にもよさそうですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問