ここから本文です

すみません。

neoen515さん

2015/2/1820:52:24

すみません。

これからWEBサイトを作りたいんですが、

教えてください!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" href="css/sstyle.css" type="text/css" >
</head>

<body>
<div>
<header> ここはヘッダーです。 </header>
<nav> ここはナビゲーションです。 </nav>
</div>
</body>
</html>

スタイルシートが

@charset "utf-8";
/* CSS Document */

div {
margin:0 auto;
background:#637A92;
}

header {
width:980px;
height:200px;
background:#B15D5E;
}

nav {
width:980px;
height:80px;
background:#A68586;
}

と、記述したんですが、

なぜか <div> で囲った<header>と<nav>が中央寄せになってくれません。。。。

なぜでしょうか???

どこがいけないのでしょうか?

あと、わからない時は、今回のようにコードを載せて、

このように質問をしてもいいのでしょうか?

知恵袋で質問をするのも初めてで、

質問をする上でのマナーといいますか。。。

そういったことも教えていただけたらと思います。

ご回答、よろしくおねがいします!!!

閲覧数:
73
回答数:
3
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

heiltoreasonさん

2015/2/1823:44:12

div に横幅が指定されていないので、デフォルトの 100% になっているから、margin: auto は意味がありません。(両サイドの余白がないので両サイドに margin を付けることができない)

div {
width: 980px;
margin:0 auto;
background:#637A92;
}

header {
height:200px;
background:#B15D5E;
}

nav {
height:80px;
background:#A68586;
}

質問した人からのコメント

2015/2/19 20:58:30

ありがとうございます!

デフォルトで設定が入っていたんですね。

横幅を指定することで、100%の指定を上書きして、

その上で margin : 0 atuo; を指定すると、

うまく配置されるんですね。

ありがとうございます!

ベストアンサー以外の回答

1〜2件/2件中

並び替え:回答日時の
新しい順
|古い順

imp27gdbさん

2015/2/1908:21:21

>わからない時は、今回のようにコードを載せて、
>このように質問をしてもいいのでしょうか?

別に構いません。
htmlを

<div id="test">
<header> ここはヘッダーです。 </header>
<nav> ここはナビゲーションです。 </nav>
</div>

みたく、divに「名前」つけましょう。idでもclassでも良いです。

で、cssが

div#test {
margin:0 auto;
width:980px;
background:#637A92;
}

外側を囲っているdivに「width」の値がないと、
センター寄せは利きません。

khurataさん

2015/2/1822:17:09

HTML5 については私自身まだ不勉強で、確信を持って言える事が少ないのですが、

div {
margin:0 auto;
background:#637A92;
}

を、

div {
text-align:center;
background:#637A92;
}

に変更してみてください。 こうする事により、div の子要素のうちインライン要素はセンタリングされるはずです。


実際のコードを載せていただくと、回答側としても助かります。 全くマナー違反ではないと思います。
むしろ、コードの部分しか載せていなかったり、スクリーンショット画像しか無かったりすると、回答側は大変なので、きちんとソースコードを載せていただいた方が良いです。

ただし、知恵袋の質問欄に書き切れる文字数を超えてしまう場合は、「知恵袋という場にはそぐわない事をしようとしているのだ」と考えていただいて差し支えないかと思います。

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問や知恵ノートは選択されたID/ニックネームのMy知恵袋で確認できます。