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

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

ただいまの
回答率

89.10%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,598

tama_art6

score 7

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • kei344

    2016/07/30 16:43 編集

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

    キャンセル

回答 2

checkベストアンサー

0

.profile,
.profile dl {
    background-color: rgba( 100, 50, 20, .2 ); /* .profile dl がセンタリングされているかが確認できる */
}
.profile img {
    display: block; /* margin:0 auto; はインライン要素では使えない */
}

動くサンプル:https://jsfiddle.net/z5gv8fkp/

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/07/31 20:27

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

    キャンセル

  • 2016/07/31 20:38

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

    キャンセル

  • 2016/07/31 21:10

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

    キャンセル

0

tama_art6さんこんにちは

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

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/07/30 17:01

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

    キャンセル

  • 2016/07/30 17:14

    すみません、憶測でしたので関係ないかもしれません。

    取り急ぎの解決方法として
    2パターン

    .profileにtext-alin:centerを加え
    その他の要素に(.profileに内包される要素)
    text-alin:leftを指定していく。

    .profile imgをdiv等で囲みそのdivにwidth:100%;text-align:center;を指定

    もしかするともっとスマートな解決方法があるかもしれませんので
    諸兄の回答も要チェックですね。

    キャンセル

  • 2016/07/30 18:14

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

    キャンセル

  • 2016/07/30 19:14

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

    キャンセル

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

  • ただいまの回答率 89.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる